Sırasız Liste Posts

HTML ile Listeler Oluşturmak

Web sayfanızdaki metinleri düzenlemede listeler önemlidir. HTML ile üç farklı tip liste oluşturabilirsiniz:

  • Sırasız liste
  • Sıralı liste
  • Tanım listesi

İlk iki listeyi bu yazıda inceleyeceğiz. Tanım listelerini öğrenmek için o bölüme geçebilirsiniz.

Sıralı ve sırasız listeler tamamen aynı şekilde çalışır. Ancak sırasız listelerde “nokta” gibi elemanlarla maddeler gösterilirken, sıralı listelerde sayılar veya harfler kullanılır.

<ul> etiketi sırasız listeler(unordered list), <ol> etiketi ise sıralı listeler(ordered list) için kullanılır. Her iki listenin içindeki maddeler <li> etiketi içine yazılır.

Sırasız Liste

Aşağıdaki kod ile sırasız liste hazırlayalım.

<!DOCTYPE html>

<html>

<head>
    <title>İlk sayfam.</title>
</head>

<body>
    <h1>Bu benim ilk web sayfam.</h1>

    <h2>Ne için yapılmıştır?</h2>
    <ul>
        <li>HTML öğrenmek için</li>
        <li>Öğrendiklerimi göstermek için</li>
        <li>Bilgisayarımda HTML'in nasıl çalıştığını görmek için</li>
    </ul>

</body>

</html>

İşte sırasız listemizi gerçekleştirdik. Şimdi bir de sıralı liste ekleyelim. Listeler bölümünü aşağıdaki gibi değiştirelim:

<ul>
    <li>HTML öğrenmek için</li>
    <li>Öğrendiklerimi göstermek için
        <ol>
            <li>Patronuma</li>
            <li>Arkadaşlarıma</li>
            <li>Kedime</li>
        </ol>
    </li>
    <li>Bilgisayarımda HTML'in nasıl çalıştığını görmek için</li>
</ul>

İşte sırasız bir liste içinde sıralı listeyi hazırladık.