Giriş yap

HTML'de Listeler

HTML'de listeler sıralı ve sırasız olarak ikiye ayrılıyor. Sırasız listeler <ul> etiketi içerisinde, sıralı listeler <ol> etiketi içerisinde yazılır. Ve her liste elemanı <li> etiketi içerisinde yazılmalıdır.

Şimdi sırasıyla bu liste örneklerini inceleyelim.

Sırasız Liste <ul>

Sırasız liste oluşturmak için <ul> etiketini kullanacağız. Hemen örneklendirelim;

<ul>
    <li>Çay</li>
    <li>Şeker</li>
    <li>Kaşık</li>
</ul>

Bu örneğin çıktısı şöyle olacaktır;

Her liste elemanının başında içi dolu yuvarlak daire var, bunları isterseniz type niteliği vererek değiştirebilirsiniz. Değer olarak şunları verebilirsiniz;

  • circle - içi boş daire
  • disc - içi dolu daire
  • square - içi dolu kare

Örnek vermek gerekirse;

<ul type="square">
    <li>Çay</li>
    <li>Şeker</li>
    <li>Kaşık</li>
</ul>

Çıktısı şöyle olacaktır;

Sıralı Liste <ol>

Sıralı liste oluşturmak içinde <ol> etiketi kullanılır. Hemen bir örnek verelim;

<ol>
    <li>HTML Nedir?</li>
    <li>HTML'e Başlangıç</li>
    <li>HTML'de Etiketler</li>
</ol>

Çıktısı ise şöyle olacaktır;

Şimdi farkını daha iyi anladık sanırım. Bunda sayılı bir liste oluşturuyoruz yani sıralı bir liste. Tabi bunun içinde type niteliği belirleyebiliriz. Bu niteliğin alabileceği değerler ise;

  • 1 - 1'den başlayan sayılı
  • a - Küçük harfle a'dan başlayan sayılı
  • A - Büyük harfle A'dan başlayan sayılı
  • i - Küçük harflerle başlayan romen rakamı sayılı
  • I - Büyük harflerle başlayan romen rakamı sayılı

Örneklerini görmek isterseniz ise;

Ayrıca sayımın nereden başlayacağını belirlemek için start niteliğini kullanabilirsiniz. Örneğin;

<ol start="3">
    <li>HTML Nedir?</li>
    <li>HTML'e Başlangıç</li>
    <li>HTML'de Etiketler</li>
</ol>

Bu şekilde 3.den başladığını görebilirsiniz.

İç İçe Liste Kullanımı

Genelde sıkça listeleri iç içe kullanmamız gerekecek. Kullanırken yeni bir liste <li> etiketi içerisinde yazılır. Örnek verelim;

<ul>
    <li>HTML</li>
    <li>
        CSS
        <ul>
            <li>SASS</li>
            <li>LESS</li>
        </ul>
    </li>
    <li>
        JavaScript
        <ul>
            <li>
                Client-side
                <ul>
                    <li>jQuery</li>
                    <li>React</li>
                </ul>
            </li>
            <li>
                Server-side
                <ul>
                    <li>Nodejs</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        PHP
        <ul>
            <li>Laravel</li>
            <li>Symfony</li>
        </ul>
    </li>
</ul>

Bu örneğin çıktısı şöyle olacaktır;

HTML'de Açıklama Listesi

HTML'de aynı zamanda açıklama listeleri oluşturabilirsiniz. Yani bir liste oluşturup her elemanın ne işe yaradığını bu etiketleri kullanarak yapabilirsiniz. Listeyi oluşturmak için <dl> etiketini, açıklanacak terim için <dt> etiketi, açıklama için <dd> etiketi kullanılır. Örnek verelim;

<dl>
    <dt>Mustafa Kemal Atatürk</dt>
    <dd>Türkiye Cumhuriyeti'nin kurucusu.</dd>
    <dt>Einstein</dt>
    <dd>Nobel Fizik Ödüllü Yahudi asıllı Alman teorik fizikçi</dd>
</dl>

Bu örnek tarayıcıda şöyle gözükecektir;

DİKKAT
Liste etiketleri web tasarım yaparken menüleri oluşturmakta kullandığımız etiketlerdir. Şu an bir anlam ifade etmesede CSS derslerinde bunlar anlam ifade etmeye başlayacak, bilginiz olsun ve iyi öğrenin :)
tayfunerbilen
459 gün önce yazdı.
Günlük Film Tavsiyesi