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;
Birinci Eleman İkinci Eleman Üçünncü Eleman Dördüncü Eleman	Birinci Eleman İkinci Eleman Üçünncü Eleman Dördüncü Eleman
type="i" için;	type="I" için;
Birinci Eleman İkinci Eleman Üçünncü Eleman Dördüncü Eleman	Birinci Eleman İkinci Eleman Üçünncü Eleman 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 >

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

Web Sayfasına Checkbox (Onay Kutucuğu) Koymak

İnternette gezinirken, girdiğiniz web sayfalarının özellikle kullanıcı kayıt formu bölümlerinde; ilgi alanlarınız başlığı altında, ziyaretçilerin eğilimleri ile ilgili hızlı veri toplamaya yarayan onay kutucuklarına rastlamışsınızdır. Bu bölümlerde ziyaretçilere müzik, sinema, gezi, teknoloji gibi sıralı seçenekler sunulur ve ziyaretçi bu seçeneklerin başında bulunan küçük kutucuklara tik işareti koyarak onaylar. Seçilen kutucuklar sitenin sunucusuna bir takım değerler gönderirler ve bu değerler işlenerek veri tabanına kaydedilir. İşte bu bilgileri toplamakla görevli küçük form elemanına "checkbox" onay kutucuğu adı verilir. Web sayfasına checkbox eklemek için HTML sayfasına < input type="checkbox" / > tagını uygun bir yere eklemeniz yeterlidir. Bu tagın görevini yerine getirebilmesi için gerekli birtakım parametrelerin tag içine yazılması gerekir. Bu kadar açıklamadan sonra şimdi de tagımızın nasıl kullanıldığını gösterelim;

< input type="checkbox" name="box1" checked="checked" value="secim1" title="Seç Birini" /> Birinci Seçenek < br/>

< input type="checkbox" name="box2" />İkinci Seçenek < br />

< input type="checkbox" name="box3" />Üçüncü Seçenek < br />

< input type="checkbox" name="box4" /> Dördüncü Seçenek < br />

Birinci Seçenek

İkinci Seçenek

Üçüncü Seçenek

Dördüncü Seçenek


Şimdi de tag içindeki turuncu ile işaretlenmiş olan parametreleri açıklayalım;

name : Onay kutucuğunu isimlendirmek için kullanılır. Web sayfasında birden fazla konuda onay kutucukları kullanılmış olabilir. Bu durumda ziyaretçiden gelen onay verisinin ne ile ilgili olduğunun sunucudaki bilgisayara belirtilmesi ve işlemlerde olası karmaşanın önlenmesi için checkbox'un mutlaka isimlendirilmesi gerekir.

checked : Bazı durumlarda onaylanmış olması şart olan seçeneklerin otomatik olarak onaylı görünmesi için kullanılır.

value : Onay kutucuğunun işlenmek üzere sunucuya göndereceği değeri belirtir.

title : Ziyaretçi fareyi onay kutucuğunun üstüne getirdiğinde beliren bilgilendirme mesajı için kullanılır.