Listeler

Ders 19/45 · 5 dakika · 2 soru · 1 egzersiz

Bu dersin sonunda sıralı, sırasız ve iç içe listeler yazabileceksiniz.

Sırasız ve sıralı listeler

ul Sırasız liste (unordered list). Maddeler işaretle gösterilir.
ol Sıralı liste (ordered list). Maddeler numaralanır.
li Liste maddesi (list item). İkisinde de kullanılır.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Listeler</title>
</head>
<body>
  <h2>Alışveriş listesi</h2>
  <ul>
    <li>Süt</li>
    <li>Ekmek</li>
    <li>Peynir</li>
  </ul>

  <h2>Çay demleme</h2>
  <ol>
    <li>Suyu kaynatın.</li>
    <li>Çayı demliğe koyun.</li>
    <li>15 dakika bekleyin.</li>
  </ol>
</body>
</html>

Sıra önemliyse ol, önemli değilse ul kullanın.

İç içe listeler

Bir listenin içine başka bir liste yazabilirsiniz. İç liste, bir li etiketinin içine yazılmalıdır.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>İç içe liste</title>
</head>
<body>
  <ul>
    <li>Meyveler
      <ul>
        <li>Elma</li>
        <li>Armut</li>
      </ul>
    </li>
    <li>Sebzeler</li>
  </ul>
</body>
</html>

İçteki ul etiketinin, Meyveler maddesinin </li> etiketinden önce kapandığına dikkat edin.

Sıralı liste nitelikleri

type Numaralandırma türü: 1, a, A, i, I
start Başlangıç numarası
reversed Geriye doğru sayar

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Liste nitelikleri</title>
</head>
<body>
  <ol type="a">
    <li>Birinci seçenek</li>
    <li>İkinci seçenek</li>
  </ol>

  <ol start="5">
    <li>Beşinciden başlar</li>
    <li>Altıncı</li>
  </ol>

  <ol reversed>
    <li>Üçüncü sırada</li>
    <li>İkinci sırada</li>
    <li>Birinci sırada</li>
  </ol>
</body>
</html>

Tanım listeleri

dl etiketi terimleri ve açıklamalarını listeler. dt terimi, dd açıklamayı yazar.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tanım listesi</title>
</head>
<body>
  <dl>
    <dt>HTML</dt>
    <dd>Sayfanın içeriğini ve yapısını belirler.</dd>
    <dt>CSS</dt>
    <dd>Sayfanın görünümünü belirler.</dd>
  </dl>
</body>
</html>

Madde işaretinin şekli

Madde işaretlerini kare veya başka bir şekle çevirmek CSS’in işidir. Eski kodlarda gördüğünüz <ul type="square"> artık geçerli HTML değildir.

Sık yapılan hatalar

ul içine doğrudan metin veya başka bir liste yazmak. ul ve ol etiketlerinin içinde yalnızca li bulunabilir. İç liste li içine yazılır.

li etiketini listenin dışında kullanmak. Her li bir ul veya ol içinde olmalıdır.

Soru 1

Bir yemek tarifinin adımları için hangi liste uygundur?

ol :: Doğru. Adımların sırası önemlidir.
ul :: Sıra önemli olduğunda ol kullanılır.
dl :: dl terim ve açıklamalar içindir.

Soru 2

İç içe bir liste nereye yazılır?

ul etiketinin doğrudan içine :: ul içinde yalnızca li olabilir.
Bir li etiketinin içine :: Doğru.
Listenin dışına :: O zaman iç içe olmaz.

İç içe liste

Hedefteki listeyi yazın. Yalnızca body içine yazılacak kodu yazın. Büyük harf ve boşluk farkları önemli değil.

<ul>
  <li>Diller
    <ol>
      <li>HTML</li>
      <li>CSS</li>
    </ol>
  </li>
  <li>Araçlar</li>
</ul>

Bu derste öğrendikleriniz

Sırasız listeler ul, sıralı listeler ol, maddeler li ile yazılır.
İç içe listeler bir li etiketinin içine yazılır.
dl, dt ve dd terimleri ve açıklamalarını listeler.

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.