HTML Web

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.

 

html5-liste-ogeleri

 

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:

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

 

html5-liste-sıralı

 

Örnek.1:

 

Kod Görüntüsü:

html5-liste-ol-ornek

 

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:

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

 

html5-liste-sırasız

 

Örnek.2:

 

Kod Görüntüsü:

html5-liste-ul-ornek

 

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:

 

Örnek.3:

 

Kod Görüntüsü:

html5-aciklama-listesi-dl

 

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ı
Rize/Ardeşen doğumlu.
Karadeniz Teknik Üniversitesi, İstatistik ve Bilgisayar Bilimleri mezunu.

.NET teknolojileri alanında ihtisas yapma amacında.
İstatistik ve nevi ilimleri sevmekte, fırsat bulduğunda üzerine çalışmayı amaçlamakta.

Basın İlan Kurumunda yazılım geliştirme uzmanı olarak çalışmaktadır.