HTML Listeler

HTML Dersleri
HTML Listelerle Çalışmak

Bir HTML belgesinde bir Sırasız liste nasıl oluşturulur ?

<ul> ve <li> etiketleri : Her liste elemanının çember (circle), disk (disc) veya kare (square) tipi madde imi ile gösterildiği sırasız listeler oluşturmamızı sağlar. <ul>'in açılımı "Unordered List" 'tir. "Unordered List" Sırasız Liste anlamına gelmektedir. HTML'de metinlerimizi veya cümlelerimizi maddeler halinde yazmak için <ul> ve <li> etiketlerini kullanırız. Her liste <ul> etiketi ile her liste öğeside <li> etiketi ile başlar. Liste öğeleri genellikle küçük siyah daireler ile işaretlenmiştir.

Sırasız Liste (Unordered List) HTML Örneği :

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>
            Sayfamızın Başlığı Buraya Yazılacak
        </title>
    </head>
    <body>

        <p> Sırasız Liste Örneği : Kırtasiye İhtiyaçları</p>

        <ul>
            <li> Kurşun Kalem </li>
            <li> Silgi </li>
            <li> Kalemtraş</li>
        </ul>

    </body>
</html>

HTML Görünümü :

Sırasız Liste Örneği : Kırtasiye İhtiyaçları

Kurşun Kalem
Silgi
Kalemtraş

Bir HTML belgesinde bir Sıralı liste nasıl oluşturulur ?

<ol> ve <li> etiketleri : Bir sıralı liste <ol> etiketi ile başlar. Her liste öğesi <li> etiketi ile başlar. <ol> etiketi listemizi sıralı yani numaralandırılmış şekilde oluşturmamızı sağlar. <li> etiketi ile eklenen her elemana type özelliği ile belirtilen tipte numaralandırma uygulanır. Varsayılan numaralandırma tipi '1'dir. <ol> etiketinin açılımı "Ordered List"'tir.

Sıralı (Ordered List) HTML Örneği :

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>
            Sayfamızın Başlığı Buraya Yazılacak
        </title>
    </head>
    <body>

        <p> Sıralı Liste Örneği : Kırtasiye İhtiyaçları</p>

        <ol>
            <li> Kurşun Kalem </li>
            <li> Silgi </li>
            <li> Kalemtraş</li>
        </ol>

    </body>
</html>

HTML Görünümü :
Sıralı Liste Örneği : Kırtasiye İhtiyaçları

Kurşun Kalem
Silgi
Kalemtraş

HTML Açıklama Listeleri

<dl> , <dt> ve <dd> etiketleri : Terimler ve açıklamalarını içeren bir tanım listesi oluşturmamızı sağlayan etiketlerdir. Tanımlar <dl> , Terimler <dt> ve tanım açıklamalarını ise <dd> etiketleri ile oluşturulur.

Tanımlar, Terimler ve Açıklamaları HTML Örneği :

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>
            Sayfamızın Başlığı Buraya Yazılacak
        </title>
    </head>
    <body>

        <dl>
            <dt> Bilgisayar: </dt>
                <dd> Kendisine verdiğimiz bilgileri istediğimizde saklayabilen, istediğimizde geri verebilen cihaza denir. </dd>
            <dt> Programlama Dili:</dt>
                <dd> Yazılımcının bir algoritmayı ifade etmek amacıyla, bir bilgisayara ne yapmasını istediğini anlatmasının tektipleştirilmiş yoludur. </dd>
        </dl>

        <p>Farklı Bir Kullanım Şekli</p>

        <dt> Bilgisayar: </dt>
            <dd>
                <select name="bilgisayar">
                    <option value="donanim">Donanım</option>
                    <option value="yazilim">Yazılım</option>
                </select>
            </dd>
        <dt> Programlama Dilleri:</dt>
            <dd>
                <select name="programlama">
                    <option value="c">C++</option>
                    <option value="java">JAVA</option>
                </select>
            </dd>

HTML Görünümü :

Bilgisayar:: Kendisine verdiğimiz bilgileri istediğimizde saklayabilen, istediğimizde geri verebilen cihaza denir.
Programlama Dili:: Yazılımcının bir algoritmayı ifade etmek amacıyla, bir bilgisayara ne yapmasını istediğini anlatmasının tektipleştirilmiş yoludur.

Farklı Bir Kullanım Şekli

Bilgisayar:

Programlama Dilleri:

Listeleme Etiketleri

<ol> Sıralı bir liste tanımlar
<ul> Sırasız liste tanımlar
<li> Bir liste öğesini tanımlar
<dl> Bir açıklama listesini tanımlar
<dt> Bir açıklama listesinde bir terim / adını tanımlar
<dd> Bir açıklama listesinde bir terim / adının açıklamasını tanımlar

Sayfalar