HTML Sıralı Liste Oluşturma Etiketi

HTML Sıralı Liste Oluşturma Nasıl Yapılır?

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ıralı liste oluşturmayı göreceğiz. Sıralı liste adından da anlaşılacağı gibi oluşturduğu listenin elemanlarını bir sıra takibinde yazar. Sıralı liste <ol> etiketleri arasında yazılır. Listenin başlığı burada belirtildikten sonra <li> etiketi ile listenin elemanları teker teker girilir. HTML’de kullanabileceğimiz sıralama yöntemleri rakamlar, alfabetik harfler ve romen rakamlarıdır. Sıralı listeyi oluşturmak için yazılması gereken HTML etiketi şöyledir.

HTML de yazımı:

<ol> Meyveler <li> Elma </li> <li> Armut </li> <li> Şeftali </li> </ol>

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.

Alfabetik harfler ile listeleme

<ol type=”A”> Meyveler <li> Elma </li> <li> Armut </li> <li> Şeftali </li> </ol>

Meyveler

Rakam kullanarak listeleme

<ol type=”1”> Meyveler <li> Elma </li> <li> Armut </li> <li> Şeftali </li> </ol>

Meyveler

Romen rakamları ile listeleme

<ol type=”I”> Meyveler <li> Elma </li> <li> Armut </li> <li> Şeftali </li> </ol>

Meyveler

Ayrıca sıralı listeler de başlangıç değeri olarak seçilen tipin ilk değeri ile başlama gibi bir zorunluluğumuz yoktur. “start” parametresi ile başlangıç değerini istediğimiz yerden başlatabiliriz. Yapmamız gereken sadece kaçıncı sıradan başlamasını istiyorsak o sayıyı yazmaktır. Örnek olarak;

<ol type=”1” start=”3”> 

Sıralama 3den başlar.

<ol type=”A” start=”3”>

Sıralama C harfinden başlar.

<ol type=”I” start=”3”>     

Sıralama III den başlar.

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ı:

<ol type=”A”> Meyveler
	<li> Yaz Meyveleri
	        <ol type=”1”>
                     <li>Karpuz </li>
                     <li> Kavun </li>
                </ol>
        </li>
       <li> Kış Meyveleri
		<ol type=”1”> 
                      <li> Portakal </li>
                      <li> Mandalina </li>
                </ol> 
       </li>
</ol>

Sitede görünümü:

HTML sıralı liste oluşturma (<ol>) etiketinin kullanım şeklini gördük. 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

Son Eklenen Yazılar