HTML Sırasız Liste Oluşturma Etiketi Nedir ve
Html Sırasız Liste Oluşturma
HTML içinde liste oluşturmanın iki yöntemi vardır. Biri sıralı liste (ordered list), diğeri sırasız liste (unordered list)’dir. Bu yazımızda sırasız liste oluşturmayı göreceğiz. Sırasız liste adından da anlaşılacağı gibi oluşturduğu listenin elemanlarını bir sıra dahilinde yazmaz. Sırasız liste <ul> etiketleri arasında yazılır. Listenin başlığı burada belirtildikten sonra <li> etiketi ile listenin elemanları teker teker girilir. HTML’de sırasız listeleme için kullanabileceğimiz şekiller kare, içi dolu yuvarlak ve içi boş yuvarlaktır. Sırasız listeyi oluşturmak için yazılması gereken HTML etiketi şöyledir.
HTML de yazımı:
<ul> Meyveler <li> Elma </li> <li> Armut </li> <li> Şeftali </li> </ul>
Yukarıda ki örnekte sıralama tipi belirtilmedi. Şimdi 3 farklı sıralama tipini tek tek yazarak nasıl göründüklerini görelim.
Kare şeklini kullanarak listeleme
HTML de yazımı:
<ul type=”square”> Meyveler <li> Elma </li> <li> Armut </li> <li> Şeftali </li> </ul>
İçi dolu yuvarlak kullanarak listeleme
HTML de yazımı:
<ul type=”disc”> Meyveler <li> Elma </li> <li> Armut </li> <li> Şeftali </li> </ul>
İçi boş yuvarlak kullanarak listeleme
HTML de yazımı:
<ul type=”circle”> Meyveler <li> Elma </li> <li> Armut </li> <li> Şeftali </li> </ul>
Ayrıca istediğimiz listeyi iç içe kullanarak çoklu bir liste de oluşturabiliriz. Burada dikkat edilmesi gerek kural etiketlerin doğru yerlerde açılıp kapatılmasıdır. Örnek olarak;
HTML de yazımı:
<ul type=”square”> Meyveler <li> Yaz Meyveleri <ul type=”circle”><li>Karpuz </li> <li> Kavun </li> </ul> </li> <li> Kış Meyveleri <ul type=”circle”> <li> Portakal </li> <li> Mandalina </li> </ul> </li> </ul>
HTML sırasız liste oluşturma (<ul>) etiketinin kullanım şeklini gördük. Bu konu ile ilgili soru, görüş ve önerilerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. Aşağıdaki linke tıklayarak HTML ile ilgili diğer yazılarımıza da ulaşabilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter linklerine tıklayarak bizleri Instagram ve Twitter üzerinden de takip ederek destek olabilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/html/
Sosyal Medya Hesaplarımız
