Merhaba.

HTML eğitimlerimize listeleme etiketleri ile devam ediyoruz.

Bir word belgesi düzenlediğimizi varsayarsak pek çok konuda listeler oluşturma gereksinimi duyarız. Aynı durum bir site yaparken de mevcut olabiliyor. Bir alışveriş listesi sitesi oluşturabiliriz ya da bir to do list sayfası. Bunun gibi pek çok durum için listeler oluşturulabilir.

Sırasız Listeler Oluşturma

Sırasız bir liste tanımı <ul> </ul> etiketleriyle başlar.

Daha sonra liste içine yazmak istediğimiz her bir satır için <li></li> etiketleri ile tanımlanır.

Basit bir Alışveriş Listesi oluşturalım.  

WebMatrix’i açalım. Kodlamaya başlayalım.

Tanımsız sırasız bir listenin liste elemanlarını belirtmek için 4 farklı yöntem kullanabiliriz.

Değer Açıklama
disc İçi dolu bir daire oluşturur. Default değeri de budur.
circle İçi boş bir çember oluşturur.
square İçi dolu bir kare oluşturur.
none Hiç bir liste işareti olmasın istiyorsak kullanabiliriz.

Kullanımı

<ul style=”list-style-type:disc”> </ul> şeklindedir.

Bunu gerçekleştirelim.

Diğer değerleri deneyebilirsiniz.

Sıralı Listeler Oluşturma

Sıralı bir liste oluşturmak için 

<ol> </ol> etiketlerini kullanırız.

Yine sırasız listeler oluşturmak için kullandığımız <li> etiketi liste değerlerini oluştururken kullanılır.

Bunu gerçekleştirelim.

Sıralı listenin değişik değerleri olabilir.

Tip Açıklama
type=”1″ Sıra Numaralı Liste Oluşturur.
type=”A” Başlangıç Değerinden İtibaren Büyük Harfli Sıralı Listeler Oluşturur.
type=”a” Başlangıç Değerinden İtibaren Küçük Harfli Sıralı Listeler Oluşturur.
type=”I” Roman rakamlarıyla bir sıralı liste oluşturur. Büyük Harfli olarak.
type=”i” Roman rakamlarıyla bir sıralı liste oluşturur. Küçük Harfli olarak.

Diğer değerleri kendiniz test edebilirsiniz.

Açıklama Listeleri Oluşturmak

Girilen her bir liste elemanı için ayrıca bir açıklama ya da özellik girilmesi gereken durumlarda açıklama listelerini kullanmak mantıklı olacaktır.

Bir açıklama listesi oluşturmak için <dl></dl> etiketi kullanılır. 

Yeni bir liste elemanı oluşturmak için <dt></dt> etiketi kullanılır.

Her bir liste elemanının açıklaması içinde <dd></dd> etiketi kullanılır.

Gelin şimdi bunu yapalım.

İç İçe HTML Listeleri Oluşturmak

Şimdiye kadar görmüş olduğumuz tüm listeleme işlemlerini istersek iç içe de rahatlıkla kullanabiliriz.

Bir örneğini görerek olayı anlamaya çalışalım.

Yatay Liste Oluşturma

Şimdi biraz style özellikleri ile oynayarak bir menübar yapalım. Açıklama kısmını CSS eğitimlerimize erteliyorum.

Bugünlük de bu kadardı. Bir sonraki yazımda görüşmek üzere.

Yorumlarınızı eksik etmeyiniz.


muratbilginer