Anasayfa / Web Tasarım / HTML / HTML Liste Oluşturma Etiketleri (Ders 8)

HTML Liste Oluşturma Etiketleri (Ders 8)

Html yapılarında liste oluşturmak için iki seçenek vardır. Bunlar Sıralı ve Sırasız listelerdir. Listelerimizin içine ekleyeceğimizi elemanları <li> etiketi içerisine ve <li> etiketini de liste etiketlerinin içerisine yerleştiririz. 

Sıralı Liste (Ordered List) <ol>

Sıralı-düzenli liste oluşturmak için <ol> etiketi kullanılır. Bu etiket sıralı-düzenli liste anlamına gelen Ordered List kelimelerinin baş harflerinden oluşmaktadır. Sıralı listelerde sık kullanılan özellikler “Type, Started, Reserved” dir.. Type=”” özelliği ile lisemizin nasıl görüneceğine karar verebiliriz. Örneğin type=”1” dersek listemizi 1’den başlayarak listeleyecektir. Veya type=”A” dersek listemizi A harfinden başlayarak listeleyecektir. Started özelliği listemizin işaretlerinin hangisinden sonra sıralanacağını gösterir. Belirttiğimiz ‘type’ değerine göre farklı değerler alabilir. Reversed özelliği değer almayan bir özelliktir. Liste işaretlerinin artarak değilde azalarak ilerlemesini sağlar. Örneğin 5 elemanlı bir liste oluşturarak type=”1” dersek ve reversed özelliğini eklersek listemiz 5, 4, 3, 2, 1 şeklinde ilerleyecektir. Bu durumda started özelliği kullanılmışsa bile geçersiz sayılacaktır.

Type=”” özelliğinin alabileceği değerler:

  • “A” Alfabetik sıralanmış liste (Büyük harf)
  • “a” Alfabetik sıralanmış liste (Küçük harf)
  • “1” Sayısal sıralanmış liste (1,2,3,4,…)
  • “I” (Büyük ı harfi) Romen rakamlarına göre sıralanmış liste (I, II, III, IV,…)
  • “i” Romen rakamlarına göre sıralanmış liste (i, ii, iii, iv,…)

Sırasız Liste (Unordered List) <ul>

Sırasız-düzensiz liste oluşturmak için <ul> etiketi kullanılır. Bu etiket sırasız-düzensiz liste anlamına gelen Unordered List kelimelerinin başharflerinden oluşmaktadır. Type özelliği görünüm belirleme imkanınız vardır. Ancak bu özellik <ol> ile <ul> etiketlerinde farklı değerler almaktadır. Örneğin liste elemanlarının başında bir kare olmasını istiyorsak type=”square” yazmalıyız.

               Type=”” özelliğinin alabileceği değerler:

  • “disc” listeyi içi dolu çember ile gösterir.
  • “circle” listeyi içi boş çember ile gösterir.
  • “square” listeyi içi dolu kare ile gösterir.

Açıklamalı-Başlıklı Tablo Oluşturma <dl>

Liste oluşturmak için genellikle <ol> ve <ul> yapıları kullanılmaktadır. Ancak açıklama-başlık listelerini belirtmek için <dl>, <dt>, <dd> yapıları kullanılır. <dl> ile oluşturulan listelerde liste elemanları bulunmaz. Sıralanan veya sıralanmayan bir içerik yoktur.

<dl>

<ol> ve <ul> etiketlerinin yerine kullanılır. Liste’nin varlığını belirtirir.

<dt>

Listemizdeki ilk katmanını veya başlık kısımlarını oluşturur.

<dd>

İkinci katmanı veya içeriklerin bulunduğu kısımdır.

Şimdi bunları birer örnek ile pekiştirelim…

<p>Öğrenci sırası</p>
<ol type="1" started="1" reversed>
   <li>Yunus</li>
   <li>Furkan</li>
   <li>İsmail</li>
   <li>Yasin</li>
</ol>
<p>Kırtasiye Malzemeleri</p>
<ul type="square">
   <li>Kalem</li>
   <li>Silgi</li>
   <li>Defter</li>
   <li>Kitap</li>
</ul>

Şimdi de bir açıklamalı-başlıklı liste örneği yapalım

<dl>
   <dt>Meyveler</dt> 
      <dd>Elma</dd>
      <dd>Armut</dd>
      <dd>Mandalina</dd>
   <dt>Sebzeler<dt>
      <dd>Biber</dd>
      <dd>Patlıcan</dd>
      <dd>Kabak</dd>
</dl>

Bir sonraki yazımızda görüşmek üzere…

Hakkında Furkan Yağmur

Check Also

web-gemisi

HTML Form Oluşturma 1. Kısım (Ders 9)

Bir web sayfasında formlar ile çalışmak için sadece html dilini bilmek yetmez. Bunun nedenini öğrenmek …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir