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

Etiket 'HTML Listeler'

İç İç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.