HTML/Listeler

Vikikitap, özgür kütüphane

Sırasız listeler[değiştir]

En basit sırasız liste:

<ul>
<li>Listenin birinci ögesi</li>
<li>Listenin ikinci ögesi</li>
<li>Listenin üçüncü ögesi</li>
</ul>

Sırasız listenin her bir ögesinin başındaki işaret <ul> etiketine eklenen type seçeneği ile belirtilir. Olası seçenekleri:

  • disc (daire) (varsayılan)
  • square (kare)
  • circle (çember)

type seçeneği <li> etiketine de eklenebilir. Bu durumda belirtilen değer sadece o ögeyi etkileyecektir.

Sıralı listeler[değiştir]

En basit sıralı liste:

<ol>
<li>Listenin birinci ögesi</li>
<li>Listenin ikinci ögesi</li>
<li>Listenin üçüncü ögesi</li>
</ol>

Sıralı listenin ögelerinin her birinin nasıl numaralandırılacağı <ol> etiketine eklenen type seçeneği ile belirtilir. type seçeneğinin alabileceği değerler şunlardır:

  • 1
  • A
  • a
  • I
  • i

Sıralı listenin içindeki <li> etiketleri de type seçeneğini ve bu değerleri alabilirler. Bu durumda ilgili numaralandırma tipinden sadece ilgili liste ögesi etkilenecektir.

<ol> etiketine eklenen start seçeneği ile sıralı listenin hangi sayıdan veya kaçıncı sıradaki harften başlayacağını belirtebiliriz. Örnek:

<ol start="5">
<li>Listenin birinci ögesi</li>
<li>Listenin ikinci ögesi</li>
<li>Listenin üçüncü ögesi</li>
</ol>

Çıktısı:

  1. Listenin birinci ögesi
  2. Listenin ikinci ögesi
  3. Listenin üçüncü ögesi

Sıralı listenin içindeki <li> etiketlerine value seçeneğini ekleyebiliriz. value seçeneği ilgili sıralı liste ögesinin başındaki sayının kaç olacağını (veya kaçıncı sıradaki harf olacağını) belirtir. İlgili liste ögesinden sonra devam eden liste ögelerinin başındaki sayı (veya harf) da sıra numarasını değiştirdiğimiz liste ögesini takip edecektir. Örnek:

<ol>
<li>Listenin birinci ögesi</li>
<li value="5">Listenin ikinci ögesi</li>
<li>Listenin üçüncü ögesi</li>
</ol>

Çıktısı:

  1. Listenin birinci ögesi
  2. Listenin ikinci ögesi
  3. Listenin üçüncü ögesi

Tanım listeleri[değiştir]

<dl>
<dt>HTML</dt>
<dd>Bir işaretleme dili</dd>
<dt>XHTML</dt>
<dd>HTML'in daha katı bir formu</dd>
<dt>HTML5</dt>
<dd>HTML'in yeni versiyonu</dd>
</dl>