Blogdan yazılar

hosting image
blog list image

HTML'de Listeler


HTML'de listeler sıralı ve sırasız olarak ikiye ayrılıyor. Sırasız listeler <ul> etiketi içerisinde, sıralı listeler <ol> etiketi içerisinde yazılır. Ve her liste elemanı <li> etiketi içerisinde yazılmalıdır.


Şimdi sırasıyla bu liste örneklerini inceleyelim.




Sırasız Liste <ul>


Sırasız liste oluşturmak için <ul> etiketini kullanacağız. Hemen örneklendirelim;




<ul>
<li>Çay</li>
<li>Şeker</li>
<li>Kaşık</li>
</ul>

 



Bu örneğin çıktısı şöyle olacaktır;




 

HTML'de <ul> Etiketi Örneği

 




Her liste elemanının başında içi dolu yuvarlak daire var, bunları isterseniz type niteliği vererek değiştirebilirsiniz. Değer olarak şunları verebilirsiniz;



  • circle - içi boş daire

  • disc - içi dolu daire

  • square - içi dolu kare


Örnek vermek gerekirse;




<ul type="square">
<li>Çay</li>
<li>Şeker</li>
<li>Kaşık</li>
</ul>

 



Çıktısı şöyle olacaktır;




 

HTML'de <ul> Etiketi type Niteliği Örneği

 






Sıralı Liste <ol>


Sıralı liste oluşturmak içinde <ol> etiketi kullanılır. Hemen bir örnek verelim;




<ol>
<li>HTML Nedir?</li>
<li>HTML'e Başlangıç</li>
<li>HTML'de Etiketler</li>
</ol>

 



Çıktısı ise şöyle olacaktır;




 

HTML'de <ol> Etiketi Örneği

 




Şimdi farkını daha iyi anladık sanırım. Bunda sayılı bir liste oluşturuyoruz yani sıralı bir liste. Tabi bunun içinde type niteliği belirleyebiliriz. Bu niteliğin alabileceği değerler ise;



  • 1 - 1'den başlayan sayılı

  • a - Küçük harfle a'dan başlayan sayılı

  • A - Büyük harfle A'dan başlayan sayılı

  • i - Küçük harflerle başlayan romen rakamı sayılı

  • I - Büyük harflerle başlayan romen rakamı sayılı


Örneklerini görmek isterseniz ise;




 

HTML'de <ol> Etiketi type Niteliği Örneği

 




Ayrıca sayımın nereden başlayacağını belirlemek için start niteliğini kullanabilirsiniz. Örneğin;




<ol start="3">
<li>HTML Nedir?</li>
<li>HTML'e Başlangıç</li>
<li>HTML'de Etiketler</li>
</ol>

 



Bu şekilde 3.den başladığını görebilirsiniz.




İç İçe Liste Kullanımı


Genelde sıkça listeleri iç içe kullanmamız gerekecek. Kullanırken yeni bir liste <li> etiketi içerisinde yazılır. Örnek verelim;




<ul>
<li>HTML</li>
<li>
CSS
<ul>
<li>SASS</li>
<li>LESS</li>
</ul>
</li>
<li>
JavaScript
<ul>
<li>
Client-side
<ul>
<li>jQuery</li>
<li>React</li>
</ul>
</li>
<li>
Server-side
<ul>
<li>Nodejs</li>
</ul>
</li>
</ul>
</li>
<li>
PHP
<ul>
<li>Laravel</li>
<li>Symfony</li>
</ul>
</li>
</ul>

 



Bu örneğin çıktısı şöyle olacaktır;




 

HTML'de İç İçe Liste Örneği

 






HTML'de Açıklama Listesi


HTML'de aynı zamanda açıklama listeleri oluşturabilirsiniz. Yani bir liste oluşturup her elemanın ne işe yaradığını bu etiketleri kullanarak yapabilirsiniz. Listeyi oluşturmak için <dl> etiketini, açıklanacak terim için <dt> etiketi, açıklama için <dd> etiketi kullanılır. Örnek verelim;




<dl>
<dt>Mustafa Kemal Atatürk</dt>
<dd>Türkiye Cumhuriyeti'nin kurucusu.</dd>
<dt>Einstein</dt>
<dd>Nobel Fizik Ödüllü Yahudi asıllı Alman teorik fizikçi</dd>
</dl>

 



Bu örnek tarayıcıda şöyle gözükecektir;




 

HTML'de Açıklama Listesi Örneği

 





DİKKAT

Liste etiketleri web tasarım yaparken menüleri oluşturmakta kullandığımız etiketlerdir. Şu an bir anlam ifade etmesede CSS derslerinde bunlar anlam ifade etmeye başlayacak, bilginiz olsun ve iyi öğrenin :)

En iyisi için bizimle iletişime geçerek hemen teklif alın

İletişim