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 :)
Tayfun Erbilen
129 g├╝n ├Ânce yazd─▒. Son g├╝ncelleme: 128 g├╝n ├Ânce