KATRASA, Serkan AVCI

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

HTML Tags - 5 (Lists)

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.

'04-'09, © Serkan AVCI katrasa.com - birine mi bakmıştın canım? en üstteyim...

Katrasa.com üzerinde bulunan tüm yazılı ve görsel malzemenin telif hakları belirtilen isimlere aittir. İzinsiz kopyalamak, kullanmak, yayınlamak tehlikeli ve yasaktır. Hırsızların kalbi itinayla kırılır, eline verilir.

Zenci Karşı zencilere çarşı!

Blogbox

MAKALELER

HTML Dersleri

BAĞLANTILAR

TAKİP EDİLENLER

KATRASA on ...