19 Ağustos 2012 Pazar

Html Dersleri Html Liste Ve Örnekler

Html de listeleme yapmak için en yaygın olarak kullanılan Ordered List (sıralı listele)  ya da Unordered List (sırasız liste) dır.

Ordered List
  1. Ordered List                                  
  2. Sıralı liste
Unordered List
  • unordered List 
  • sırasız liste


    Sıralı ve sırasız sıralama yı tanımlamak gerekirse tablodada gordugunuz şekildeki gibidir.Ayrıca Websitesi menu tasarımlarında da unordered (sırasız liste) yöntemi kullanılır.

    Sıralı listeleri tanımlamak için <ol> </ol> etiketleri kullanılır. Sıralayacamız her nesne için <li> etiketleri kullanılır.

    Sıralı liste  ;
    Örnek Kullanım
    (Ordered List)

    <ol>
    <li>html</li>
    <li>css </li>
    </ol>
    1. Html
    2. Css

    Sırasız listeleri tanımlamak için <ul> </ul> etiketleri kullanılır.Sıraladıgımız her nesnenin basına kucuk bir nokta işareti getirir.Her nesne için de aynı sekilde <li> </li> etiketleri kullanılır.

    Sırasız liste  ;
    Örnek Kullanım
    (Unordered List)

    <ul>
    <li>html</li>
    <li>css </li>
    </ul>
    • Html
    • Css

    Html liste yöntemleri kısaca bu sekıldedir.

    17 Ağustos 2012 Cuma

    Css Şablon Oluşturma ( Css Template)

    Web tasarımına yeni başlayanlar veya Css de hazır şablona ihtiyac duyanlar için hazırladıgım bir kaç basit Css şablonu sizlerle paylasmak istiyorum.

    Css şablonları kullanarak kısa sürede websitesi olusturabilirsiniz.Tabi Css kullanmanın yanı sıra javascript ,ajax ,flash vb programları kullanarak sitenizi daha dinamik bir hale getirebilirsiniz.Ama webtasarımının temeli Xhtml ve Css ile başlar .O yüzden temel düzeyde olsa dahi xhtml ve css kullanmayı bilmelisiniz.

    Resimde görmüş oldugunuz Css şablonun kodlarını aşagıda bulabilir.Ve bu kodları kullanarak css şablon olusturabilirisiniz.Kendinize gore düzenleyerek farklı bir Css şablonda olusturmanız mumkün.

    css şablon
    Css Şablon ( Css Template)
    * {
        vertical-align: baseline;
        font-weight: inherit;
        font-family: inherit;
        font-style: inherit;
        font-size: 100%;
        border: 0 none;
        outline: 0;
        padding: 0;
        margin: 0;
    }
    #footer {
        width: 960px;
        margin-right: auto;
        margin-left: auto;
        background-color: #3CF;
    }
    html, body {
        height: 100%;
    }
    #outerWrapper {
        margin: 0px auto -4em;
        width: 960px;
        min-height: 100%;
        height: auto !important;
        height: 100%;
    }
    #header {
        width: 100%;
        background-color: #39F;
    }
    #contentWrapper {
        width: 100%;
        overflow: auto;
    }
    #sidebar {
        width: 200px;
        float: left;
        background-color: #36C;
        height: auto;
    }   
    #content {
        width: 760px;
        float: right;
        background-color: #369;
    }

    #right {
        width: 380px;
        margin-right: auto;
        margin-left: auto;
        float: right;
    }
    #left {
        float: left;
        width: 380px;
        margin-right: auto;
        margin-left: auto;
    }
    </style>

    • Yukarıdaki kodlar Css için isterseniz bu kodları harici bir css dosyasıyla kullanırsınız. Yada Html dosyanızın içinde html kodlarıyla birlikte kullanırsınız.Css i tanımlamanın 3-4 çeşit yontemi vardır.

    </head>

    <body>
    <div id="outerWrapper">
      <div id="header">
        <p>Content for id "header" Goes Here</p>
        <p>&nbsp;</p>
      </div>
      <div id="contentWrapper">
        <div id="sidebar">
          <p>Content for  id "sidebar" Goes Here</p>
     
        </div>
        <div id="content">
          <p>Content for  id "content" Goes Here </p>
          <div id="lipsum">
            <p>&nbsp;</p>
           
          </div>
          <div id="left">
            <p>Content for  id "left" Goes Here</p>
            <p>&nbsp;</p>
     </div>
    <div id="right">
     <p>Content for  id "right" Goes Here</p>
     </div>
     </div>
     </div>
     <div id="footer">Content for  id "footer" Goes Here</div>
     </div>
    <div id="footer">
    </div>
    /body>
    </html>

    • Buradaki kodlarımız da html kodlarıdır.Olsuturdugumuz Css divleri tanımlamamız gerektiginden bu kodları yazmak zorundayız.
    Ben arka plan renklerini divler belirgin olsun diye renkli yaptım.Yani arka plan renklerini kaldırmanız sizin acınızdan daha faydalı durum olur.Ayrıca Sidebar divinin yüksekligini kendiniz ayarlayabilirsiniz..Burdaki kodları kullandıgınız takdirde resimdeki sablonun aynısını elde edersiniz.Tabi bu sadece basit bir şablondur yeni baslayan arkadaslara umarım faydalı olur..

    12 Ağustos 2012 Pazar

    Twitter Arka Planları ( twitter backgrounds )

    twitter_logo
    Son yılların en popüler sosyal medya platformu olan twitter profiliniz için, arka plan içeren ve twitter arka planlarını ücretsiz indirip kullanabileceğiniz bir kaç web sitesi tanıtmak istiyorum.

    Eğer fireworks, photoshop gibi programları kullanabiliyorsanız çok basit bir şekilde kendinizde twitter için arka plan olusturabilirsiniz.




    8 Ağustos 2012 Çarşamba

    HTML İletişim Formu (contact form)

    Yeni bir html konusuyla devam etmek istiyorum.Hemen hemen bütün web sitelerin de iletişim formu vardır.

    İletişim formu neden gereklidir ? 

    iletisim formu sayesinde sitemize gelen ziyaretçilerle iletişim kurabilir , onların görüşlerini ve isteklerini öğrenebilir böylelikle site ziyaretçilerimiz ile site sahibi arasında bir kontakt kurulmuş olur. kısaca açıklamak gerekirse  iletisim formununu bu sekilde tanımlayabiliriz.

    Şimdi Html iletişim formumuzu adım adım olusturmaya başlayalım.

    Öncelikle Adı Ve Soyadı girişi yapılması için ıkı tane metın kutusu ekleyelim :

    <input type="text" name="ismi"  />
    <input type="text" name="Soyismi"  />
     
    metin kutusu eklemek için input type text etiketini kullanırız. 
     
    Metin kutularını ekledikten sonra şimdi Onay kutusu nu ekleyelim.
     
    <input type="checkbox" name="medeni" value="evli" /> onay kutusunu eklemek
    için checkbox etiketini kullandık 

    Şimdi ise Adres , içerik vs için eklememiz gereken text area kısmını ekleyelim.

    <textarea name="adresi" rows="6" cols="40">

    Açılır çoklu seçenek kutusu yani listbox :

    <select name="iller" size="1">
    <optgroup label="Marmara">
    <option>Istanbul</option>
     
    gibi etiketleri kullanacagız. 
     
    Radio buton eklemek için radio etiketini kullanacagız. 
     
    <input type="radio" name="uzman" value="Photoshop" /> 
     
    Son olarak buton ekleyerek formumuzu tamamlamış olacagız. 
     
    <input type="submit" value="Gönder" /> 
     
    kodları takip ederseniz aşagıdakı formun aynısını olusturabilirsiniz.
    Ayrıca CSS kullanarak görünüm olarak cok daha zengin gornume sahip 
    bir form elde edebilirsiniz. 

    Örnek İletişim Formu 

    Adi :
    Soyadi :
    Medeni Durumu : Evli
    Bekar
    Adresi :
    Yasadiginiz Sehir :
    Uzmanlik Alani :
    Flash


    Photoshop


    Fireworks


    Php


    Son olarak Form için bütün html kodlarını ekliyorum.Bu kodları kullarak aynı form a sahip olabilirsiniz.İstedıgınız sekılde uzerınde calısıp daha da güzel bir form haline getirebilirsiniz.

    <b><td> Soyadi : </td><b>
    <td><input type="text" name="Soyismi" /></td>
    <tr>
    <td>Medeni Durumu : </td>
    <td><input type="checkbox" name="medeni" value="evli" /> Evli
    <input type="checkbox" name="medeni" value="evli" /> Bekar </td>
    <tr>
    <td> Adresi : </td>
    <td><textarea name="adresi" rows="6" cols="50"></textarea></td>
    </tr>
    <tr>
    <td> Yasadiginiz Sehir : </td>
    <td><select name="iller" size="1">
    <optgroup label="Marmara">
    <option>Istanbul</option>
    <option>Bursa</option>
    <option>Sakarya</option>
    <option>Kocaeli</option>
    </optgroup>
    <optgroup label="Ege">
    <option>Izmir</option>
    <option>Manisa</option>
    <option>Aydin</option>
    </optgroup>
    <optgroup label="Akdeniz">
    <option>Antalya</option>
    <option>Isparta</option>
    <option>Mersin</option>
    </optgroup>
    <optgroup label="Diger">
    <option>Ankara</option>
    <option>Adana</option>
    <option>Balikesir</option>
    </optgroup>
    </select>
    </tr>
    <tr>
    <td>Uzmanlik Alani : </td>
    <td><br><input type="radio" name="uzman" value="Flash" />Flash<br/>
    <br><input type="radio" name="uzman" value="Photoshop" />Photoshop<br/>
    <br><input type="radio" name="uzman" value="Fireworks" />Fireworks<br/>
    <br><input type="radio" name="uzman" value="Php"/>Php<br/></td>
    </tr>
    <tr>
    <td></td>
    <td><input type="submit" value="Gönder" />
    <input type="reset" value="Temizle" /> </td>
    <tr>
    </tr>
    </form>
    </body>

    4 Ağustos 2012 Cumartesi

    Dreamweaver Cs5 Site Tanımlama

    dreameweaver cs5  logo


    Dreamweaver programını kullanarak site olustururken , ilk yapmamız gereken işlerden biri site tanımlamadır. Eğer ayrıca local host üzerinden sitenizi test etmek istiyorsanız mutlak suretle sitenizi tanımlamanız gerekir.

    Öncelikle "Site"  sekmesine gelin ve ordan " New Site" sekmesine tıklayarak yeni bir site olusturarak site tanımlama işlemine başlayalım.

    Ardından karsımıza cıkan resimde ki gibi sekmeyle karsılasacagız

    dreamweaver_site_tanımlama

    • Site Name : Tanımlamıs olacagımız sitenin adını verecegiz.Sitenize hangi ismi vermek istiyorsanız onu girebilirisiniz.

    • Local Site Folder : Local Site Folder da ise web siteniz için olusturacagınız sayfalar resimler dosyalar vs. nerede tutacagınızı belirleyeceginiz yerdir.Kısacası sitenizin dosyalarının tutulacagı yerdir.
    Burayı tamamladıktan Sonra Servers Kısmına gelelim. Server Kısmında localhost tan yani Xampp veya Wampp gibi programlar kullanıyorsak yada php mysql web uygulamaları kullanarak site olusturuyorsak tanımlamamız gerekir.

    dreamweaver_site_tanimlama

    Basic ayarlardan hemen server'ı tanımlayalım ;

    Server Name : Serverımıza verecegimiz ismi girelim istedigimiz bir ismi girebiliriz

    Connecting Using: Burada local /network u secelim çünki kendi bilgisayarımızdan baglantı olusturacagız.

    Server Folder : locate site folder olusturdugumuz dosya yolunun aynısını buraya ekliyoruz.

    Web URL : Web url miz ise tarayıcıda girecegimiz adrestir . Burada localhost uzantılı ve site adımızla birlikte olmalıdır.

    Örnek olarak ; http://localhost/tourism/index.html

    dreamweaver_site_tanımlama

    Advanced Settings kısmında ise ;


    Default Images Folder : burada locate site folder içine bir tane images folder olusturacagız ve bunu default images folder olarak tanımlayacagız site için olusturdugumuz resimleride images folder kısmında bulunduracagız.

    Site-Wide Media Quey File : Burada siteniz için olustaracagınız media dosyalarını eklemek için olusturacagınız dosyanın yolunu gostereceksiniz.

    Web URL : web url yi yukarıda ayarlamıstık aynı sekilde olacak.

    Bu kadar ayarlamaları yaptıktan sonra daha fazla detaya girmeden save diyerek dreamweaver cs5  site tanımlama işlemini bitiriyoruz.
    //Luckyorange//