HTML Sırasız Listeler

Sayfa içeriği

Sırasız listeler kavramı

Sırasız bir liste (Unordered list), bir öğenin diğer öğelerden önce görüntülenecek sembol türünü farklı olmadığını, ve bütün öğeleri aynı sembol kullanılacak içindir.

Bu liste türünde her öğenin başında görünecek sembolü belirtebilirsin ve burada görüntüleyebileceğin kare, daire veya disk olmak üzere üç sembol vardır.

Sayfaya sırasız bir liste eklemek

Genel olarak, tarayıcıya sayfada sırasız bir liste görüntülemek istediğimizi bildirmek için <ul> </ul> etiketini kullanıyoruz.
Eklemek istediğimiz herhangi bir öğe <li> </li> etiketinin içine yerleştirilmelidir.

Bilgi: ul, sırasız liste anlamına gelen Unordered List'in kısaltmasıdır ve li, listedeki bir öğe anlamına gelen List Item'in kısaltmasıdır.

Aşağıdaki örnekte, içinde üç öğe bulunan sırasız bir liste ekledim.

<ul>
    <li>html</li>
    <li>css</li>
    <li>java scirpt</li>
</ul>

kod dene

İlk öğelerde görüntülenebilecek simge türleri

Öğelerden önce görünecek karakterlerin türünü belirtmek için <ul> etiketine type özelliği ekleyebilir ve buna değer olarak aşağıdaki değerlerden birini ekleyebilirsin:

square: Her öğenin başında bir kutu göstermek için.
circle: Her öğenin başında bir daire göstermek için.
disc: Her öğenin başında bir disk (yani büyük bir nokta) gösterir ve bu, değeri kendini belirtmemeni durumunda ayarlanan varsayılan değerdir.
none: Her öğenin başında bir simge göstermemek için ekleyebilirsin.

Aşağıdaki örnekte her elemandan önce gelecek sembolün kare olduğunu belirttim.

<ul type="square">
    <li>html</li>
    <li>css</li>
    <li>java script</li>
</ul>

kod dene

Aşağıdaki örnekte her elemandan önce gelecek sembolün daire olduğunu belirttim.

<ul type="circle">
    <li>html</li>
    <li>css</li>
    <li>java script</li>
</ul>

kod dene

Aşağıdaki örnekte her elemandan önce görünecek sembolün bir disk olduğunu belirttim ve tabii ki varsayılan tip olduğu için eklenip eklenmediğini fark etmeyeceksin.

<ul type="disc">
    <li>html</li>
    <li>css</li>
    <li>java script</li>
</ul>

kod dene

Aşağıdaki örnekte, her öğeden önce hiçbir sembolün gösterilmeyeceğini belirttim.

<ul type="none">
    <li>html</li>
    <li>css</li>
    <li>java script</li>
</ul>

kod dene

Listede seçilen bir öğeden önce görünecek simgenin türünü değiştirmek

Listedeki belirli bir öğeden önce görünecek sembolün türünü değiştirmek istiyorsan, öğeye type özelliğini ekleyebilir (yani <li> etiketi için) ve başlamak istediğin türü iletebilirsin.

Aşağıdaki örnekte, yalnızca ikinci öğeden önce görünecek olan sembolün türünü daire şeklinde değiştirdim.

<ul>
    <li>html</li>
    <li type="circle">css</li>
    <li>java script</li>
</ul>

kod dene

Listede bir liste eklemek

Öğeyi özel bir liste eklemek için öğenin altında bir liste ekleyebilirsin.
Hiç bir görünmek istediğin öğenin liste, listeyi öğenin altında eklemelisin.

Bilgi: Bir listeye bir listede yerleştirirken, tarayıcı otomatik olarak farklı simgeleri dahili liste öğelerinin önüne yerleştirecektir.
Dilersen ana listeyi ve iç listeyi öğelerinden önce görünecek sembollerin türünü belirtmek için type özelliğini kullanabileceğini unutma.

Aşağıdaki örnekte iki öğeli bir liste tanımladım ve her öğenin başka bir listesi var.

<ul>
    <!-- İçine koyduğumuz ilk öğe üç öğeden oluşan bir liste-->
    <li>Front-End
        <ul>
            <li>HTML</li>
            <li>HTML</li>
            <li>Javascript</li>
        </ul>
    </li>
    <!-- İçine koyduğumuz ikinci öğe, iki öğeden oluşan bir liste -->
    <li>Back-End
        <ul>
            <li>MySQL</li>
            <li>php</li>
        </ul>
    </li>
</ul>

kod dene

önceki ders sonraki ders