HTML Sıralamalı Listeler

Sayfa içeriği

Sıralı listeler kavramı

Sıralı bir liste, içine girilen her bir öğenin numarasıyla birlikte bir öğe grubunu görüntülemeyi amaçlar.
Sıralı listelerin en önemli özelliklerinden biri numaralandırmayı istediğin gibi görüntüleyebilmeni, mesela normal sayıları, alfabetik karakterleri, Roman rakamlarını vb. görüntüleyebilmenidir.

Sayfaya sıralı bir liste eklemek

Genel olarak, tarayıcıya sayfada sıralı bir liste görüntülemek istediğimizi bildirmek için <ol> </ol> etiketini kullanılıyor.

İçine eklemek istediğimiz herhangi bir öğe <li> </li> etiketinin içine yerleştirilmelidir.

bilgi : ol, sıralı liste anlamına gelen "Ordered" kelimesinin kısaltmasıdır ve li, listedeki bir öğe anlamına gelen "item" kelimesinin kısaltmasıdır.

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

<ol>
    <li>HTML</li>
    <li>Sıralamalı</li>
    <li>Listeler</li>
</ol>

kod dene

Numaralandırma türleri

Önceki örnekte, sıralı listeye eklediğim her seçeneğin arkasında sayılar olduğunu fark ettin mi?

ben de bunu fark ettim, bunun adı numaralandırma denir.

Listenin numaralandırma türünü istediğin göre başka bir seçeneğe seçebilirsin.

Her elemanın başında görünecek numaralandırma türünü belirtmek için type özelliği <ol> etiketine ekleyebilir ve değer olarak aşağıdaki karakterlerden birini iletebilirsin:

type="A": Her öğeden önce büyük harflerle alfabetik bir numaralandırma gösterir.
type="a": Her öğeden önce küçük harflerle alfabetik bir numaralandırma gösterir.
type="I": Her öğeden önce büyük harflerle roman numaralandırmasını gösterir.
type="i": Her öğeden önce küçük harflerle roman numaralandırmasını gösterir.
type="1": Her öğeden önce normal numaralandırmayı gösterir ve bu, değeri kendini belirtmemiş olmanı durumunda ayarlanan varsayılan değerdir.

Aşağıdaki örnekte, numaralandırma türünü büyük harflerle alfasayısal olarak değiştirdim.

<ol type="A">
    <li>HTML</li>
    <li>Sıralamalı</li>
    <li>listeler</li>
</ol>

kod dene

Aşağıdaki örnekte, numaralandırma türünü küçük harflerle alfasayısal olarak değiştirdim.

<ol type="a">
    <li>HTML</li>
    <li>Sıralamalı</li>
    <li>Listeler</li>
</ol>

kod dene

Aşağıdaki örnekte, numaralandırma türünü büyük harflerle Roman rakamlarıyla değiştirdim.

<ol type="I">
    <li>HTML</li>
    <li>Sıralamalı</li>
    <li>Listeler</li>
</ol>

kod dene

Aşağıdaki örnekte, numaralandırma türünü küçük harflerle Roman rakamlarıyla değiştirdim.

<ol type="i">
    <li>HTML</li>
    <li>Sıralamalı</li>
    <li>Listeler</li>
</ol>

kod dene

Aşağıdaki örnekte, numaralandırma türünün normal bir numaralandırma olduğunu belirttim ve elbette varsayılan numaralandırma türü temelde sayısal olduğu için herhangi bir fark görmeyeceğiz.

<ol type="1">
    <li>HTML</li>
    <li>Sıralamalı</li>
    <li>Listeler</li>
</ol>

kod dene

Numaralandırmanın nerede başlıcağın belirtlemek

okuduğun gibi, numaralandırmanın nerede başlıcağın belirtmek.

Listenin numaralandırmaya hangi numaradan başlayacağını belirtmek istiyorsan, <ol> etiketinin start özelliğini ekleyebilir ve başlamak istediğin numarayı iletebilirsin.

Aşağıdaki örnekte numaralandırmanın 5 ile başlayacağını belirttim.

<ol start="5">
    <li>HTML</li>
    <li>Sıralamalı</li>
    <li>Listeler</li>
</ol>

kod dene

Aşağıdaki örnekte numaralandırmanın 3 rakamı ile başlayacağını ve numaralandırma türünün küçük harf olacağını belirttim.

<ol start="3" type="a">
    <li>HTML</li>
    <li>Sıralamalı</li>
    <li>Listeler</li>
</ol>

kod dene

Mevcut numaralandırmayı kesmek

Numaralandırmanın ulaştığı sayının değerini değiştirmek istiyorsan, listedeki belirli bir elemandan başlayarak, elemana value özelliğini (yani <li> etiketine) ekleyebilir ve istediğin sayıyı iletebilirsin.

Aşağıdaki örnekte, dördüncü elemandaki numaralandırmayı 7 olarak değiştirdim.

<ol>
 <li>html</li>
 <li>css</li>
 <li>java script</li>
 <li value="7">ens</li>
 <li>k-kudo</li>
 <li>k-html</li> 
</ol>

kod dene

Liste rengini seçmek

Aşağıdaki örnekte listenin rengini kırmızı olarak ayarladım.

<ol style="color:  #ff0000;" >
<li>HTML</li>
<li>Sıralamalı</li>
<li>Listeler</li>
</ol>

kod dene

"color" özelliğini ekledikten sonra bir renk kodu ekledim ve buradan istediğin renk için kod alabilirsin.

Not: style özelliği CSS ilgili bir özelliktir.
Ona göre şimdi style özelliği önem vermemilisin.

Liste içinde bir liste eklemek

Liste öğesinin altında görünmesi için listeleri iç içe gösterebilirsin.
Özel bir liste ayarlamak istediğin herhangi bir öğe, öğenin içindeki listeyi bilmelidir.

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

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

kod dene

önceki ders sonraki ders