Html Dersleri – 7 – Listeler

Html sayfalarımızda listeler oluşturmak oldukça kolaydır. Listelerimizi oluşturmak için, tanımlanmış özel etiketleri kullanarak hızlı ve kolayca listeler oluşturabiliriz.

Listeler Sıralı Listeler, Sırasız Listeler ve Tanımlı Listeler olarak 3 farklı şekilde yapılabilir.

Sırasız Listeler

Herhangi bir sıralaması olamayan sırasız listeler madde işaretleri kullanılarak oluşturulabilir. Unordered List yani Sırasız Liste anlamına gelen <ul>…</ul> etiketlerini kullanarak sırasız etiketler oluşturabiliriz. Her bir liste öğesi de list item yani liste öğesi anlamına gelen <li>…</li> etiketleri arasına yazılır.

Kullanım:

<ul>
   <li>Elma</li>
   <li>Portakal</li>
   <li>Armut</li>
</ul>

Çıktısı:

• Elma
• Portakal
• Armut

Sıralı Listeler

Maddeler ve rakamlar ile listelemeler için sıralı listelemeler kullanılır.

Kullanım:

<ol>
   <li>Elma</li>
   <li>Portakal</li>
   <li>Armut</li>
</ol>

Çıktısı:

1. Elma
2. Portakal
3. Armut

<ol>…</ol> etiketi ordered list yani sıralı listeler anlamına gelmektedir. Her bir liste öğesi list item yani liste öğesi anlamına gelen <li>…</li> etiketleri arasına yazılır.

Sıralı listelerin madde işaretleri farklı şekillerde gösterilebilir ve başlangıç sırası belirlenebilir. Madde işaretlerini belirlemek için type, başlangıç sırasını belirlemek için de start parametresi kullanılır.

<ol type="1">
  <li>Süt</li>
  <li>Un</li>
  <li>Şeker</li>
</ol>

<ol type="1" start="25">
  <li>Süt</li>
  <li>Un</li>
  <li>Şeker</li>
</ol>

<ol type="A">
  <li>Çay</li>
  <li>Kahve</li>
  <li>Süt</li>
</ol>

<ol type="a">
  <li>Elma</li>
  <li>Armut</li>
  <li>Portakal</li>
</ol>

<ol type="I">
  <li>Mont</li>
  <li>Eldiven</li>
  <li>Bot</li>
</ol>

<ol type="i">
  <li>Türkçe</li>
  <li>İngilizce</li>
  <li>Almanya</li>
</ol>

Çıktısı:

1. Süt
2. Un
3. Şeker

25. Süt
26. Un
27. Şeker

1. Çay
2. Kahve
3. Süt

1. Elma
2. Armut
3. Portakal

1. Mont
2. Eldiven
3. Bot

1. Türkçe
2. İngilizce
3. Almanya

Tanımlı Listeler

Tanımlı listeler <dl>…</dl> etiketi ile tanımlanır. Her bir liste öğesi <dt>…/dt> etiketi ile tanımlanırken, her bir öğesi de <dd>…</dd> etiketi ile tanımlanır.

<dl>
  <dt>Sayısal</dt>
     <dd>Matematik</dd>
     <dd>Kimya</dd>
  <dt>Sözel</dt>
     <dd>Edebiyat</dd>
     <dd>Tarih</dd>
</dl>

Çıktısı:

Sayısal

Matematik

Kimya

Sözel

Edebiyat

Tarih

İç İçe Listeler

Listeler iç içe ve farklı türlerde oluşturulabilirler. Yani sıralı bir liste altında sırasız bir liste barındırabilir.

Örneğin:

<ul>
  <li>Kahve
    <ul>
      <li>Türk Kahvesi</li>
      <li>Filtre Kahve</li>
    </ul>
  </li>
  <li>Çay
    <ol>
      <li>Siyah Çay</li>
      <li>Yeşil Çay</li>
    </ol>
  </li>
  <li>Süt</li>
</ul>

Çıktısı:

• Kahve
  • Türk Kahvesi
  • Filtre Kahve
• Çay
  1. Siyah Çay
  2. Yeşil Çay
• Süt