HTML5 Liste Kullanımı (Lists)

Bu yazımızın maksadı HTML5’de liste yapısını anlatmak.

Bir web dosyası üzerinde yazıyı, veriyi vb. herhangi bir ögeyi belli şartlara göre listelemek istediğimizde, HTML5’in tasarımcıya sunduğu listeleme etiket ve elementlerini kullanmak durumundayız.

Liste etiketleri 3 ana başlıkta ele alınmaktadır.  Bunlar sıralı liste(ordered list), sırasız liste (unordered list) ve açıklama listesi (description list).

Şimdi bu liste türlerini ayrı ayrı inceleyelim.

1.SIRALI LİSTELER (ORDERED LİST )

Liste elemanlarını kapsayacak şekilde <ol></ol> etiketleri kullanılarak oluşturulur.  Bilinen belirli sıralama ölçülerine göre listeleme yapılmasını mümkün kılar.  Numaralandırarak, harflendirilerek veya bunun dışında herhangi bir sıralı gösterimle listeleme yapılabilir.

Kullanım Şekli:

<ol type="1 | A | a | I | i"> <li>1.liste elemanı</li> <li>2.liste elemanı</li> <li>i.liste elemanı</li> </ol>

gibi bir kullanımı vardır. type’a karşılık gelen her öğe bir listeleme tipini belirler.

Örnek.1:

<h2>'ol (ordered list)' sıralı liste kullanımı</h2> <ol type="1"> <li>Adana</li> <li>Adıyaman</li> <li>Afyonkarahisar</li> <li>Ağrı</li> <li>Amasya</li> <li>Ankara</li> </ol> <ol type="A"> <li>Adana</li> <li>Adıyaman</li> <li>Afyonkarahisar</li> <li>Ağrı</li> <li>Amasya</li> <li>Ankara</li> </ol> <ol type="a"> <li>Adana</li> <li>Adıyaman</li> <li>Afyonkarahisar</li> <li>Ağrı</li> <li>Amasya</li> <li>Ankara</li> </ol> <ol type="I"> <li>Adana</li> <li>Adıyaman</li> <li>Afyonkarahisar</li> <li>Ağrı</li> <li>Amasya</li> <li>Ankara</li> </ol> <ol type="i"> <li>Adana</li> <li>Adıyaman</li> <li>Afyonkarahisar</li> <li>Ağrı</li> <li>Amasya</li> <li>Ankara</li> </ol> <hr />

Kod Görüntüsü:

2.SIRASIZ LİSTELER (UNORDERED LİST)

Liste elemanlarını kapsayacak şekilde <ul></ul> etiketleri kullanılarak oluşturulur. Herhangi bir sıralama ölçüsüne tabi olmadan yapılan listeleme şeklidir. Birbirinden farklı olarak listeleme tipleri vardır.

Kullanım Şekli:

<ul style="list-style-type:disc | square | circle | none"> <li>1.liste elemanı</li> <li>2.liste elemanı</li> <li>i.liste elemanı</li> </ul>

gibi bir kullanımı vardır . style içerisindeki her öğe bir listeleme tipini belirler.

Örnek.2:

<h2>'ul (unordered list)' sırasız liste kullanımı</h2> <ul style="list-style-type:disc"> <li>Avni Babaoğlu</li> <li>Karadeniz Teknik Üniversitesi</li> <li>İstatistik ve Bilgisayar Bilimleri</li> <li>2010-2014</li> </ul> <ul style="list-style-type:circle"> <li>Avni Babaoğlu</li> <li>Karadeniz Teknik Üniversitesi</li> <li>İstatistik ve Bilgisayar Bilimleri</li> <li>2010-2014</li> </ul> <ul style="list-style-type:square"> <li>Avni Babaoğlu</li> <li>Karadeniz Teknik Üniversitesi</li> <li>İstatistik ve Bilgisayar Bilimleri</li> <li>2010-2014</li> </ul> <ul style="list-style-type:none"> <li>Avni Babaoğlu</li> <li>Karadeniz Teknik Üniversitesi</li> <li>İstatistik ve Bilgisayar Bilimleri</li> <li>2010-2014</li> </ul> <hr />

Kod Görüntüsü:

3.AÇIKLAMA LİSTELERİ (DESCRİPTİON LİST)

Liste elemanlarını kapsayacak şekilde <dl></dl> etiketleri kullanılarak oluşturulur. Liste içerisinde tanımlama yapılacağı zaman kullanışlı olan listeleme yöntemidir.

Kullanım Şekli:

<dl> <dt>Açıklama/Tanımlama Başlığı</dt> <dd>~Açıklama İçeriği</dd> <dt>Açıklama/Tanımlama Başlığı</dt> <dd>~Açıklama İçeriği</dd> </dl>

Örnek.3:

<h2>'dl (description list)' açıklama listesi kullanımı</h2> <dl> <dt>kod5.net</dt> <dd>KOD 5 | eğitim, kodlama, paylaşım</dd> <dd>KOD 5 | eğitim, kodlama, paylaşım</dd> <dd>KOD 5 | eğitim, kodlama, paylaşım</dd> </dl>

Kod Görüntüsü:

Tüm bunların yanında anlatımda bahsetmedim lakin ifade etmekte fayda var. Listeleme yaparken tüm liste etiketlerinin birbiri içerisinde kullanılması mümkündür. Geri kalanın tasarımcının kullanım mantığına ve çeşitliliğine kalmıştır.

Bu derste burada nihayete ermiştir.

Bir sonraki yazıda görüşmek üzere.

HTML 5 Müfredatı

1. HTML5 Nedir ?
2. HTM5 – Temel Etiketler ve Özel Karakterler
3. Metin Biçimlendirme(Text Formatting)
4. Bağlantı (Link) Yapısı
5. Tablo (Table) Kullanımı
6. Liste(Lists) Kullanımı
7. Form Nesneleri ve Kullanımı ~ 1
8. Form Nesneleri ve Kullanımı ~ 2
9. Audio Kullanımı
10. Video Kullanımı