html liste nasıl yapılır etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
html liste nasıl yapılır etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

21 Mayıs 2011 Cumartesi

Web Sayfasına Liste Eklemek

Web sayfamda içeriğimi başlıklar halinde görüntülemek istiyorum nasıl yapabilirim? Sitemde içindekiler bölümü oluşturmak istiyorum nasıl yaparım? HTML sayfasında listeleme nasıl yapılır? HTML bir insan olsaydı tüm bu sorulara şu cevabı verirdi:

< ol > < /ol > ve < ul > < /ul > taglarını kullan!!

Peki < ol > ve < ul > tagları ne manaya gelir? Nasıl kullanılır diye sorduğunuzu duyar gibiyim. Lafı uzatmadan açıklayayım da siz de kurtulun ben de!!

< ol > : Ordinary list "sıralı liste" demektir. Tercih ettiğiniz tipe göre liste elemanları 1,2,3 veya a,b,c veya i, ii, iii şeklinde işaretlenerek sıralanırlar.

< ul > : Unordinary list "sırasız liste" demektir. Tercih ettiğniz tipe göre liste elemanları disk, çember ya da kare şeklinde işaretlenerek sıralanırlar.

Her iki liste türünde de sılamak istediğimiz elemanları < li > < /li > taglarının arasına yazarız. Şimdi sıralı liste nasıl yapılır gösterelim:

< ol type="a" >
< li > Birinci Eleman< /li >
< li >İkinci Eleman< /li >
< li >Üçünncü Eleman< /li >
< li >Dördüncü Eleman< /li >
< /ol >

Burada type parametresine a, 1, i, I, A şeklinde değerler verilebilir. Çeşitli Durumlar için listeleme stillerini aşağıda tablo şeklinde gösterdim.

type="a" için;type="1" için;
  1. Birinci Eleman
  2. İkinci Eleman
  3. Üçünncü Eleman
  4. Dördüncü Eleman
  1. Birinci Eleman
  2. İkinci Eleman
  3. Üçünncü Eleman
  4. Dördüncü Eleman
type="i" için; type="I" için;
  1. Birinci Eleman
  2. İkinci Eleman
  3. Üçünncü Eleman
  4. Dördüncü Eleman
  1. Birinci Eleman
  2. İkinci Eleman
  3. Üçünncü Eleman
  4. Dördüncü Eleman

< ul > yani sırasız listenin kullanımı da diğeri gibidir burdaki tek fark type parametresine circle, disc ve square değerlerinin yazılmasıdır. Bu tagın genel yazımını ve kullanııclara sunduğu listeleme stil seçeneklerini aşağıda sıraladım:

< ul >
< li >Birinci Eleman < /li >
< li >İkinci Eleman < /li >
< li >Üçünncü Eleman < /li >
< li >Dördüncü Eleman < /li >
< /ul >

ul_liste

Liste elemanlarının görünümü tarayıcıdan tarayıcıya değişim gösterebilir. Ayrıca kullandığınız metin editörü de bunu etkileyebilir. Mesela ben Blogger'ın editörünü kullanıyorum ve bu editör sırasız listelerde sadece "disc" stiline izin verdiği için diğer stilleri bir resim dosyası olarak göstermek zorunda kaldım. Liste konusu sadece burda yazdıklarımla sınırlı değil. Ayrıca CSS ve javascript kullanarak liste elemanlarının görünümünü büyük ölçüde değiştirebilirsiniz. CSS ve Javascript kullanarak listelerden açılır menüler tasarlanmakta. İsteyenler internette bununla ilgili pek çok kaynak bulabilir. Yakında ben de listelerden menü yapımı ile ilgili bir yazı yazmayı planlıyorum. Şimdilik hepsi bu kadar. Hepinize kolay gelsin.

English Version