Bu yazıda, daha önce de değindiğim HTML Listelemelerine biraz daha yakından bakacağız. Çoğunlukla kod örneklerini paylaşarak kod – sonuç odaklı ilerleyeceğiz.
Hazırsanız başlayalım 👇
Öncelikle Temelleri Bir Hatırlayalım
Eğer <ol> / <ul> / <li> yapılarını hatırlıyorsanız eğlenceli kısıma atlayabilirsiniz.
Sıralı listelemeler, yani Ordered List için, İngilizce tabirin ilk iki harfini kullanıyoruz.
Yani O – L : <ol>
Bu listeler bir işin hangi sırayla yapılacağının önemli olduğu durumlarda kullanılıyor. Örneğin yemek tarifinde işlermlerin sırasıyla yapılması gibi.
- Malzemeleri Hazırla
- Fırını aç, ısınmaya başlasın
- Yumurtayı Çırp
- Malzemeleri karıştır
gibi..
Bu yapıdaki her bir öğeye de Liste Öğesi (List Item) diyoruz.
Onların da isimlendirmesi aynı şekilde: L – I : <li>
Bu şekilde anlatıyorum, zira öğrencilerimde de gördüğüm bir büyük bela var ki, o da EZBERLEMEK! Ezberlemeden, neyin niçin o şekilde isimlendirildiğinin / kullanıldığının anlaşılması çok önemli.
Ordered List Örneği:
dark
Görüldüğü gibi son derece basit bir HTML yapı var elimizde. <ol> ‘lerin içinde <li> ‘ler bulunuyor.
Tabii bir de SIRASIZ listelemeler (Unordered Lists) var. Yani sıranın önemli olmadığı, yapılacak işler listesi gibi listelemeler. Buradaki isimlendirme de yine aynı mantıkta; ilk 2 harf U – L : <ul>
- Emek al
- Terziye uğra
- Camlar silinecek
- Aidatı yatırmayı unutma
gibi..
Unordered List Örneği:
dark
Temelleri hatırladıktan sonra, sıra geldi eğlenceli kısma!
Sırasız listelerde ille de 1’den başlamak zorunda değiliz.
Bu nerede lazım olur? Örneğin bir makalede sıralı bir liste koymuş ama araya bir açıklama veya detay girmemiz gerekmişse, listeye kaldığımız yerden devam etmek istersek OL içerisinde start="" kullanıyoruz.
Örneğin:
dark
Sayıları 2 haneli şekilde, yani başlarında 0 (sıfır) olacak şekilde listelemek istersek işin içine biraz CSS ekliyoruz. Burada da kullanacağımız kod şöyle list-style-type: decimal-leading-zero Her zaman değil ama hizalı bir listeleme önemli olduğunda hayat kurtarır 😉
Hemen kullanımına bakalım:
dark
Sayılarla sıralıyoruz da HARFLERLE neden sıralayamayalım? Bunun için de type="A" kullanıyoruz.
Görelim:
dark
Pekiyi ya sıralamayı TERSİNE çevirmemiz gerekirse? O da kolay; İngiilizce “tersine çevrilmiş” anlamındaki reversed kelimesini eklememiz yererli.
Bakalım:
dark
Geldik benim en keyif aldığım kısma, yani Liste Öğeleri’ni özelleştirmeye!
Liste öğelerinin başlarında renk, font, SVG, veya görsel ve font ikonlar kullanarak da listelerimizi özelleştirebiliriz. Burada da CSS kodlarından yardım alacağız.
Hemen örneklere göz atalım:
dark