Bu yazımızda html liste oluşturma işlemlerni öğreneceğiz. Html de liste oluştururken ul, ol ve dl etiketleri kullanılır. Html attribute ile de liste elemanlarının önündeki şekilleri değiştirilir.
Sırasız Html Liste Oluşturma ( ul Etiketi )
SıraSırasız liste oluştururken <ul> etiketi ile yapıyoruz. Sırasız olmasından kasıt listedeki elemanların başında 1,2,3.. veya a,b,c.. vb. şeklinde olmaması. Örnek kod kısmı:
<!DOCTYPE html>
<html>
<body>
<h2>İçecek Listesi</h2>
<ul>
<li>Çay</li>
<li>Kahve</li>
<li>Süt</li>
</ul>
</body>
</html>Sonucu:
Sırasız liste oluştururken varsayılan olarak liste elemanlarının başında madde imi şeklinde gelir. Eğer bunu değiştirmek istersek CSS ile ya da html attribute ile değişiklik yapabiliriz. Css ile liste elemanlarını düzenlemeyi css derslerimizde yapacağız. Html attribute ile nasıl yapıldığını görelim. Sırasız liste için html attribute:
| Attribute | Oluşan Şekil |
| disk | madde imi şekline ayarlar (varsayılan) |
| circle | daire şekline ayarlar |
| square | kare şekline ayarlar |
| none | herhangi bir şekil olmaz |
Örnek: Html attribute kısmına “circle” yazalım. Kod kısmı:
<!DOCTYPE html>
<html>
<body>
<ul style="list-style-type:circle;"> //buradaki attribute değeri ile
<li>Çay</li>
<li>Kahve</li>
<li>Süt</li>
</ul>
</body>
</html>Sonucu:
Örnek: Html attribute kısmına “square” yazalım. Kod kısmı:
<!DOCTYPE html>
<html>
<body>
<ul style="list-style-type:square;">
<li>Çay</li>
<li>Kahve</li>
<li>Süt</li>
</ul>
</body>
</html>Sonucu:
Örnek: Html attribute kısmına “none” yazalım. Kod kısmı:
<!DOCTYPE html>
<html>
<body>
<ul style="list-style-type:none;">
<li>Çay</li>
<li>Kahve</li>
<li>Süt</li>
</ul>
</body>
</html>Sonucu:
Html Sıralı Liste Oluşturma ( ol Etiketi )
Sıralı listede liste elemanlarının başında 1,2,3.. a,b,c.. vb. değerler bulunur. Varssayılan değer olarak 1,2,3.. şeklinde gelir. Html attribute ile değiştirebiliriz. İki farklı attribute değeri ile değişiklik yapabiliriz. Aşağıdaki tabloda bu değerleri görelim:
| type(Attribute) | style-list-type (Attribute) | Oluşan Şekil |
| a | lower-alpha | Küçük Harfleri Sıra ile |
| A | lower-alpha | Büyük Harfleri Sıra ile |
| i | lower-roman | Roma Rakamı Sıra ile(Küçük) |
| I | upper-roman | Roma Rakamı Sıra ile(Büyük) |
| 1 | decimal | Sayılar sıra ile(1,2,3… gibi) |
| decimal-leading-zero | Sayılar sıra ile(01,02,03..gibi) |
Örnek: type=”a” ve “style-list-type:lower-alpha” degerlerinde aynı sonucu aldığımızı görelim.
<!DOCTYPE html>
<html>
<body>
<ol type="1">
<li>Çay</li>
<li>Kahve</li>
<li>Süt</li>
</ol>
</body>
</html><!DOCTYPE html>
<html>
<body>
<ol style="list-style-type:lower-alpha;">
<li>Çay</li>
<li>Kahve</li>
<li>Süt</li>
</ol>
</body>
</html>Sonucu:
Örnek: type=”A” ve “style-list-type:upper-alpha” degerlerinde aynı sonucu aldığımızı görelim.
<!DOCTYPE html>
<html>
<body>
<ol style="list-style-type:upper-alpha;">
<li>Çay</li>
<li>Kahve</li>
<li>Süt</li>
</ol>
</body>
</html><!DOCTYPE html>
<html>
<body>
<ol type="A">
<li>Çay</li>
<li>Kahve</li>
<li>Süt</li>
</ol>
</body>
</html>Sonucu:
Diger attribute değerlerinde de mantık aynı şekildedir.
İç içe Liste Oluşturma
İç içe liste oluştururken liste etiketlerini iç içe yazarız. Örnek Kod:
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Süt
<ul>
<li>İnek Sütü</li>
<li>Keçi Sütü</li>
</ul>
</li>
<li>Çay
<ul>
<li>Yeşil</li>
<li>Siyah</li>
</ul>
</li>
<li>Kahve
<ul>
<li>Sütlü</li>
<li>Sütsüz</li>
</ul>
</li>
</ul>
</body>
</html>Sonucu:
HTML Açıklama Listeleri ( dl Etiketi )
Açıklama listeleri, her bir terimin açıklamasını içeren bir terimler listesidir. <dl> etiketi ile oluşturulur. Örnek Kod Yazımı:
<!DOCTYPE html>
<html>
<body>
<h2>Açıklama Listesi</h2>
<dl>
<dt>Html</dt>
<dd>- Köprü Metin İşaretleme Dili</dd>
<dt>Css</dt>
<dd>- Basamaklı Stil Sayfası</dd>
</dl>
</body>
</html>Sonucu:
Burada şu soru aklımıza gelebilir; “Bunu sırasız liste ile de yapabilirken neden açıklama listesi diye bir şey var?”. Tarayıcılar etiketlere göre ne olduğunu anlayabildikleri için ayrı etiketle tanımlama gerekiyor. Tarayıcı <dl> etiketini gördüğünde bunun açıklama listesi olduğunu anlıyor.
Başka bir yazımızda görüşmek üzere…
