HTML’de sırasız liste oluşturmak için <ul> etiketi kullanılır. Bu etiket madde işaretli bir liste tanımlar.
Sırasız Listeler
Sırasız liste <ul> etiketiyle başlar ve her ögesi <li> etiketiyle gösterilir. Listenin ögeleri varsayılan olarak madde işaretleriyle gösterilir.
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Kahve</li>
<li>Çay</li>
<li>Süt</li>
</ul>
</body>
</html>
Sırasız Listelerde İşaretçi Seçimi
CSS list-style-type özelliği ile liste işaretçisinin stilin tanımlamak ve düzenlemek mümkündür. list-style-type aşağıdaki değerleri alır.
| Değer | Açıklama |
| disc | Varsayılan değerdir. Madde işareti olarak görünür. |
| circle | Liste işaretçisini daire yapar. |
| square | Liste işaretçisini kare yapar. |
| none | Liste işaretçisini tamamen kaldırır. |
<!DOCTYPE html>
<html>
<body>
<ul style="list-style-type:disc;">
<li>Kahve</li>
<li>Çay</li>
<li>Süt</li>
</ul>
<ul style="list-style-type:circle;">
<li>Kahve</li>
<li>Çay</li>
<li>Süt</li>
</ul>
<ul style="list-style-type:square;">
<li>Kahve</li>
<li>Çay</li>
<li>Süt</li>
</ul>
<ul style="list-style-type:none;">
<li>Kahve</li>
<li>Çay</li>
<li>Süt</li>
</ul>
</body>
</html>
HTML İç İçe Listeler
HTML ile iç içe listeler oluşturmak mümkündür.
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Kahve</li>
<li>Çay
<ul>
<li>Siyah çay</li>
<li>Beyaz çay</li>
<li>Yeşil çay</li>
</ul>
</li>
<li>Süt</li>
</ul>
</body>
</html>
Not: Bir liste ögesi (<li>), iç içe listeler, resimler, linkler gibi bir çok html ögesini içerebilir.
CSS Yatay Liste
HTML listelerini CSS ile bir çok farklı şekilde göstermek mümkündür. En çok kullanılan yöntemlerden biri yatay olarak biçimlendirmektir. Bu yatay biçimlendirme bir çok web sitesinde CSS ile birleştirilerek yatay menü oluşturmak için kullanılır.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#anasayfa">Anasayfa</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#iletisim">İletişim</a></li>
<li><a href="#hakkimizda">Hakkımızda</a></li>
</ul>
</body>
</html>
Bölüm Özeti
- Sırasız bir liste oluşturmak için <ul> kullanılır.
- Liste ögesinin işaretçisini tanımlamak için list-style-type kullanılabilir.
- Liste ögesini tanımlamak için <li> kullanılır.
- Listeler iç içe yerleştirilebilir.
- Liste ögeleri başka HTML etiketlerini içermektedir.
- Bir listeyi yatay olarak göstermek için CSS float:left özelliği kullanılabilir.
