Türküm, doğruyum, yapışkanım!

HTML Tags (Etiketleri) - 5

5. bölüm listeler - html'in desteklediği liste çeşitleri ordered (sıralı), unordered (sırasız), definition (tanımlı) olarak 3 tanedir.

HTML sayfamızda liste oluşturmak için kullanacağımız taglere bir göz atalım;

Unordered List <ul>
Unordered (sırasız) list, sayfamızda sıralamak istediğimiz çeşitli materyaller (ürün, ürün özellikleri gibi) için kullanacağımız liste biçimlerinden biridir. Listemize ait maddelerin her biri çeşitli şekiller (genellikle küçük siyah daire) ile işaretlenir. Sırasız listeler <ul> tagi ile; her bir liste maddesi ise <li> tagi ile başlar. Bu kısa bilgilerden sonra hemen bir örnek kod yazıp browserda nasıl göründüğüne bakalım:

<ul>
   <li>Peynir</li>
   <li>Ekmek</li>
   <li>Süt</li>
</ul>

Yukarıdaki kodlar browserda aşağıdaki gibi gözükecektir:

• Peynir
• Ekmek
• Süt

Görüldüğü üzere standart olarak browser liste maddelerimizin baş tarafına küçük siyah dairelerimizi yerleştirdi. Yukarıda gördüğümüz bir unordered (sırasız) list'tir. Bu liste maddelerimiz için sıranın önemi olmadığı durumlarda kullanılır. Yani peynir, ekmek veya süt yer değiştirebilir.

Ordered List <ol>
Ordered (sıralı) list, sayfamızda materyallerimizi sıralayabileceğimiz bir diğer liste biçimidir. Bu liste biçiminde, listemize ait maddeler sayılar ile işaretlenir. Sıralı listeler <ol> tagi ile; her bir liste maddesi ise <li> tagi ile başlar. Sıralı listemiz için oluşturduğumuz örnek kodu inceleyin:

<ol>
   <li>Peynir</li>
   <li>Ekmek</li>
   <li>Süt</li>
</ol>

Yukarıdaki kodlar browserda aşağıdaki gibi gözükecektir:

1. Peynir
2. Ekmek
3. Süt

Liste maddelerimiz otomatik olarak browser tarafından numaralandırıldı. Herhangi bir liste maddesinin içine paragraf, satır kesme, resim, link, başka bir liste vs. ekleyebilirsiniz.

Definition List <dl>
Definition (tanımlı) list, bir sıralama listesi değildir. Bu biçimdeki liste, terimler ve bu terimlerin açıklamalarının tanımlandığı listedir. Tanımlı listeler <dl> tagi ile, her bir terim <dt> tagi ile, her bir terim açıklaması ise <dd> tagi ile başlar. Tanımlı liste örneğimiz ve browserda görüntülenme şekli:

<dl>
   <dt>Yemek</dt>
      <dd>Peynir</dd>
      <dd>Ekmek</dd>
   <dt>İçecek</dt>
      <dd>Süt</dd>
      <dd>Su</dd>
</dl>

Yukarıdaki kodlar browserda aşağıdaki gibi gözükecektir:

Yemek

Peynir

Ekmek

İçecek

Süt

Su

Herhangi bir terim açıklaması (<dd> tagi) içerisine içine paragraf, satır kesme, resim, link, başka bir liste vs. ekleyebilirsiniz.

Bunların yanında kullanılmayan (karşı çıkılan) 2 adet daha liste biçimi vardır. Bunlar <dir> ve <menu> etiketleridir. Bunların yerine <ul> kullanılmaktadır.

Bir dersin daha sonuna geldik, kısa mı sürdü ne? 6. derste görüşürüz.

• Bu başlık ile ilgili diğer yazılar:

• HTML Tags-1 Temel kodlar
• HTML Tags-2 Links
• HTML Tags-3 Frames
• HTML Tags-4 Tables
• SWF Object - Valid Flash