HTML'de Listeler

by trustix


Eklenme Tarihi : 17 Aralık 2020 12:29 Views:     357



HTML'de Listeler ve Liste Yapılarının Kurulması

Listeler gerçek hayatta olduğu gib dijital dünyada da yaygın olarak kullanılan bilgi sunma ya da düzenleme biçimleridir. Bir konunun alt başlıkları, bir kategori ya da alt kategori bölümü, birden çok dökümanın sunulması gibi birçok sebeble listeler kullanılabilir.

HTML bilgilerin belirli durumlarda daha anlamlı ve biçimlendirilmiş biçimde sunulması için birtakım liste yapıları hazırlamamıza olanak verir. Bu listeleri de opsiyonel olarak üç farklı şekilde oluşturabiliriz.

1 - Sıralı Liste : Eleman, konu ya da başlıkların belli bir sıra oluşturulduğu liste yapıları

2 - Sırasız Liste: Sıralama olmaksızın eleman, konu ya da başlıkların listelenmesini sağlayan yapılar.

3 - Açıklamalı Liste: Bir kavram listesi ya da açıklamalarını kullanarak oluşturulan liste yapıları.

 

 

HTML'de Sıralı Listeler

HTML'de sıralı liste oluşturmak için kullanılan etiketler sırası ile <ol> ve <li> etiketleridir <li> etiketleri <ol> etiketlerinin içerisinde olmalıdır. Örneğin:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML - Listeler </title>


<style>

</style>

</head>
<body>



<!-- 
    Plaka numaralarına göre illeri tuttuğumuz bir liste
    oluşturmak için ol etiketleri içerisine
    li etiketlerini yazarak sıralı bir liste 
    oluşturuyoruz. Liste sırasını HTML otomatik
    olark 1'den başlayarak sürdürüyor.
 -->

    <ol>
        <li>Adana</li>
        <li>Adıyaman</li>
        <li>Afyon</li>
        <li>Ağrı</li>
        <li>Amasya</li>
        <li>Ankara</li>
        <li>Antalya</li>
    </ol>
    
</body>
</html>

 

 

HTML'de Sırasız Listeler

Sırasız listeler <ul> etiketleri içerisine <li> etiketinin yazılması ile oluşturulur. Örneğin:

 

 

<body>



<!-- 
  ul etiketini ve daha sonra li etiketini
  kullanaarak sırasız bir liste yapısı oluşturabilriz.
 -->

    <ul>
        <li>Python</li>
        <li>Javascript</li>
        <li>HTML</li>
        <li>CSS</li>
    
    </ul>
    
</body>

 

 

HTML'de Açıklamalı Listeler

Açıklamalı listeler bir kavram, terim, konsept ya da başlığın ve buna ilişkin açıklamanın bulundğu liste yapısıdır. Liste yapısı <dl> etiketi ile oluşturulur. Daha sonra her başlık için <dt> ve her açıklama için <dd> etiketi kullanılır. Örneğin:

 

 

<body>



<!-- 
 Açıklamalı liste diğer listelerden farklı olarak
 kavram için bir açıklama için bir etiketin kullanıldığı
 yapıdır. Bu yapılar sırayla kullanılır.
 -->

<dt>
    <dt>Python</dt>
    <dd>Python çok yönlü, yüksek seviyeli, hızlı bir programlama dilidir.</dd>
    <dt>HTML</dt>
    <dd>HTML web sayfaları oluşturmak için kullanılan bir işaretleme dilidir.</dd>
</dt>
    
</body>

 

HTML'de kullanılan üç farklı liste yapısını örnekler üzerinden inceledik.

Herkes İyi Kodlamalar.

 




Önceki İçerik


0

Yorum Formu

vikikod.com    © 2019