HTML Liste Oluşturma
HTML de liste oluşturmak için sıralı ve sırasız olmak üzere iki adet liste etiketi bulunmaktadır. Bunlar <ol> ve <ul> etiketleridir. Bunlara ek olarak açıklama listeleri olarak kullanılan listelerde <dl> etiketi kullanılır. <ul> etiketinden başlayacak olursak:
Sırasız liste yapmak için kullanılır. Her öğe <li> etiketi içinde yazılır. Şimdi bir örnekle inceleyelim.
<html> <head></head> <body> <ul> <li>İstanbul</li> <li>Düzce</li> <li>Ordu</li> </ul> </body> </html>
Liste elemanlarının başındaki siyah yuvarlak default olarak geldi. Bu işareti değiştirebiliriz. Değiştirmek için style=”list-style-type:” stili kullanılır. Tip olarak 4 tip kullanım vardır.
- none: Başında hiçbir şey olmaması
- circle: Başında içi boş küre olması
- square: Başında içi dolu kare olması
- disc: Başında içi dolu küre olması
<html> <head></head> <body> <ul style="list-style-type:circle;"> <li>İstanbul</li> <li>Düzce</li> <li>Ordu</li> </ul> <ul style="list-style-type:square;"> <li>İstanbul</li> <li>Düzce</li> <li>Ordu</li> </ul> </body> </html>
Şimdi sıralı olan <ol> etiketini inceleyelim. Sıralı dememin sebebi verdiğimiz ilk değerden sonra arta arta gitmesidir. Her liste öğesi <li> etiketi içine yazılır. Şimdi bir örnekle daha anlaşılır hale getirelim.
<html> <head></head> <body> <ol> <li>İstanbul</li> <li>Düzce</li> <li>Ordu</li> </ol> </body> </html>
Liste elemanlarının başındaki sayılar default olarak geldi. Bu sayıları değiştirebiliriz. Değiştirmek için type=”” niteliği kullanılır.
- 1: 1’den başlayıp artan sayılar
- A: Büyük harfle artan alfabe
- a: Küçük harfle artan alfabe
- I: Büyük harfle artan roma rakamları
- i: Küçük harfle artan roma rakamları
<html> <head></head> <body> <ol type="I"> <li>İstanbul</li> <li>Düzce</li> <li>Ordu</li> </ol> <ol type="a"> <li>İstanbul</li> <li>Düzce</li> <li>Ordu</li> </ol> </body> </html>
Açıklama listelerinde <dl> etiketi kullanılır. Açıklanacak ifade <dt> etiketi içine yazılır. Açıklama <dd> etiketi içine yazılır.
<html> <head></head> <body> <dl> <dt>İstanbul</dt> <dd>Türkiyenin En kalabalık Şehridir.</dd> <dt>Ankara</dt> <dd>Türkiyenin başkentidir.</dd> </dl> </body> </html>
Buna ek olarak son olarak listeleri iç içede kullanabilirsiniz. Kafanızda soru işareti kalmaması için bununla ilgili de bir örnek yaparak konumuzu tamamlayalım.
<html> <head></head> <body> <ul> <li>Sanat</li> <li>Spor <ol type="i"> <li>Futbol</li> <li>Basketbol</li> <li>Voleybol</li> </ol> </li> <li>Eğlence</li> <li>Yaşam</li> </ul> </body> </html>
