HTML'de Listeler

HTML de liste oluştururken ul, ol ve dl etiketleri kullanılır. Html attribute ile de liste elemanlarının önündeki şekilleri değiştirilir.

HTML Sırasız Liste Oluşturma

Sırasız listemizi oluştururken <ul> etiketini kullanıyoruz. Sırasız olmasından kasıt listedeki elemanların başında 1,2,3.. veya a,b,c.. ve benzeri şeklinde olmamasıdır. Hemen örneklendirelim.

<ul>
  <li>Çay</li>
  <li>Kahve</li>
  <li>Süt</li>
</ul>

Sırasız liste oluştururken varsayılan olarak liste elemanlarının başında madde imi şeklinde yuvarlak bir nokta gelir. Eğer bunu değiştirmek istersek CSS ile ya da <ul> etiketimizin içinde kullanmak üzere bir paramatre ile yapabilriz. Paramtre adımız type=""

disk = madde imi şekline ayarlar (varsayılan).
circle = daire şekline ayarlar.
square = kare şekline ayarlar.
none = herhangi bir şekil olmaz.

Hemen örneklendirelim.

<ul type="square">
  <li>Ayva</li>
  <li>Kavun</li>
  <li>Karpuz</li>
</ul>

Sonuç aşağıda'ki gibidir.

HTML Sıralı Liste Oluşturma

Sıralı listeler <ol> etiketi ile oluşturulmaktadır. 1-2-3 /A-B-C gibi düzenli sıra şeklinde belirtilecek liste türlerinde kullanılır. Hemen örneklendirelim.

<ol>
  <li>Çay</li>
  <li>Kahve</li>
  <li>Su</li>
</ol>

<ol> sıralı listenin standart liste başır 1-2-3 diye gelmektedir.

Bu maddelerin belirme türlerini harflerle, romen rakamlarıyla belirtebiliriz.

type="A" –> Sıralamayı büyük harflerle A’dan başlayarak yapar.
type="a" –> Sıralamayı küçük harfle a’dan başlayarak yapar.
type="I" –> Sıralamayı büyük harflerle romen rakamlarıyla yapar.
type="i" –> Sıralamayı küçük harflerle romen rakamlarıyla yapar

Hemen bir örnek verelim.

<ol type="A">
  <li>Çay</li>
  <li>Kahve</li>
  <li>Su</li>
</ol>

Sıralı ve Sırasız liste örneklerinin tarayıcı çıktısı aşağıda'ki gibidir.

dl, dt ve dd Etiketleri

<dl> etiketi tanım listeleri oluşturmak için kullanılır , İngilizce'de definition list cümlesinin kısaltmasıdır tanım listesi anlamına gelmektedir.

<dt> etiketi tanım listesinin elemanlarını oluşturmak için kullanılır , İngilizce'de definition item cümlesinin kısaltmasıdır.

<dd> etiketi ise tanım liste elemanlarını tanımlar.

Bu kodların hiyerarşi sırası şu şekildedir. <dl> , <dt> , <dd>

Hemen bir örnek verelim.

<dl>
   <dt>Meyve Çeşitleri</dt>
   <dd>Ayva</dd>
   <dd>Elma</dd>
   <dd>Armut</dd>
   <br/>
   <dt>Sebze Türleri</dt>
   <dd>Patlıcan</dd>
   <dd>Kabak</dd>
   <dd>Pırasa</dd>
</dl>

Yukarıdaki kodların tarayıcıdaki çıktısı aşağıdaki gibi olacaktır.

 

Sorular (0)