HTML'de Listeler

Kategori Eklenecek

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;

HTML'de <ul> Etiketi Örneği

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;

HTML'de <ul> Etiketi type Niteliği Örneği

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;

HTML'de <ol> Etiketi Örneği

Ş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;

HTML'de <ol> Etiketi type Niteliği Örneği

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 İç İçe Liste Örneği

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;

HTML'de Açıklama Listesi Örneği

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 :)