HTML'de Listeler
HTML'de listeler sıralı ve sırasız olarak ikiye ayrılıyor. Sırasız listeler <ul>
etiketi içerisinde, sıralı listeler <ol>
etiketi içerisinde yazılır. Ve her liste elemanı <li>
etiketi içerisinde yazılmalıdır.
Şimdi sırasıyla bu liste örneklerini inceleyelim.
Sırasız Liste <ul>
Sırasız liste oluşturmak için <ul>
etiketini kullanacağız. Hemen örneklendirelim;
Bu örneğin çıktısı şöyle olacaktır;
Her liste elemanının başında içi dolu yuvarlak daire var, bunları isterseniz type
niteliği vererek değiştirebilirsiniz. Değer olarak şunları verebilirsiniz;
circle
- içi boş dairedisc
- içi dolu dairesquare
- içi dolu kare
Örnek vermek gerekirse;
Çıktısı şöyle olacaktır;
Sıralı Liste <ol>
Sıralı liste oluşturmak içinde <ol>
etiketi kullanılır. Hemen bir örnek verelim;
Çıktısı ise şöyle olacaktır;
Şimdi farkını daha iyi anladık sanırım. Bunda sayılı bir liste oluşturuyoruz yani sıralı bir liste. Tabi bunun içinde type
niteliği belirleyebiliriz. Bu niteliğin alabileceği değerler ise;
1
- 1'den başlayan sayılıa
- Küçük harfle a'dan başlayan sayılıA
- Büyük harfle A'dan başlayan sayılıi
- Küçük harflerle başlayan romen rakamı sayılıI
- Büyük harflerle başlayan romen rakamı sayılı
Örneklerini görmek isterseniz ise;
Ayrıca sayımın nereden başlayacağını belirlemek için start
niteliğini kullanabilirsiniz. Örneğin;
Bu şekilde 3.den başladığını görebilirsiniz.
İç İçe Liste Kullanımı
Genelde sıkça listeleri iç içe kullanmamız gerekecek. Kullanırken yeni bir liste <li>
etiketi içerisinde yazılır. Örnek verelim;
Bu örneğin çıktısı şöyle olacaktır;
HTML'de Açıklama Listesi
HTML'de aynı zamanda açıklama listeleri oluşturabilirsiniz. Yani bir liste oluşturup her elemanın ne işe yaradığını bu etiketleri kullanarak yapabilirsiniz. Listeyi oluşturmak için <dl>
etiketini, açıklanacak terim için <dt>
etiketi, açıklama için <dd>
etiketi kullanılır. Örnek verelim;
Bu örnek tarayıcıda şöyle gözükecektir;
Liste etiketleri web tasarım yaparken menüleri oluşturmakta kullandığımız etiketlerdir. Şu an bir anlam ifade etmesede CSS derslerinde bunlar anlam ifade etmeye başlayacak, bilginiz olsun ve iyi öğrenin :)