HTML’de Liste Oluşturma
HTML listeler, web sayfalarında bilgiyi düzenlemek ve okunaklı bir şekilde sunmak için kullanılır. Menü yapılarından yapılacaklar listelerine kadar pek çok alanda karşımıza çıkar. Liste oluşturmak için kullanılan üç temel etiket vardır:
- Sırasız liste (Unordered List):
<ul>
- Sıralı liste (Ordered List):
<ol>
- Tanımlı liste (Definition List):
<dl>
Hangi liste tipi olursa olsun liste içindeki elemanlar “list item” kelimelerinin baş harfleri olan <li>
etiketi ile oluşturulur. Yeni öğrenmeye başlayanlar genellikle <li>
etiketi kullanmayı unutur ve liste doğru çalışmaz, buna dikkat ediniz.
Sırasız Listeleme (Unordered list)
HTML’de sırasız liste, “unordered list” kelimelerinin baş harflerini simgeleyen <ul>
etiketi ile oluşturulur. Bu etiketin adı, İngilizcede “unordered” yani “sırasız” anlamına gelir. Öğeleri madde işaretleri (bullet points) ile görüntüler ve sıralama yapmaz. Örneğin:
<ul>
<li>Elma</li>
<li>Armut</li>
<li>Muz</li>
</ul>
Liste öğe işaretcisi varsayılan olarak tarayıcıdan içi dolu yuvarlak şeklinde yukarıdaki gibidir. Bunu pekala CSS ile list-style-type
özniteliğini kullanarak değiştirebiliriz:
Değer | İşlevi |
---|---|
disc | İçi dolu yuvarlak |
circle | İçi boş yuvarlak |
square | İçi dolu kare |
none | İşaretçi yok |
<ul style="list-style-type:square">
<li>Elma</li>
<li>Armut</li>
<li>Ayva</li>
</ul>
<ul style="list-style-type:circle;">
<li>Çay</li>
<li>Kahve</li>
<li>Süt</li>
</ul>
<ul style="list-style-type:disc">
<li>Elma</li>
<li>Armut</li>
<li>Ayva</li>
</ul>
<ul style="list-style-type:none">
<li>Elma</li>
<li>Armut</li>
<li>Ayva</li>
</ul>
Sıralı Listeleme (Ordered list)
Sıralı liste, “ordered list” kelimelerinin baş harflerini temsil eden <ol>
etiketi ile oluşturulur. Bu liste türü, öğeleri numaralar, harfler veya romen rakamları ile sıralar. Varsayılan olarak sıralı bir liste için rakam kullanmışsanız saymaya 1’den başlar, harf kullanmışsanız A’dan başlar. Eğer belirli bir sayıdan veya harftan saymaya başlamak istiyorsanız start
özniteliğini kullanmanız gerekir:
<ol>
<li>Bilgisayarı açın.</li>
<li>Tarayıcıyı başlatın.</li>
<li>Web sitesine gidin.</li>
</ol>
HTML belgelerinde sıralı liste oluştururken illede sayıların kullanılması gerekmez. Type
özniteliği ile aşağıdaki tabloda belirtilen değişiklikler yapılabilir:
Type | Görev |
---|---|
type=”1″ | Listeleme sayılar ile yapılır |
type=”A” | Listeleme büyük harfler ile yapılır |
type=”a” | Listeleme küçük harfler ile yapılır |
type=”I” | Listeleme büyük roma rakamları ile yapılır |
type=”i” | Listeleme küçük roma rakamları ile yapılır |
<!-- Sayılar ile sıralama -->
<h2>type="1" (Sayılar)</h2>
<ol type="1">
<li>Birinci</li>
<li>İkinci</li>
<li>Üçüncü</li>
</ol>
<!-- Büyük harflerle sıralama -->
<h2>type="A" (Büyük Harfler)</h2>
<ol type="A">
<li>Birinci</li>
<li>İkinci</li>
<li>Üçüncü</li>
</ol>
<!-- Küçük harflerle sıralama -->
<h2>type="a" (Küçük Harfler)</h2>
<ol type="a">
<li>Birinci</li>
<li>İkinci</li>
<li>Üçüncü</li>
</ol>
<!-- Büyük Roma rakamları ile sıralama -->
<h2>type="I" (Büyük Roma Rakamları)</h2>
<ol type="I">
<li>Birinci</li>
<li>İkinci</li>
<li>Üçüncü</li>
</ol>
<!-- Küçük Roma rakamları ile sıralama -->
<h2>type="i" (Küçük Roma Rakamları)</h2>
<ol type="i">
<li>Birinci</li>
<li>İkinci</li>
<li>Üçüncü</li>
</ol>
Tanımlı Liste (Definition list)
Tanım listesi oluşturmak için <dl>
(Description List) etiketi kullanılır. Bu listenin amacı, terimleri ve açıklamalarını bir arada göstermektir. Zaten “description” kelimesi, İngilizcede “tanım” anlamına gelmektedir. Terimleri belirtmek için <dt>
(Definition Term), açıklamaları için <dd>
(Definition Description) etiketleri kullanılır. Bakınız:
<dl>
<dt>HTML</dt>
<dd>Web sayfalarını yapılandırmak için kullanılan işaretleme dilidir.</dd>
<dt>CSS</dt>
<dd>Web sayfalarını biçimlendirmek için kullanılan stil dilidir.</dd>
</dl>
İç İçe Listeler (Nested List)
HTML listelerde bir liste öğesi içinde başka bir liste oluşturabilirsiniz. Buna “iç içe liste” (nested list) denir. Bu yapıyı hem sıralı hem de sırasız listelerde kullanabilirsiniz:
<ul>
<li>Meyveler
<ul>
<li>Elma</li>
<li>Armut</li>
</ul>
</li>
<li>Sebzeler
<ol>
<li>Havuç</li>
<li>Patates</li>
</ol>
</li>
</ul>
HTML Liste Öznitelikleri
HTML’de listeler için kullanılan bazı öznitelikler vardır. Bu öznitelikler, liste türünü, sıralama şeklini ve başlangıç noktasını kontrol etmemize olanak tanır. Bunları maddeler halinde listeledim:
type
- Açıklama: Liste türünü veya sıralama şeklini belirler.
- Kullanıldığı Yerler:
- Sırasız listelerde (
<ul>
) madde işaretlerini özelleştirmek için kullanılır. - Sıralı listelerde (
<ol>
) sıralama türünü belirlemek için kullanılır.
- Sırasız listelerde (
- Değerler:
- Sırasız listeler:
disc
(varsayılan),circle
,square
. - Sıralı listeler:
1
(sayılar),A
(büyük harfler),a
(küçük harfler),I
(büyük Roma rakamları),i
(küçük Roma rakamları).
- Sırasız listeler:
start
- Açıklama: Sıralı listelerde sıralamanın başlangıç noktasını belirler.
- Kullanıldığı Yerler: Sadece sıralı listelerde (
<ol>
). - Değerler: Dilediğiniz bir sayı (örneğin,
start="5"
).
reversed
- Açıklama: Sıralı listeleri ters sırada görüntüler.
- Kullanıldığı Yerler: Sadece sıralı listelerde (
<ol>
). - Değerler: Bir değeri yoktur, öznitelik olarak eklenir.
compact
(Kullanımdan kaldırılmıştır)- Açıklama: Listelerin daha sıkışık görüntülenmesini sağlar.
- Kullanıldığı Yerler: Hem sırasız (
<ul>
) hem de sıralı listelerde (<ol>
). - Değerler: Hiçbir değeri yoktur, modern tarayıcılarda desteklenmez.