Bu yazımızda Html Listeleme Etiketleri nelerdir? Html Sıralı ve Sırasız listeler nasıl yapılır? bunlardan bahsedeceğim. Html listeleme etiketleri birçok amaç için kullanılıyor. En çok da web sitelerinin menü kısımlarını yaparken kullanıyoruz. Yani o gördüğümüz dikey menüler, yatay menüler, yatay açılır menüler vb.. hepsinin temelini Html listeleme etiketleri ile oluşturuyoruz. Daha sonra Css kodları ile o görünümü kazandırıyoruz.
Html listelerini hangi Css özellikleri ile kullandığımızı öğrenmek istiyorsanız Css Dersleri 11 – Liste Özellikleri ve Kullanımı yazımı okuyabilirsiniz.
Html de listeler genel olarak 2’ye ayrılır. Bunlar;
- Sıralı Listeler
- Sırasız Listeler
Şimdi bunları tek tek inceleyelim.
Html Sıralı Liste – ol Etiketi
Sıralı bir liste oluştururken 2 etiket kullanıyoruz. Bunlar;
► ol etiketi : Sıralı liste oluşturmak için kullanılır.
► li etiketi : Listenin herbir elemanını oluşturmak için kullanılır.
⇒ Her bir liste elemanı ( <li> ), bulunduğu satırı tamamen (100%) kaplar. Yani li etiketi bir block etikettir.
En basit haliyle bir sıralı liste şu şekilde oluşturulur.
Html kodları
|
1 2 3 4 5 6 7 |
<ol> <li>Ankara</li> <li>İstanbul</li> <li>İzmir</li> </ol> |
Kodlarımızın tarayıcıdaki görüntüsü
Gördüğünüz gibi varsayılan olarak liste elemanlarının başında rakamlar bulunuyor. İstersek bunları değiştirebiliyoruz.
⇒ ol etiketinin type attribute’una şu değerleri vererek işaretçi türünü değiştirebiliriz.
► 1 : Listeleme sayılar ile yapılır.
► A : Listeleme büyük harfler ile yapılır.
► a : Listeleme küçük harfler ile yapılır.
► I : Listeleme büyük roma rakamları ile yapılır.
► i : Listeleme küçük roma rakamları ile yapılır.
Şimdi bunların herbiri ile ilgili örneklerimize bakalım.
Html kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<ol type="A"> <li>Ankara</li> <li>İstanbul</li> </ol> <ol type="a"> <li>Ankara</li> <li>İstanbul</li> </ol> <ol type="I"> <li>Ankara</li> <li>İstanbul</li> </ol> <ol type="i"> <li>Ankara</li> <li>İstanbul</li> </ol> |
Kodlarımızın tarayıcıdaki görüntüsü
⇒ Varsayılan olarak liste elemanları 1, A, a, I, i den başlar. Örneğin, eğer 1’den değilde başka bir rakamdan başlamasını istiyorsanız, ol etiketinin start attribute’una o değeri vermeniz gerekiyor.
2 değerini verdiğimizi düşünürsek; rakamsa 2’den başlar, harf ise B’den başlar vb..
Kullanımı şu şekilde;
|
1 2 3 4 5 6 7 |
<ol start="8"> <li>Ankara</li> <li>İstanbul</li> <li>İzmir</li> </ol> |
Html Sırasız Liste – ul Etiketi
Sırasız bir liste oluştururken 2 etiket kullanıyoruz. Bunlar;
► ul etiketi : Sırasız liste oluşturmak için kullanılır.
► li etiketi : Listenin herbir elemanını oluşturmak için kullanılır.
⇒ Her bir liste elemanı ( <li> ), bulunduğu satırı tamamen (100%) kaplar. Yani li etiketi bir block etikettir.
En basit haliyle bir sırasız liste şu şekilde oluşturulur.
Html kodları
|
1 2 3 4 5 6 7 |
<ul> <li>Ankara</li> <li>İstanbul</li> <li>İzmir</li> </ul> |
Kodlarımızın tarayıcıdaki görüntüsü
Gördüğünüz gibi varsayılan olarak liste elemanlarının başında içi dolu yuvarlaklar bulunuyor. İstersek bunları değiştirebiliyoruz. Bunun için Css kullanmamız gerekiyor.
⇒ ul etiketinin list-style-type özelliğine şu değerleri vererek işaretçi türünü değiştirebiliriz.
► disc : Listeleme içi dolu yuvarlak ile yapılır.
► circle : Listeleme içi boş yuvarlak ile yapılır.
► square : Listeleme içi dolu kare ile yapılır.
► none : Listelemede işaretçi bulunmaz.
Şimdi bunların herbiri ile ilgili örneklerimize bakalım.
Html kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<ul style="list-style-type:disc"> <li>Ankara</li> <li>İstanbul</li> </ul> <ul style="list-style-type:circle"> <li>Ankara</li> <li>İstanbul</li> </ul> <ul style="list-style-type:square"> <li>Ankara</li> <li>İstanbul</li> </ul> <ul style="list-style-type:none"> <li>Ankara</li> <li>İstanbul</li> </ul> |
Kodlarımızın tarayıcıdaki görüntüsü
⇒ Son olarak Html listeleme etiketleri içerisinde çok kullanılmayan bir liste türünden bahsedelim.
Bu listeleme türünde liste elemanlarına başlık verebiliyoruz. Böyle bir liste oluştururken 3 etiket kullanıyoruz. Bunlar;
► dl etiketi : Liste oluşturmak için kullanılır.
► dt etiketi : Liste elemanlarına başlık vermek için kullanılır.
► dd etiketi : Liste elemanlarını oluşturmak için kullanılır.
En basit haliyle şu şekilde oluşturulur.
Html kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<dl> <dt>Şehirler</dt> <dd>Ankara</dd> <dd>İstanbul</dd> <dd>İzmir</dd> <dt>İlçeler</dt> <dd>Çankaya</dd> <dd>Kadıköy</dd> <dd>Karşıyaka</dd> </dl> |
Kodlarımızın tarayıcıdaki görüntüsü
Gördüğünüz gibi dt etiketi ile yazdıklarımız liste elemanlarının başlığı olmuş oldu.
Html listeleme etiketleri (ul etiketi, ol etiketi, dl etiketi) bu şekilde.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
