HTML Dersleri 5: Liste Yapısı (List)

HTML Dersleri 5: Liste Yapısı (List)

Merhabalar,

HTML derslerimize kaldığımız yerden devam ediyoruz. Bu dersimde sizlere HTML liste yapılarını göreceğiz, liste yapılarıyla ilgilili örnek uygulamalar yapacağız.

Bir html web sayfası üzerinde yazıyı, veriyi vb. herhangi bir ögeyi belli şartlara göre listelemek istediğimizde, HTML’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).

HTML Liste Yapısı

Aşağıda kullanacağımız HTML Liste Yapısı etiketlerini listeledim ve bu etiketlerin hangi amaçla kullanılacağını belirttim. Öğrenmek istediğiniz etiket tıklayarak ne amaçla kullanıldığını öğrenebilirsiniz ve örneklere bakarak liste yapısını kavrayabilirsiniz.

[toggle title=”<ul> Etiketi”]Bu etiket sırasız liste oluşturmak için kullanılır.[/toggle] [toggle title=”<ol> Etiketi”]Bu etiket sıralı oluşturmak için kullanılır.[/toggle] [toggle title=”<li> Etiketi”]Liste elemanı görevi görmektedir. Ul ve Ol etiketleri içerisinde kullanılır.[/toggle] [toggle title=”<dl> Etiketi”]Bu etiket açıklama listesi oluşturmak için kullanılır.[/toggle] [toggle title=”<dt> Etiketi”]Bu etiket açıklama listesinin başlığını oluşturmak için kullanılır. (başlık terimi)[/toggle] [toggle title=”<dd> Etiketi”]Bu etiket açıklama listesinde ögenin tanımını (içeriğini) oluşturmak için kullanılır.[/toggle]

HTML Liste Yapısı etiketleri genelikle ve çoğunlukla menü yapımında kullanılıyor ancak bazı durumlarda metinler içerisinde de kullanılabiliyor. Yani, bir olguyu madde madde anlatmak için listeleme özelliğini kullanırız değil mi ? 1.Madde 2.Madde diyerek alt alta sıralı bir şekilde o olguyu açıklayacak maddeler gireriz. Bunu yapabilmezi sağlayan yapı HTML Liste Yapısı dır.

Yukarıda verdiğim listeleme etiketlerini tek tek ele alalım ve birer örnek ile HTML Liste Yapısı nı net anlatmış olalım.

1.Sıralı Listeler (Ordered List)

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:

Bu kısımda dikkat edilmesi gereken kısım type kısmıdır. HTML’de sıralı listeler oluşturken farklı biçimler veya düzen vermek istiyorsak <ol> listeleme etiketini kullanıyoruz ve bu listelemeyi yaparken type değeri vererek istediğimiz şekilde listeletebiliyoruz.

type kısmında yer alan etiketlerin ne anlam ifade ettiğini açıklayayım.

HTML5 Sıralı Liste Yapısı Kullanımı

HTML Liste Yapısı

Yukarıda açıkladığımız type olayı ile ilgili bir örnek yapalım.

Örnek 1:

Bu kodu kullandığımızda HTML sayfamızın bize vereceği ekran çıktısı aşağıda ki gibidir.

HTML Liste Yapısı Kullanımı

HTML

    Sıralı Liste Örneği

2.Sırasız Listeler (Unordered List)

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:

Burada dikkat edilmesi gereken kısım style kısmıdır. Sıralı listelemede olduğu gibi bu listeleme çeşidinde de yine farklı şekillerde listeleme yaptırılabiliyor. Yukarıda ki kodda yer alan square,circle,none gibi stillerin ne olduğunu aşağıda açıkladım.

HTML Sırasız Listeleme  Etiketi Kullanımı

HTML Sırasız Listeleme

    Etiketi Kullanımı

Bununla ilgili bir örnek yaparak sırasız listelemeyi ve bu listelemede kullanabildiğimiz listeleme şekillerini örnek üzerinde gösterelim.

Örnek 2:

Örnek kodu kullandığınız da ekran çıktısı aşağıda ki gibi olacaktır.

HTML Sırasız Listeleme Örneği

HTML Sırasız Listeleme Örneği

3. Açıklama Listeleri (Description List)

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:

Yukarıda ki örneğimizi kullandığınız da ekran çıktısı aşağıda ki gibi olacaktır.

HTML Açıklama Listeleri Örneği

HTML Açıklama Listeleri Örneği

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, esen kalın.

esen-kalin

Bir önceki yazım olan HTML Dersleri 4: Bağlantı (Link) Yapısı başlıklı yazımda HTML'de Mail Bağlantısı Vermek, HTML'de Sayfa İçi Bağlantı Verme ve HTML'de Yazıya Link Vermek hakkında bilgiler verilmektedir.