Listeler, birbirleriyle net bir şekilde ilişkilendirilmeleri ve okunmaları kolay olması için ilgili bilgi parçalarını bir arada gruplandırmak için kullanılır. Modern web geliştirmede listeler, genellikle gezinme(menü) ve genel içerik için kullanılan en önemli öğelerdir.
HTML Listeler, iyi yapılandırılmış, daha erişilebilir, bakımı kolay bir belge oluşturmaya yardımcı oldukları için yapısal açıdan iyidir. CSS stilleri ekleyebileceğiniz özel öğeler sağladıkları için de kullanışlıdırlar. Son olarak, anlamsal olarak doğru listeler, ziyaretçilerin web sitenizi okumasına yardımcı olur ve sayfalarınızın güncellenmesi gerektiğinde bakımı basitleştirir.
HTML Liste Türleri
HTML’de üç liste türü vardır:
- sırasız liste(UL) – belirli bir sıra olmadan bir dizi ilgili öğeyi gruplamak için kullanılır.
- sıralı liste(OL) – bir dizi ilgili öğeyi belirli bir sırayla gruplamak için kullanılır.
- açıklama listesi(DL) – terimler ve tanımlar gibi ad / değer çiftlerini görüntülemek için kullanılır.
Her liste türünün bir web sayfasında belirli bir amacı ve anlamı vardır.
HTML Sırasız Listesi (Unordered List)
Sırasız bir liste <ul> etiketiyle başlar. Her liste öğesi <li> etiketiyle başlar.
Liste öğeleri varsayılan olarak madde işaretleriyle (küçük siyah daireler) işaretlenecektir:
|
1 2 3 4 5 6 7 |
<ul> <li>Kahve</li> <li>Süt</li> <li>Çay</li> </ul> |
Çıktı:
Örnek:
|
1 2 3 4 5 6 7 8 9 10 11 |
<ul> <li>Süt</li> <li>Peynir <ul> <li>Tulum</li> <li>Ezine</li> </ul> </li> </ul> |
Çıktı:
HTML Sıralı Listesi (Ordered List)
Sıralı bir liste <ol> etiketiyle başlar. Her liste öğesi <li> etiketiyle başlar.
Liste öğeleri varsayılan olarak numaralarla işaretlenecektir:
|
1 2 3 4 5 6 7 |
<ol> <li>Kahve</li> <li>Süt</li> <li>Çay</li> </ol> |
Çıktı:
Örnek:
|
1 2 3 4 5 6 7 8 9 10 11 |
<ol> <li>Süt</li> <li>Peynir <ol> <li>Tulum</li> <li>Ezine</li> </ol> </li> </ol> |
Çıktı:
HTML Açıklama Listeleri (Description List)
HTML ayrıca açıklama listelerini de destekler.
Bir açıklama listesi, her terimin açıklamasını içeren bir terim listesidir.
<dl> etiketi açıklama listesini, <dt> etiketi terimi (adı) ve <dd> etiketi her terimi açıklar:
|
1 2 3 4 5 6 7 8 |
<dl> <dt>Kahve</dt> <dd>- Siyah ve sıcaktır</dd> <dt>Süt</dt> <dd>- Beyaz ve soğuktur</dd> </dl> |
Çıktı:
HTML Liste Örnekleri
Örnek 1:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Liste Örnekleri-1</title> </head> <body> <ol> <li> SICAK İÇECEKLER <ol type="I"> <li>ÇAY</li> <li>KAHVE</li> <ol type="a"> <li>TÜRK KAHVESİ</li> <li>NESCAFE</li> </ol> <li>SICAK ÇİKOLATA</li> </ol> </li> <li> SOĞUK İÇECEKLER <ol> <li>MEYVE SULARI <ul> <li>Vişne</li> <li>Şeftali</li> <li>Kayısı</li> <li>Elma</li> </ul> </li> <li> LİMONATA </li> </ol> </li> </ol> </body> </html> |
Örnek 2:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<body> <p> Gerçek <b>tereyağı</b> nasıl anlaşılır?</p> <ol> <li>Oda sıcaklığında tamamen erimez</li> <li>Suyun içinde tek parça halinde çözünür</li> <li>Terayağı rengi sarı yada beyaz olabilir</li> </ol> <p>Ölmeden önce bunları yapmak isterdim.</p> <ul> <li>Ayı ziyatet etmek</li> <li>Maratonda geriye doğru koşmak</li> <li>Bill Gates ile iki el tavla oynamak</li> </ul> </body> |
Örnek 3:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<body> <p> Baştan başlayalım: </p> <ol> <li>Elma</li> <li>Armut</li> <li>Portakal</li> </ol> <p>Şimde tekrar sıralayalım</p> <ol reversed> <li>Elma</li> <li>Armut</li> <li>Portakal</li> </ol> </body> |
Örnek 4:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<body> <p>HTML Dersleri:</p> <ol> <li value="7">Linkler</li> <li>Resimler</li> <li>Listeler <ol type="i"> <li>Açıklama</li> <li>Liste Tanımlama</li> <li>İç İçe Liste Kullanımı</li> </ol> </li> <li>Tablolar</li> </ol> </body> |
Yorum Yap