HTML LİSTELER

HTML sayfalarında farklı biçimlerde liste yapılabilir. HTML dilinde değişik liste seçenekleri bulunmaktadır. Bunlar:

Numaralı veya sıralı listeler (satır başlarında sıralı numaraları vardır)

İşaretli veya sırasız listeler (satır başlarında özel bir karakter vardır)

Numaralı Listeler <ol> etiketi ile başlar ve </ol> etiketi ile biter. Liste maddelerini belirtmek için <li> etiketi kullanılır. Numaralı listelerde web tarayıcısı numaraları otomatik olarak yerleştirir. Listeden bir eleman çıkarıldığında veya listeye yeni bir eleman eklendiğinde, numaralandırma otomatik olarak tekrar yapılır ve düzenli bir şekilde gösterilir. Liste elemanları okunurluğu arttırmak için sağa doğru biraz içeri kaydırılarak yazılır.

HTML:

<ol>

 <li>Muz</li>

 <li>Kiraz</li>

 <li>Portakal</li>

 <li>Elma</li>

</ol>

ÇIKTI:

Numarasız Listeler <ul> etiketi ile başlar ve </ul> etiketi ile biter. Liste maddeleri yine <li> etiketi ile başlar. Okunurluğu artırmak için liste elemanları sağa doğru biraz kaydırılarak yazılır. Numaralı listeden tek farkı liste maddelerinin başında numara yerine özel bir karakter görünmesidir.

HTML:

<ul>

 <li>Muz</li>

 <li>Kiraz</li>

 <li>Portakal</li>

 <li>Elma</li>

</ul>

ÇIKTI:

HTML sayfalarında sıralı yada sırasız listeler oluşturulduğunda tarayıcı bu listedeki maddelerin başındaki karakterleri kendisi belirler, ancak bu karakterler sonradan da belirlenebilir. Bunun için TYPE (tip) özelliği kullanılır. Sırasız listeler için aşağıdaki üç seçenek kullanılabilir.

HTML listeler'de <ul> etiketimizin type özelliğini belirleyelim.

HTML:

<ul type="square"></ul>

<ul type="disc"></ul>

<ul type="circle"></ul>

Sıralı listeler için rakamlar hariç 4 seçenek vardır.

HTML:

<ol type="a"></ol>

<ol type="A"></ol>

<ol type="i"></ol>

<ol type="I"></ol>

HTML listeler'de istediğimiz rakam/harfle başlayacağını (start) belirleyebiliriz.

HTML:

<ol start="2">

 <li>Muz</li>

 <li>Kiraz</li>

 <li>Portakal</li>

 <li>Elma</li>

</ol>

ÇIKTI:

HTML İÇ İÇE LİSTELER

HTML:

<ol>

  <li>İstanbul</li>

  <li>Ankara

    <ul type="disc">

     <li>Ulus</li>

     <li>Çankaya</li>

    </ul>

  </li>

  <li>İzmir</li>

  <li>Eskişehir</li>
  
</ol>

ÇIKTI: