HTML Listeler - ASLIHAN KARATAŞ

HTML’de liste oluşturmak için <ol> ve <ul> etiketleri kullanılır.

•<ol> Order List anlamına gelir ve sıralı listeler oluşturur.

•<ul> Unordered List anlamına gelir ve sırasız listeler oluşturur.

Liste elemanı oluşturmak için <li> List Item etiketi kullanılır. Her eklenen eleman için bir tane <li> etiketi yazılır.

HTML Listelerinin Temel Kullanım Alanları

Menü yapıları (navigasyon barlar)
Adım adım açıklamalar (talimatlar)
Tanımlar ve açıklamalar
İlgili maddelerin sunulması

1.Sırasız Liste

<html>
<head>
    <title>Sırasız Liste</title>
</head>
<body>
    <h1>Sırasız Liste Örneği</h1>
    <ul>
        <li>Elma</li>
        <li>Muz</li>
        <li>Portakal</li>
    </ul>
</body>
</html>

2. Sıralı Liste

<html>
<head>
    <title>Sıralı Liste</title>
</head>
<body>
    <h1>Sıralı Liste Örneği</h1>
    <ol>
        <li>Elma</li>
        <li>Muz</li>
        <li>Portakal</li>
    </ol>
</body>
</html>

3. Tanım Listesi

Tanım listesi, terimlerin açıklamalarını sunmak için kullanılır. HTML’de tanım listesi oluşturmak için <dl> (description list) etiketi kullanılır. Her bir terim <dt> (description term) etiketi ile, açıklaması ise <dd> (description definition) etiketi ile tanımlanır.

html>
<head>
    <title>Tanım Listesi</title>
</head>
<body>
    <h1>Tanım Listesi Örneği</h1>
    <dl>
        <dt>HTML</dt>
        <dd>Web sayfalarının yapısını oluşturmak için kullanılan bir işaretleme dilidir.</dd>
        
        <dt>CSS</dt>
        <dd>Web sayfalarının görünümünü biçimlendirmek için kullanılan bir stil dilidir.</dd>
        
        <dt>JavaScript</dt>
        <dd>Web sayfalarına etkileşim eklemek için kullanılan bir programlama dilidir.</dd>
    </dl>
</body>
</html>

Liste İçinde Liste

<html>
<head>
    <title>İç İçe Liste</title>
</head>
<body>
    <h1>İç İçe Liste Örneği</h1>
    <ul>
        <li>Meyveler
            <ul>
                <li>Elma</li>
                <li>Muz</li>
                <li>Portakal</li>
            </ul>
        </li>
        <li>Sebzeler
            <ul>
                <li>Havuç</li>
                <li>Brokoli</li>
            </ul>
        </li>
    </ul>
</body>
</html>

Listede Link Vermek

<html>
<head>
    <title>İç İçe Liste ile Link</title>
</head>
<body>
    <h1>Yararlı Kaynaklar</h1>
    <ul>
        <li>Programlama Siteleri
            <ul>
                <li><a href="https://www.python.org" target="_blank">Python</a></li>
                <li><a href="https://www.javascript.com" target="_blank">JavaScript</a></li>
            </ul>
        </li>
        <li>Öğrenim Kaynakları
            <ul>
                <li><a href="https://www.khanacademy.org" target="_blank">Khan Academy</a></li>
                <li><a href="https://www.coursera.org" target="_blank">Coursera</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

Bir cevap yazın Yanıtı iptal et