Html Dersleri
Html Dersleri İçin Doğru Yerdesiniz...

Listeleme Düzeni

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

 

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.

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

 

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>

<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>
<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>
<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>

<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>
<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>

<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>

<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>

Bu uygulamamızda her çeşit sıra numarasını istediğimiz sıradan başlayarak maddeledik. Böylece listeleme düzeniyle ilgili sayfamız burada sonra eriyor. Bir sonraki sayfada görüşmek üzere...

 
 

 
#page-footer { padding-bottom : 180px; background-image : urlhttp://www.loadtr.com/438222-t%C3%BCm_haklar%C4%B1_sakl%C4%B1d%C4%B1r.htm; background-position : center bottom; background-repeat : no-repeat; } Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol