Listeleme işlemi belirli maddelerin alt alta yazılarak sıra,harf veya işaretle belirli bir düzen içerisinde yazılmasına listeleme denir.
Html dilinde listeleme işlemi, web sitemizde bulunan içeriğin düzgün ve anlaşılır bir şekilde görünmesini sağlamak için kullanılmaktadır.
Html dilinde listeleme işlemleri 3 şekildir. Bunlar :
Html dilinde sıralı listeleme, belirli bir düzen içinde artan sayı, harf veya roma rakamları ile oluşturulan listeleme şeklidir.
Sıralı liste oluşturmak için kullanılan etiketler : <ol>... </ol> ve <li>... </li> etiketleridir.
Bilgi: Liste içindeki elemanları oluşturmak için <li> ... </li> etiketi kullanılmaktadır.
<ol>
<li> Madde 1 </li>
<li> Madde 2 </li>
<li> Madde 3 </li>
<li> Madde 4 </li>
<li> Madde 5 </li>
</ol>
Sıralı Listeleme İşleminin nereden başlayacağını belirlemek için type parametresi kullanılmaktadır. Yani bizim sıralama işlemlerimiz rakamla mı , harfle mi, yoksa roma rakamı ile mi başlayacağını type parametresi ile belirlenmektedir.
<ol type="1">
<li> Html Dersleri 1 </li>
<li> Html Dersleri 2 </li>
<li> Html Dersleri 3 </li>
<li> Html Dersleri 4 </li>
<li> Html Dersleri 5 </li>
<li> Html Dersleri 6 </li>
<li> Html Dersleri 7 </li>
<li> Html Dersleri 8 </li>
<li> Html Dersleri 9 </li>
<li> Html Dersleri 10 </li>
</ol>
<ol type="A">
<li> Azkod Ders 1 </li>
<li> Azkod Ders 2 </li>
<li> Azkod Ders 3 </li>
<li> Azkod Ders 4 </li>
<li> Azkod Ders 5 </li>
</ol>
<ol type="a">
<li> Azkod Ders 1 </li>
<li> Azkod Ders 2 </li>
<li> Azkod Ders 3 </li>
<li> Azkod Ders 4 </li>
<li> Azkod Ders 5 </li>
</ol>
<ol type="I">
<li> Html </li>
<li> Css </li>
<li> JavaScript </li>
</ol>
<ol type="i">
<li> Html </li>
<li> Css </li>
<li> JavaScript </li>
</ol>
Bilgi: Sıralamanın belirlediğimiz bir bölümden başlaması için type parametresinin yanında start parametresi de kullanılması gerekmektedir.
<ol type="A" start="2">
<li> Html Dersleri </li>
<li> Css Dersleri </li>
<li> JavaScript Dersleri </li>
</ol>
<ol type="1" start="3">
<li> Html Dersleri </li>
<li> Css Dersleri </li>
<li> JavaScript Dersleri </li>
</ol>
<ol type="I" start="5">
<li> Html Dersleri </li>
<li> Css Dersleri </li>
<li> JavaScript Dersleri </li>
</ol>
Html dilinde sırasız listeleme işlemi maddeleri şekil, simge vb. işaretlerle alt alta yazdırmak için kullanılır. Sırasız listeleme işlemi için <ul> etiketi kullanılmaktadır. Ul etiketi Sırasız Listelemenin ingilizce anlamı olan Unordered List kelimesinin baş harflerinden gelmektedir.
Sıralı liste oluşturmak için kullanılan etiketler : <ul>... </ul> ve <li>... </li> etiketleridir.
Sırasız Listeleme <ul> Etiketi Kullanımı :
<ul>
<li> Madde 1 </li>
<li> Madde 2 </li>
<li> Madde 3 </li>
</ul>
Sırasız listeleme işleminde madde işaretinin değiştirmek için type parametresi kullanılmaktadır. Madde işaretlerini değiştirmek için type parametresinin bazı alt parametreleri bulunmaktadır. Bunlar:
<ul type="circle">
<li> Html Ders 1 </li>
<li> Html Ders 2 </li>
<li> Html Ders 3 </li>
<li> Html Ders 4 </li>
<li> Html Ders 5 </li>
</ul>
<ul type="disc">
<li> AZKOD Ders 1 </li>
<li> AZKOD Ders 2 </li>
<li> AZKOD Ders 3 </li>
</ul>
<ul type="square">
<li> Html Dersleri </li>
<li> Css Dersleri </li>
<li> JavaScript Dersleri </li>
</ul>
Html dilinde İç içe listeleme birden fazla sıralama etiketi kullanılarak oluşturulmaktadır. İç içe listeleme kategori olarak listeleme de denmektedir.
İç içe listeleme yaparken sıralı ve sırasız listeler bir arada kullanılabilmektedir.
Bilgi: İç içe listeleme alt maddeleri olan listeler için kullanılmaktadır.
<ol>
<li> Html </li>
<ul>
<li> Html Alt Madde 1 </li>
<li> Html Alt Madde 2 </li>
<li> Html Alt Madde 3 </li>
</ul>
<li> Css </li>
<ol>
<li> Css Alt Madde 1 </li>
</ol>
<li> Madde 3 </li>
</ol>
<ol>
<li> Html </li>
<ol type="a">
<li> Html nedir </li>
<li> Html nasıl kaydedilir </li>
</ol>
<li> css </li>
<ol type="i">
<li> Css nedir </li>
<li> Css nasıl kaydedilir </li>
</ol>
<li> javascript </li>
<ul type="square">
<li> Javascript nedir </li>
<li> Javascript nasıl kaydedilir </li>
</ul>
</ol>
Önceki Ders: Html Bağlantılar | Sonraki Ders: Html Tablolar |