Listeler

  Liste yapısı tabloları andırmaktadır. Ana etiket diyebileceğimiz <ul> veya <ol>, maddeleri oluşturan <li> etiketlerinden oluşur.
  İki çeşit liste vardır. İlki sıralı liste (ordered list), ikincisi ise sırasız liste (unordered list). İngilizce karşılıklarının baş harflerini işaretledim, listeyi oluştururken 'hangi etiketi kullanıyorduk' diyenler buradan aklında tutabilir.

                                             SIRASIZ LİSTE

  Sırasız liste maddelerden oluşur. Genel yapısı şu şekildedir:

<ul>
<li>Ekmek</li>
<li>Peynir</li>
</ul>

• Ekmek
• Peynir

  <ul> listeyi oluşturmaya yarar, <li> ise maddeleri. Listedeki maddeler paragraf, resim, link gibi çok çeşitli öğeler olabilir. Web sitelerinde gördüğünüz menüler aslında biraz şekil verilmiş (CSS derslerinde göreceğiz) listelerdir.

                                            SIRALI LİSTE

  Maddeler sıralıdır. Bu sıra varsayılan olarak 1,2,3... gibi rakamlarla gösterilir. Liste bu kez <ol> etiketi ile başlayıp biter. Maddeler yine <li> etiketi ile gösterilir.

<ol>
<li>Ekmek</li>
<li>Peynir</li>
</ol>

1. Ekmek
2. Peynir

                                          İÇ İÇE LİSTELER

  Listeler iç içe kullanılabilir. Bu görünüş olarak biraz karışık olsa da bazı yerlerde kullanmanız gerekebilir.

<ul>
<li> Meyveler </li>
    <ul>
        <li> Elma </li>
        <li> Muz </li>
        <li> Armut </li>
    </ul>
<li> Sebzeler </li>
    <ul>
        <li> Patates </li>
        <li> Ispanak </li>
        <li> Ebegümeci </li>
    </ul>
</ul>
 
  Kırmızı ile işaretlediğim liste bizim ana listemiz ve içeriği bizim ana başlıklarımız (Meyveler, Sebzeler). Meyve isimlerinden oluşan listemiz meyveler öğesinin altında. Sebzeler de aynı şekilde yani bir listenin içinde 2 farklı liste kullanıyoruz. İçteki listeler de <ul> ile başlayıp </ul> ile bitmek zorundalar.

                                      LİSTELERİ ÖZELLEŞTİRME

Harfli Liste
<ol type="A"> 
      <li>Elma</li>
      <li>Armut</li>
</ol>

1. Elma
2. Armut

Küçük Harfli Liste
<ol type="a"> 
      <li>Elma</li>
      <li>Armut</li>
</ol>

1. Elma
2. Armut

Roma Rakamlı Liste
<ol type="I"> 
       <li>Elma</li>
       <li>Armut</li>
</ol>

1. Elma
2. Armut

Küçük Roma Rakamlı Liste
<ol type="i"> 
      <li>Elma</li>
      <li>Armut</li>
</ol>

1. Elma
2. Armut