Liste Ekleme

HTML'de 2 tür liste ekleme imkanımız var:
  1. Sıralı liste
  2. Sırasız liste
Bu liste türlerini incelemeden önce, her iki listeyi oluşturmamızı sağlayan liste öğesi etiketini öğrenmeliyiz.

Liste Öğesi Etiketi (<li>…</li>)

HTML'de ekleyeceğimiz liste içerisindeki her bir madde için liste öğesi etiketi çifti kullanırız.

<li>…</li>

Bu etiket çifti içerisine ekleyeceğimiz değerler listemizi oluştururlar.

  • Liste öğesi 1
  • Liste öğesi 2
  • Liste öğesi 3

Liste öğesi etiketimizi öğrendiğimize göre liste türlerimizi öğrenebiliriz.


Sıralı Liste Etiketi (<ol>…</ol>)

Sıralı liste eklediğimiz zaman, listemizi oluşturan liste öğelerimiz başlarında sıra numaraları ile birlikte gösterilirler. 

  <ol>
    <li>Liste öğesi 1</li>
    <li>Liste öğesi 2</li>
    <li>Liste öğesi 3</li>
  </ol>

Bu şekilde eklenmiş olan bir sıralı liste ekranda aşağıdaki şekilde görüntülenecektir.

  1. Liste öğesi 1
  2. Liste öğesi 2
  3. Liste öğesi 3

start Niteliği (<ol start="...">…</ol>)

Sıralı listemizin numaralamasını istediğimiz bir değerden bağlamasını sağlayabiliriz. Bunun için start niteliği kullanılır. 

  <ol start="10">
    <li>Liste öğesi 1</li>
    <li>Liste öğesi 2</li>
    <li>Liste öğesi 3</li>
  </ol>

Bu şekilde tanımlanmış bir sıralı liste ekranda aşağıdaki şekilde görüntülenir.

  1. Liste öğesi 1
  2. Liste öğesi 2
  3. Liste öğesi 3

type Niteliği (<ol type="...">…</ol>)

Varsayılan ayar olarak, sıralı liste öğelerinin baş kısmında rakamlar kullanılır. Eğer istersek, rakam yerine küçük harf, büyük harf ya da roma rakamları kullanılmasını sağlayabiliriz. Bunun için type niteliğinden faydalanırız. 

  <ol type="a">
    <li>Liste öğesi 1</li>
    <li>Liste öğesi 2</li>
    <li>Liste öğesi 3</li>
  </ol>

Bu şekilde tanımlanmış bir sıralı liste öğeleri baş taraflarında küçük harfler ile sıralanmış şekilde görüntülenir.

  1. Liste öğesi 1
  2. Liste öğesi 2
  3. Liste öğesi 3

İstersek küçük harfler için de sıralamanın başlamasını istediğimiz harfini belirtebiliriz. Bunun için yine start niteliğinden faydalanırız: 

  <ol type="a" start="3">
    <li>Liste öğesi 1</li>
    <li>Liste öğesi 2</li>
    <li>Liste öğesi 3</li>
  </ol>

Bu şekilde tanımlanmış bir sıralı liste alfabenin 3. harfinden başlayarak sıralanır.

  1. Liste öğesi 1
  2. Liste öğesi 2
  3. Liste öğesi 3

type niteliği için kullanılabilecek değerler şu şekildedir:

1 Varsayılan sıralama şeklidir. type niteliği kullanılmaz ise bu yöntem kullanılarak sıralama yapılır. Rakam kullanılarak sıralanır.
a Küçük harfler kullanılarak alfabetik olarak sıralanır.
A Büyük harfler kullanılarak alfabetik olarak sıralanır.
i Küçük harfler kullanılarak roma rakamları olarak sıralanır.
I Büyük harfler kullanılarak roma rakamları olarak sıralanır.

reversed Niteliği (<ol reversed>…</ol>)

Sıralamanın tersten yapılmasını sağlar. Niteliğe herhangi bir değer atanmaz, tek başına kullanılır. 

  <ol reversed>
    <li>Liste öğesi 1</li>
    <li>Liste öğesi 2</li>
    <li>Liste öğesi 3</li>
  </ol>

Bu şekilde tanımlanan bir liste aşağıdaki gibi tersten sıralanmış şekilde görüntülenir.

  1. Liste öğesi 1
  2. Liste öğesi 2
  3. Liste öğesi 3



