HTML Listeleme Düzeni

WebMaster bölümünde yer alan bu konu SüKuN tarafından paylaşıldı.

  1. SüKuN

    SüKuN Harbi Aktif Üye

    html listeleme kodları, html listeleme, html madde işaretleri, html ul kodu

    Bu sayfada HTML'in listeleme (maddeleme) kodlarını öğreneceğiz.

    Sırasız Listeleme

    Öğreneceğimiz ilk maddeleme çeşidi "unordered list" (sırasız liste). Bu tür listenin komutlarını <ul>...</ul> kodları arasına yazıyoruz. Ve listelenecek her madde <li>...</li> arasına yazılır. Hemen bir örnek çözelim.

    HTML:
    <html> 
    <head> 
    <title>Mario Vargas Llosa</title> 
    </head> 
    <body> 
    Mario Vargas Llosa'nın kitapları: 
    <ul> 
    <li>Kent ve Köpekler</li> 
    <li>Julia Teyze</li> 
    <li>Yüzbaşı ve Kadınlar Taburu</li> 
    <li>Alplerde Kaybolmak</li> 
    </ul> 
    </body> 
    </html>

    Bu örneğimizde Vargas'ın kitaplarını ardı ardına sıraladık ve her maddenin başına siyah bir nokta işareti (disc) konuldu. Maddelerin başına başka işaretler koymak da olasıdır. Bunun için <ul> koduna type="..." parametresi tanımlanır. Bir kaç örnek vermek gerekirse: <ul type="disc">,<ul type="circle"> veya <ul type="square">.

    HTML:
    <html> 
    <head> 
    <title>Kitaplar</title> 
    </head> 
    <body> 
    Mario Vargas Llosa'nın kitapları: 
    <ul type="disc"> 
    <li>Kent ve Köpekler</li> 
    <li>Julia Teyze</li> 
    <li>Yüzbaşı ve Kadınlar Taburu</li> 
    <li>Alplerde Kaybolmak</li> 
    </ul> 
    Amin Maalouf'un kitapları: 
    <ul type="square"> 
    <li>Afrikalı Leon</li> 
    <li>Tanios Kayası</li> 
    <li>Doğunun Limanları</li> 
    <li>Semerkant</li> 
    </ul> 
    Ursula K. Leguin'in kitapları: 
    <ul type="circle"> 
    <li>Karanlığın Sol Eli</li> 
    <li>Mülksüzler</li> 
    <li>Yerdeniz Üçlemesi (aslında "dörtleme")</li> 
    <li>Başlama Yeri</li> 
    </ul> 
    </body> 
    </html>
    Bazen maddelerin alt maddeleri de vardır. Aşağıdaki örneği inceleyelim:

    HTML:
    <html> 
    <head> 
    <title>Ursula K. Leguin</title> 
    </head> 
    <body> 
    Ursula Kroeber Leguin'in kitapları: 
    <ul> 
    <li>Karanlığın Sol Eli</li> 
    <li>Mülksüzler</li> 
    <li>Yerdeniz Üçlemesi</li> 
    <ul> 
    <li>Yerdeniz Büyücüsü</li> 
    <li>Atuan Mezarları</li> 
    <li>En Uzak Sahil</li> 
    <li>Tehanu</li> 
    </ul> 
    <li>Alplerde Kaybolmak</li> 
    </ul> 
    </body> 
    </html>
    Yukarıdaki uygulamada <ul>...</ul> kodları arasında bir başka <ul>...</ul> kod dizini kullanarak, alt maddelendirme yoluna gittik.

    Sıralı Listeleme

    Genellikle listelerimizde maddelerin önüne işaret yerine, maddenin sırasını belirten rakam veya harf koymayı tercih ederiz. Bunun için de <ol>...</ol> (ordered list) kodlarını kullanırız. Bu kodlar arasına listeleyeceğimiz maddeleri <ul> kodunda olduğu gibi <li>...</li> arasına yazarız.

    HTML:
    <html> 
    <head> 
    <title>Halikarnas Balıkçısı</title> 
    </head> 
    <body> 
    Cevat Şakir Kabaağaçlı'nın kitapları: 
    <ol> 
    <li>Mavi Sürgün</li> 
    <li>Aganta Burina Burinata</li> 
    <li>Anadolu'nun Tanrıları</li> 
    <li>Parmak Damgası</li> 
    </ol> 
    </body> 
    </html>
    Bu uygulamamızda maddelerin önüne sıra numaraları koymuş olduk. İşaretlerde olduğu gibi, sıra numaralarının da çeşitleri vardır. Ve alt maddeler oluşturmak olasıdır.

    HTML:
    <html> 
    <head> 
    <title>Halikarnas Balıkçısı</title> 
    </head> 
    <body> 
    Cevat Şakir Kabaağaçlı'nın kitapları: 
    <ol type="A"> 
    <li>Mavi Sürgün</li> 
    <li>Aganta Burina Burinata</li> 
    <li>Anadolu'nun Tanrıları</li> 
    <li>Parmak Damgası</li> 
    </ol> 
    Cevat Şakir Kabaağaçlı'nın kitapları: 
    <ol type="a"> 
    <li>Mavi Sürgün</li> 
    <li>Aganta Burina Burinata</li> 
    <li>Anadolu'nun Tanrıları</li> 
    <li>Parmak Damgası</li> 
    </ol> 
    Cevat Şakir Kabaağaçlı'nın kitapları: 
    <ol type="I"> 
    <li>Mavi Sürgün</li> 
    <li>Aganta Burina Burinata</li> 
    <li>Anadolu'nun Tanrıları</li> 
    <li>Parmak Damgası</li> 
    </ol> 
    Cevat Şakir Kabaağaçlı'nın kitapları: 
    <ol type="i"> 
    <li>Mavi Sürgün</li> 
    <li>Aganta Burina Burinata</li> 
    <li>Anadolu'nun Tanrıları</li> 
    <li>Parmak Damgası</li> 
    </ol> 
    </body> 
    </html>

    Eğer type="..." parametresini kullanmazsanız maddeler 1,2,3... diye sıralanacaktır. Bu maddeleme şekillerini içiçe kullanarak güzel bir indeks oluşturmanız da mümkün. Bunun örneğini ben yapmayım da, siz akıl edin. (Zekânızı küçümsemek istemem.)

    Tanım Listesi

    Elbette listenizi maddelerken önüne bir işaret veya sıra numarası koymanız şart değil. Bunun için <dl>...</dl> (definition list; tanım listesi) kodları arasında <dd>...</dd> (definition description; tanım açıklaması) ile işaretsiz ve numarasız maddeler sıralayabilirsiniz. Bu maddelerin önünde sadece boşluk olacaktır. Bu boşluk olmasını istemiyorsanız <dt>...</dt> (definition term; tanım terimi) kullanabilirsiniz. Hemen örnekle gösterelim:

    HTML:
    <html> 
    <head> 
    <title>Kitaplar</title> 
    </head> 
    <body> 
    Yazarlar ve kitapları: 
    <dl> 
    <dt>Mario Vargas Llosa'nın kitapları:</dt> 
    <dd>Kent ve Köpekler</dd> 
    <dd>Julia Teyze</dd> 
    <dd>Yüzbaşı ve Kadınlar Taburu</dd> 
    <dd>Alplerde Kaybolmak</dd> 
    <dt>Amin Maalouf'un kitapları:</dt> 
    <dd>Afrikalı Leon</dd> 
    <dd>Tanios Kayası</dd> 
    <dd>Doğunun Limanları</dd> 
    <dd>Semerkant</dd> 
    <dt>Ursula K. Leguin'in kitapları:</dt> 
    <dd>Karanlığın Sol Eli</dd> 
    <dd>Mülksüzler</dd> 
    <dd>Yerdeniz Üçlemesi (aslında "dörtleme")</dd> 
    <dd>Başlama Yeri</dd> 
    </dl> 
    </body> 
    </html>
    Bu uygulamada yazarların isimlerini "bold" (kalın) yazsaydık daha güzel gözükürdü herhalde. Bu listeleme tarzında da içiçe listeler ve alt maddeler oluşturulabilir.

    Göstermediğim bir kaç kod daha var, onları da kısaca anlatayım. <ul>...</ul> yerine <dır>...</dır> veya <menu>...</menu> kodlarını da kullanabilirsiniz, değişen birşey olmaz.

    Sıralı Listelemede Belli Bir Sıra Numarasından Başlatma

    Sayfanın sonunda bir incelik (ayrıntı) öğreteyim dedim: Sıra numaralı listelerde <ol>...</ol> (ordered list; sıralı listeler) kodlarının kullanılacağını söylemiştik ve type="..." kodu ile sıra numaralarının şeklini belirleyebiliyorduk. Ama listemizin maddelerini ilk numaradan başlatmak zorunda değiliz. Bunun için start="..." parametresini kullanırız. Kaçıncı maddeden başlayacaksak, o sayıyı tırnak arasına yazarız:

    HTML:
    <html> 
    <head> 
    <title>Halikarnas Balıkçısı</title> 
    </head> 
    <body> 
    Cevat Şakir Kabaağaçlı'nın kitapları: 
    <ol type="A" start="3"> 
    <li>Mavi Sürgün</li> 
    <li>Aganta Burina Burinata</li> 
    <li>Anadolu'nun Tanrıları</li> 
    <li>Parmak Damgası</li> 
    </ol> 
    Cevat Şakir Kabaağaçlı'nın kitapları: 
    <ol type="a" start="5"> 
    <li>Mavi Sürgün</li> 
    <li>Aganta Burina Burinata</li> 
    <li>Anadolu'nun Tanrıları</li> 
    <li>Parmak Damgası</li> 
    </ol> 
    Cevat Şakir Kabaağaçlı'nın kitapları: 
    <ol type="I" start="7"> 
    <li>Mavi Sürgün</li> 
    <li>Aganta Burina Burinata</li> 
    <li>Anadolu'nun Tanrıları</li> 
    <li>Parmak Damgası</li> 
    </ol> 
    Cevat Şakir Kabaağaçlı'nın kitapları: 
    <ol type="i" start="9"> 
    <li>Mavi Sürgün</li> 
    <li>Aganta Burina Burinata</li> 
    <li>Anadolu'nun Tanrıları</li> 
    <li>Parmak Damgası</li> 
    </ol> 
    </body> 
    </html>

     
    Son düzenleme moderatör tarafından: 15 Eylül 2011