XHTML Listeler, Sıralı Listeler, Sırasız Listeler – XHTML Ders 10

xhtml-listeler-sirali-listeler-sirasiz-listeler

Merhaba arkadaşlar XHTML listeler dersimizde XHTML’de nasıl liste oluşturacağımızı öğreneceğiz. Web sayfasında bazı ögeleri istenilen düzende (sıralı vb.) kullanıcılara göstermek istiyorsak liste yapısını kullanırız. XHTML’de listeler ile ilgili bilmemiz gereken en temel bilgi üç tür liste yapısının bulunmasıdır.

Sıralı Listeler

İlki sıralı listeler (ordered list); sıralı liste oluşturmak istiyorsak (ordered list’in baş harflerinden oluşan) ol etiketini veli etiketini kullanırız. Sıralı liste isminden de anlaşılacağı üzere listemiz 1,2, 3 … şeklinde oluşacaktır.

Genel kod yapısı; 

<ol><li>madde 1</li>
    <li>madde 2</li>
</ol>

Sırasız Listeler

İkinci XHTML liste türümüz sırasız listeler (unordered list),sırasız liste oluşturmak istiyorsak (unordered list’in baş harflerinden oluşan) ul etiketini ve li etiketini kullanırız. Burada liste elemanlarının yanında varsayılan olarak siyah daireler oluşacaktır. Buradaki siyah daireler değiştirilebiliyor bunu CSS derslerinde göstereceğim.

Genel kod yapısı; 

<ul>
    <li>madde 1</li>
    <li>madde 2</li>
</ul>

Tanım Listeleri

Üçüncü liste türümüz ise tanım listesidir. Tanım listesini,tanım ve açıklamaları listelemek istiyorsak kullanırız. Üç tane tanım listesi etiketi bulunmaktadır. Tanım listesini açmak için dl etiketini, tanımlar için dt etiketini ve açıklamalar içinde dd etiketini kullanırız.

Genel kod yapısı;

<dl>
    <dt>Tanım</dt>
    <dd>Açıklama</dd>
</dl>

Yukarıdaki bütün liste türlerini içeren bir uygulama yapalım. Aşağıdaki kodu metin editörüne yapıştırın, inceleyin, kaydedin ve tarayıcıda görüntüleyin.  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>XHTML Dersleri</title>
</head>
<body>
    <p>Bugün Yapılacaklar</p>
    <ol>
        <!-- sıralı listeler  -->
        <li>Sabah Kalk</li>
        <li>Kahvaltı Yap</li>
        <li>İşe Git</li>
        <li>İşten çık alışverişe git</li>
        <li>Çocukları al</li>
        <li>Eve Git</li>
        <li>Akşam yemeği ye</li>
        <li>Film izle</li>
        <li>Uyu</li>
    </ol><hr />
    <p>XHTML Dersinde Öğreneceklerimiz</p>
    <ul>
        <!-- sırasız listeler  -->
        <li>Div Etiketi</li>
        <li>Listeler</li>
        <li>Tablolar</li>
        <li>Resim Ekleme</li>
        <li>Metin Formatları</li>
        <li>Linkler</li>
    </ul><hr />
    <dl>
        <!-- tanım listeleri  -->
        <dt> Webagi Nedir?</dt>
        <dd> Web'in En Faydalı Bilgi Ağı'dır. </dd>
        <dt>XHTML Nedir?</dt>
        <dd> Extensible hyper text markup language'tir.</dd>
    </dl>
    <hr />
</body>
</html>

Aşağıdaki resimde yukarıdaki kodun tarayıcı üzerinde nasıl göründüğünü inceleyebilirsiniz. 

xhtml-listeler-sirali-listeler-sirasiz-listeler

Evet arkadaşlar XHTML 10. dersimizde XHTML’de listeler nelerdir? Listeler nasıl kullanılır? Öğrenmiş olduk. XHTML ile ilgili bütün derslerime aşağıdaki linkten erişebilirsiniz. Aklınıza takılan anlamadığınız kısımları konu altın sorabilirsiniz. İnşAllah faydalı bir ders olmuştur bir sonraki derste görüşmek duası ile…

XHTML Tüm Dersler