HMTL LİSTE ETİKETLERİ ve LİSTE OLUŞTURMA

Html'de listeler , hem tasarımda liste şeklinde belirtmemiz gereken içeriklerde, hemde menüler gibi yapılarda kullanılmaktadır. Ayrıca CSS biçimlendirmeleri ile liste içeriklerin farklı şekillerde görüntülenmeside sağlanabilir.  HTML'de 3 tür liste kullanıyoruz. 

SIRASIZ LİSTE (UL)

Sırasız listeler oluşturulurken  <UL> etiketi ve <LI> etiketleri kullanılır. Ul etiketi , sırasız (düzensiz) anlamına gelen  liste "unordered list" kelimelerinin ilk harflerinden oluşur. Li etiketi ise liste maddesi anlamına gelen "list item" kelimelerinin ilk harflerinden oluşur. 

Sırasız liste oluşturulurken öncelikle <ul> etiketi ile liste başlatılır, liste maddeleri <li> etiketleri ile yazılır ve son olarak ul etiketi kapatılır.  Sırasız listeler başlarına madde işaretleri alırlar. 

	<ul>
		<li> Sabahattin ALİ</li>
		<li> Franz KAFKA </li>
		<li> Dotoyevski </li>
		<li> Ömer Zülfi LİVANELİ</li> 
	</ul> 

Ekran Görüntüsü

TYPE 

HTML'de Sırasız liste oluşturuken 3 farklı madde işareti kullanbiliyoruz. Madde işaretleri ul etiketi içerisinde type parametresi ile belirtilir. Eğer herhangi bir type belirtilmez ise , madde işareti varsayılan olarak yukarıdaki ekran görüntüsünde olduğu gibi  "disc" görünümü alır. 

DISC 

Madde işaretlerinin disc görünümü alması için , ul etiketi içerisine type="disc" parametresi eklenir. Ancak aynı zamanda varsayılan madde işareti olduğu için , type parametresi belirtilmese de disc madde işaretleri oluşacaktır.

	<ul type="disc">
		<li> Sabahattin ALİ</li>
		<li> Franz KAFKA </li>
		<li> Dotoyevski </li>
		<li> Ömer Zülfi LİVANELİ</li> 
	</ul> 

Ekran Görüntüsü

SQUARE

Madde işaretlerinin kare görünümü alması için , ul etiketi içerisine type="square" parametresi eklenir.  

	<ul type="square">
		<li> Sabahattin ALİ</li>
		<li> Franz KAFKA </li>
		<li> Dotoyevski </li>
		<li> Ömer Zülfi LİVANELİ</li> 
	</ul> 

Ekran Görüntüsü

  CIRCLE

Madde işaretlerinin çember görünümü alması için , ul etiketi içerisine type="circle" parametresi eklenir.  

	<ul type="circle">
		<li> Sabahattin ALİ</li>
		<li> Franz KAFKA </li>
		<li> Dotoyevski </li>
		<li> Ömer Zülfi LİVANELİ</li> 
	</ul> 

Ekran Görüntüsü

type="none" parametresi madde işaretlerini kaldırır. 

SIRALI LİSTE (OL)

Sıralı listeler oluşturulurken  <OL> etiketi ve <LI> etiketleri kullanılır. OL etiketi , sıralı (düzen) liste anlamına gelen  "ordered list" kelimelerinin ilk harflerinden oluşur. Li etiketi ise liste maddesi anlamına gelen "list item" kelimelerinin ilk harflerinden oluşur. 

Sıralı liste oluşturulurken öncelikle <ol> etiketi ile liste başlatılır, liste maddeleri <li> etiketleri ile yazılır ve son olarak ol etiketi kapatılır.  Sıralı listeler başlarına sayı yada harf işaretleri alırlar.

<ol type="1">
	<li> Sabahattin ALİ</li>
	<li> Franz KAFKA </li>
	<li> Dotoyevski </li>
	<li> Ömer Zülfi LİVANELİ</li> 
</ol> 

TYPE  

HTML'de Sıralı liste oluştururken, sayı yada harfleri madde  işareti olarak  kullanabiliyoruz. . Madde işaretleri ul etiketinde olduğu gibi  OL etiketi içerisinde  type parametresi ile belirtilir. Eğer herhangi bir type belirtilmez ise , madde işareti varsayılan olarak yukarıdaki ekran görüntüsünde olduğu gibi  sayı (1,2,3,4.....) olacaktır.  Farklı harf yada sayı listeleri için aşağıdaki type değerleri kullanılır.

• Küçük harf sıralı liste için  :   type="a"
• Büyük  harf sıralı liste için  :   type="A"
• Sayılarla  sıralı liste için  :       type="1"   (varsayılan)
• Küçük romen rakamlı sıralı liste için  :   type="i"
• Büyük romen rakamlı sıralı liste için  :   type="I"    

Aşağıda farklı type parametreleri uygulanmış listeleri ve ekran görüntülerini görebilirsiniz.

<ol type="1">
	<li> Sabahattin ALİ</li>
	<li> Franz KAFKA </li>
	<li> Dotoyevski </li>
	<li> Ömer Zülfi LİVANELİ</li> 
</ol> 

<ol type="a">
	<li> Sabahattin ALİ</li>
	<li> Franz KAFKA </li>
	<li> Dotoyevski </li>
	<li> Ömer Zülfi LİVANELİ</li> 
</ol> 

<ol type="A">
	<li> Sabahattin ALİ</li>
	<li> Franz KAFKA </li>
	<li> Dotoyevski </li>
	<li> Ömer Zülfi LİVANELİ</li> 
</ol> 

<ol type="i">
	<li> Sabahattin ALİ</li>
	<li> Franz KAFKA </li>
	<li> Dotoyevski </li>
	<li> Ömer Zülfi LİVANELİ</li> 
</ol> 

<ol type="I">
	<li> Sabahattin ALİ</li>
	<li> Franz KAFKA </li>
	<li> Dotoyevski </li>
	<li> Ömer Zülfi LİVANELİ</li> 
</ol> 

START

Sıralı listelerde listeyi istenilen sayı yada harften başlatmak için start parametresini kullanıyoruz. Örneğin start="3" olarak  belirlediğimizde  , liste sayı ise 3'ten  , harf ise C'den (A=1,B=2,C=3) , romen rakamı ise iii değerinden başlayacaktır.

<ol type="1" start="3">
	<li> Sabahattin ALİ</li>
	<li> Franz KAFKA </li>
	<li> Dotoyevski </li>
	<li> Ömer Zülfi LİVANELİ</li> 
</ol> 

REVERSED 

Sıralı listeleri tersten sıralamak için reversed parametresi kullanılır. Aşağıdaki örnekte OL etiketi içine eklenen reverdes parametresi listenin A,B,C,D değil D,C,B,A şeklinde sıralanmasını sağlar..

<ol type="A" reversed>
	<li> Sabahattin ALİ</li>
	<li> Franz KAFKA </li>
	<li> Dotoyevski </li>
	<li> Ömer Zülfi LİVANELİ</li> 
</ol> 

TANIM (AÇIKLAMA) LİSTESİ (DL)

HTML 5'te tanım listeleri oluşturmak için DL etiketi kullanılır. Tanım  listesi terim (dt) ve açıklamaları (dd) içerir..

<dl>
  <dt>Web Tab. Uyg. Glş.</dt>
      <dd>HTML</dd>
      <dd>CSS</dd>
      <dd>JS</dd>
      <dd>PHP</dd>
  <dt>Grafik ve Canlandırma</dt>
       <dd>Photoshop</dd>
       <dd>After Effects</dd>
</dl>

Görüşmek üzere..