HTML sıralamalı listeler ~ HTML öğrenin: HTML sıralamalı listeler

Sayfa içeriği

Sıralı listeler kavramı
Ordered List, içine girilen her bir öğenin numarasını gösteren bir grup öğeyi görüntülemeyi amaçlamaktadır. Bu listelerin en önemli özelliklerinden biri numaralandırmayı istediğiniz gibi görüntüleyebilmeniz, örneğin normal sayıları, alfabe harflerini, Roma rakamlarını vb. Görüntüleyebilmenizdir.

Sayfada düzenlenen listeleri ekleyin

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

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

Fact: ol, Ordered List'in kısaltmasıdır; bu, sıralı bir liste anlamına gelir ve li, bir liste öğesi anlamına gelen List Item için kısadır.

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

<ol>
    <li>Apple</li>
    <li>Orange</li>
    <li>Mango</li>
</ol>

kod dene

Numaralandırma türleri

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

type="A": Alfasayısal numaralandırmayı her öğeden önce büyük harflerle gösterin.
type="a": Her öğeden önce alfabetik numaralandırmayı küçük harflerle gösterin.
type="I", her öğeden önce büyük harf Roma numaralandırmasını göstermek için.
type="i": Her öğeden önce küçük harfli Roma rakamını gösterin.
Her öğeden önce normal numaralandırmayı göstermek için type="1" Bu, değeri kendiniz belirtmemeniz durumunda yerleştirilecek varsayılan değerdir.

Aşağıdaki örnekte, numaralandırma türünü alfabetik büyük harf olarak değiştirdik.

<ol type="A">
    <li>mai sakurajima</li>
    <li>miku nakano</li>
    <li>kaneki ken</li>
</ol>

kod dene

Aşağıdaki örnekte, numaralandırma türünü alfabetik küçük harfli numaralandırma olarak değiştirdik.

<ol type="a">
    <li>mai sakurajima</li>
    <li>miku chan</li>
    <li>kaneki ken</li>
</ol>

kod dene

Aşağıdaki örnekte, numaralandırma türünü Latin büyük harf olarak değiştirdik.

<ol type="I">
    <li>mai</li>
    <li>sakurajima</li>
    <li>Mai Sakurajima</li>
</ol>

kod dene

Aşağıdaki örnekte, numaralandırma türünü küçük harf Roma numaralandırması olarak değiştirdik.

<ol type="i">
    <li>java</li>
    <li>is other language than</li>
    <li>javascript</li>
</ol>

kod dene

Aşağıdaki örnekte numaralandırma türünün normal numaralandırma olduğunu belirledik ve elbette herhangi bir fark görmeyeceğiz çünkü varsayılan numaralandırma türü temelde sayısaldır.

<ol type="1">
    <li>Java</li>
    <li>javascript"ten</li>
    <li>tamamen farklı bir dildir</li>
</ol>

kod dene

Numaralandırmanın nerede başladığını belirlemek

Herhangi bir sayıdan seçim yapmak isterseniz, liste numaralandırmayı göstermeye başlayacaktır. Start özelliğini <ol> etiketine ekleyebilir ve başlamak istediğiniz numarayı iletebilirsiniz.

Aşağıdaki örnekte numaralandırmanın 5 numaradan başladığını belirttik.

<ol start="5">
    <li>nasılsın?</li>
    <li>çok iyiyim sende nasılsın</li>
    <li>sen iyiysen bende iyim</li>
</ol>

kod dene

Aşağıdaki örnekte numaralandırmanın 3 rakamından başlayacağını ve numaralandırma tipinin küçük harf olacağını belirledik.

<ol start="3" type="a">
    <li>html</li>
    <li>progamlama</li>
    <li>dili değildir</li>
</ol>

kod dene

Mevcut numaralandırmayı kesmek

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

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

<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, içinde olmasını istediğim paragraf rengini seçtim

<ol style="color: #ffa400;" >
<li>html</li>
<li>progamlama</li>
<li>dili değildir</li>
</ol>

kod dene

"color" özelliğini ekledikten sonra bir renk kodu koyuyoruz ve buradan dilediğiniz renk için kod alabilirsiniz ..

Listede bir liste eklemek

Öğenin altında kendi menüsünün görünmesi için menüleri iç içe gösterebilirsiniz.
Özel bir liste oluşturmak istediğiniz herhangi bir öğe, öğenin içindeki listeyi koyacağın.

Aşağıdaki örnekte iki öğe tanımladık 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