Serdar YILMAZ
Bizimkisi Bir “Bug” Hikayesi...
Serdivan/Sakarya

Etiket 'HTML Liste Oluşturma'

İç İçe Listeler

Kod

<ol>
<li> İttifak Devletleri 
<ul>
<li> Alman İmparatorluğu </li>
<li> Avusturya-Macaristan </li>
<li> Osmanlı İmparatorluğu </li>
<li> Bulgaristan </li>
</ul>
</li>
<li> İtilaf Devletleri <br/>
<ul>
<li> Fransa </li>
<li> Britanya İmparatorluğu </li>
<li> Rusya </li>
<li> İtalya </li>
<li> ABD </li>
<li> Romanya </li>
<li> Yunanistan </li>
</ul>
</li>
</ol>

Açıklama

  1. Listeler başlığı altında öğrenmiş olduğumuz liste türlerini içi içe kullanabiliriz.
  2. Yukarıda yer alan örnek kod incelenecek olursa; <ol> etiketi ile sıralı bir liste oluşturmuş ve bu listenin elemanlarının altına sırasız bir liste oluşturularak başka elemanlar eklenmiştir.

Tanımlı Listeler

Kod

<dl>                                                                                    
<dt> İttifak Devletleri </dt>                           
<dd> Osmanlı İmparatorluğu </dd>                                                                 
<dd> Bulgaristan </dd>        
<dd> Alman İmparatorluğu </dd>   
<dd> Avusturya-Macaristan </dd>   
<dt> İtilaf Devletleri </dt>
<dd> Fransa </dd>
<dd> Britanya İmparatorluğu </dd>
<dd> Rusya </dd>
<dd> İtalya </dd>
<dd> ABD </dd>
<dd> Romanya </dd>
<dd> Sırbistan </dd>
<dd> Yunanistan </dd>	
</dl>

Açıklama

  1. Tanımlı listeler; başlık ve o başlıkların altında yer alan içeriklerden oluşur.
  2. <dt> … </dt> etiketi ile başlıklar, <dd> … </dd> etiketi ile de başlıklara ait içerikler belirtilmektedir.

Sırasız Listeler

Kod

<ul type="square">
<li> HTML </li>
<li> CSS </li> 
<li> JavaScript </li>
<li> jQuery </li>
</ul>

Açıklama

  1. Sırasız listeler oluşturmak için <ul> etiketi kullanılır ve eklenecek her liste elemanı <li> … </li> etiketi içerisine yazılır.
  2. type özelliği ile liste elemanlarının madde işaretini belirtiyoruz.
    type=”disc”  (İçi dolu daire) || type=”circle”  (İçi boş çember) || type=”square”  (Kare)

Sıralı Listeler

Kod

<ol type="1" start="10">
<li> HTML </li>
<li> CSS </li> 
<li> JavaScript </li>
<li> jQuery </li>
</ol>

Açıklama

  1. Sıralı listeler oluşturmak için <ol> etiketi kullanılır ve eklenecek her liste elemanı <li> … </li> etiketi içerisine yazılır.
  2. type özelliği ile sıralamanın ne şekilde yapılacağını belirtiyoruz.
    type=”1″   (Sayısal sıralama)
    type=”A”  (Büyük harflerle sıralama)
    type=”a”   (Küçük harflerle sıralama)
    type=”I”    (Büyük harflerle gösterilen roma rakamlarıyla sıralama)
    type=”i”    (Küçük harflerle gösterilen roma rakamlarıyla sıralama)
  3. start özelliği ile sıralamaya kaçtan başlanacağını belirtiyoruz.  start=”10″ dediğimiz taktirde sıralamaya 10’dan başlanacaktır.