Sırasız Liste Etiketi (<ul>…</ul>)

Sıralama gerekmeyen liste türleri için kullanılır. Herbir liste öğesinin baş tarafında aynı şekil gösterilir. 

  <ul>
    <li>Liste öğesi 1</li>
    <li>Liste öğesi 2</li>
    <li>Liste öğesi 3</li>
  </ul>

Bu şekilde eklenmiş olan bir sırasız liste ekranda aşağıdaki şekilde görüntülenecektir.

  • Liste öğesi 1
  • Liste öğesi 2
  • Liste öğesi 3

type Niteliği (<ul type="...">…</ul>)

Sırasız liste öğelerinin baş taraflarında görüntülenecek şekli belirtir. 

  <ul type="square">
    <li>Liste öğesi 1</li>
    <li>Liste öğesi 2</li>
    <li>Liste öğesi 3</li>
  </ul>

Bu şekilde eklenmiş olan bir sırasız liste ekranda aşağıdaki şekilde görüntülenecektir.

  • Liste öğesi 1
  • Liste öğesi 2
  • Liste öğesi 3

type niteliği için kullanılabilecek değerler şu şekildedir:

disc Varsayılan liste öğesi şeklidir. type niteliği kullanılmaz ise bu şekil kullanılarak listeleme yapılır. Şekil olarak içi dolu daire kullanılır.
square Şekil olarak kare kullanılır.
circle Şekil olarak içi boş daire kullanılır.



İç içe Liste Ekleme

Bir liste içerisine başka bir liste eklemek te mümkündür. 

  <ul>
      <li>Liste öğesi 1</li>
      <li>Liste öğesi 2
        <ol>
          <li>İç liste öğesi 1</li>
          <li>İç liste öğesi 2</li>
        </ol>
      </li>
      <li>Liste öğesi 3
        <ul>
          <li>İç liste öğesi 3</li>
          <li>İç liste öğesi 4</li>
        </ul>
      </li>
  </ul>

Bu şekilde eklenen bir liste aşağıdaki şekilde görüntülenir.

  • Liste öğesi 1
  • Liste öğesi 2
    1. İç liste öğesi 1
    2. İç liste öğesi 2
  • Liste öğesi 3
    • İç liste öğesi 3
    • İç liste öğesi 4

Bu sayfada öğrendiğimiz etiket ve niteliklerden oluşan HTML sayfamızın bir örneği aşağıdaki şekildedir: 

    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="keywords" content="HTML,tags,etiketler,liste">
        <title>Liste Ekleme</title>
    </head>
    <body>
        <ol>
            <li>Liste öğesi 1</li>
            <li>Liste öğesi 2</li>
            <li>Liste öğesi 3</li>
        </ol>
        <ol start="10">
            <li>Liste öğesi 1</li>
            <li>Liste öğesi 2</li>
            <li>Liste öğesi 3</li>
        </ol>
        <ol type="a">
            <li>Liste öğesi 1</li>
            <li>Liste öğesi 2</li>
            <li>Liste öğesi 3</li>
        </ol>
        <ol type="a" start="3">
            <li>Liste öğesi 1</li>
            <li>Liste öğesi 2</li>
            <li>Liste öğesi 3</li>
        </ol>
        <ol reversed>
            <li>Liste öğesi 1</li>
            <li>Liste öğesi 2</li>
            <li>Liste öğesi 3</li>
        </ol>
        <ul>
            <li>Liste öğesi 1</li>
            <li>Liste öğesi 2</li>
            <li>Liste öğesi 3</li>
        </ul>
        <ul type="square">
            <li>Liste öğesi 1</li>
            <li>Liste öğesi 2</li>
            <li>Liste öğesi 3</li>
        </ul>
        <ul>
            <li>Liste öğesi 1</li>
            <li>Liste öğesi 2</li>
            <ol>
                <li>İç liste öğesi 1</li>
                <li>İç liste öğesi 2</li>
            </ol>
            <li>Liste öğesi 3</li>
            <ul>
                <li>İç liste öğesi 3</li>
                <li>İç liste öğesi 4</li>
            </ul>
        </ul>
    </body>
</html>

<< Tablo Ekleme <<   >> Yatay Çizgi Ekleme >>

Yorumlar

Yorum Gönder