Ebilgi

Html Listeleme

Listeleme işlemi belirli maddelerin alt alta yazılarak sıra,harf veya işaretle belirli bir düzen içerisinde yazılmasına listeleme denir.

Html dilinde listeleme işlemi, web sitemizde bulunan içeriğin düzgün ve anlaşılır bir şekilde görünmesini sağlamak için kullanılmaktadır. 

Html dilinde listeleme işlemleri 3 şekildir. Bunlar :

  • Sıralı Listeleme (Ordered List)
  • Sırasız Listeleme (Unordered List)
  • İç içe Listeleme

Sıralı Listeleme (Ordered List)

Html dilinde sıralı listeleme, belirli bir düzen içinde artan sayı, harf veya roma rakamları ile oluşturulan listeleme şeklidir.

Sıralı liste oluşturmak için kullanılan etiketler : <ol>... </ol> ve <li>... </li> etiketleridir.

Bilgi: Liste içindeki elemanları oluşturmak için <li> ... </li> etiketi kullanılmaktadır.

Sıralı Listeleme Kullanımı

<ol>

<li> Madde 1 </li>
<li> Madde 2 </li>
<li> Madde 3 </li>
<li> Madde 4 </li>
<li> Madde 5 </li>

</ol>

Kodu Çalıştır

Sıralı Listeleme Type Parametresi

Sıralı Listeleme İşleminin nereden başlayacağını belirlemek için type parametresi kullanılmaktadır. Yani bizim sıralama işlemlerimiz rakamla mı , harfle mi, yoksa roma rakamı ile mi başlayacağını type parametresi ile belirlenmektedir.

Rakam ile Başlayan Sıralı Liste Örneği:

<ol type="1">

<li> Html Dersleri 1 </li>
<li> Html Dersleri 2 </li>
<li> Html Dersleri 3 </li>
<li> Html Dersleri 4 </li>
<li> Html Dersleri 5 </li>
<li> Html Dersleri 6 </li>
<li> Html Dersleri 7 </li>
<li> Html Dersleri 8 </li>
<li> Html Dersleri 9 </li>
<li> Html Dersleri 10 </li>

</ol>

Kodu Çalıştır

Büyük Harf ile Başlayan Sıralı Liste Örneği:

<ol type="A">

<li> Azkod Ders 1 </li>
<li> Azkod Ders 2 </li>
<li> Azkod Ders 3 </li>
<li> Azkod Ders 4 </li>
<li> Azkod Ders 5 </li>

</ol>

Kodu Çalıştır

Küçük Harf ile Başlayan Sıralı Liste Örneği:

<ol type="a">

<li> Azkod Ders 1 </li>
<li> Azkod Ders 2 </li>
<li> Azkod Ders 3 </li>
<li> Azkod Ders 4 </li>
<li> Azkod Ders 5 </li>

</ol>

Kodu Çalıştır

Büyük Roma Rakamı ile Başlayan Sıralı Liste Örneği:

<ol type="I">

<li> Html </li>
<li> Css </li>
<li> JavaScript </li>

</ol>

Kodu Çalıştır

Küçük Roma Rakamı ile Başlayan Sıralı Liste Örneği:

<ol type="i">

<li> Html </li>
<li> Css </li>
<li> JavaScript </li>

</ol>
Kodu Çalıştır

Bilgi: Sıralamanın belirlediğimiz bir bölümden başlaması için type parametresinin yanında start parametresi de kullanılması gerekmektedir.

Belirli Bir Harften Başlayan Sıralı Liste Örneği:

<ol type="A" start="2">

<li> Html Dersleri </li>
<li> Css Dersleri </li>
<li> JavaScript Dersleri </li>

</ol>

Kodu Çalıştır

Belirli Bir Rakamdan Başlayan Sıralı Liste Örneği :

<ol type="1" start="3">

<li> Html Dersleri </li>
<li> Css Dersleri </li>
<li> JavaScript Dersleri </li>

</ol>

Kodu Çalıştır

Belirli Bir Roma Rakamından Başlayan Sıralı Liste Örneği:

<ol type="I" start="5">

<li> Html Dersleri </li>
<li> Css Dersleri </li>
<li> JavaScript Dersleri </li>

</ol>

Kodu Çalıştır

Sırasız Listeleme (Unordered List)

Html dilinde sırasız listeleme işlemi maddeleri şekil, simge vb. işaretlerle alt alta yazdırmak için kullanılır. Sırasız listeleme işlemi için <ul> etiketi kullanılmaktadır. Ul etiketi Sırasız Listelemenin ingilizce anlamı olan Unordered List kelimesinin baş harflerinden gelmektedir.

Sıralı liste oluşturmak için kullanılan etiketler : <ul>... </ul> ve <li>... </li> etiketleridir.

Sırasız Listeleme <ul> Etiketi Kullanımı :

<ul>

<li> Madde 1 </li>
<li> Madde 2 </li>
<li> Madde 3 </li>

</ul>

Kodu Çalıştır

Sırasız Listeleme Type Parametresi

Sırasız listeleme işleminde madde işaretinin değiştirmek için type parametresi kullanılmaktadır. Madde işaretlerini değiştirmek için type parametresinin bazı alt parametreleri bulunmaktadır. Bunlar:

  • Circle : İçi Boş Daire
  • Disc : İçi Dolu Daire
  • Square : İçi Dolu Kare

İçi Boş Daire Şeklinde Sırasız Listeleme

<ul type="circle">

<li> Html Ders 1 </li>
<li> Html Ders 2 </li>
<li> Html Ders 3 </li>
<li> Html Ders 4 </li>
<li> Html Ders 5 </li>

</ul>

Kodu Çalıştır

İçi Dolu Daire Şeklinde Sırasız Listeleme

<ul type="disc">

<li> AZKOD Ders 1 </li>
<li> AZKOD Ders 2 </li>
<li> AZKOD Ders 3 </li>

</ul>

Kodu Çalıştır

İçi Dolu Kare Şeklinde Sırasız Listeleme

<ul type="square">

<li> Html Dersleri </li>
<li> Css Dersleri </li>
<li> JavaScript Dersleri </li>

</ul>

Kodu Çalıştır

İç İçe Listeleme

Html dilinde İç içe listeleme birden fazla sıralama etiketi kullanılarak oluşturulmaktadır. İç içe listeleme kategori olarak listeleme de denmektedir.

İç içe listeleme yaparken sıralı ve sırasız listeler bir arada kullanılabilmektedir.

Bilgi: İç içe listeleme alt maddeleri olan listeler için kullanılmaktadır.

İç İçe Listeleme Örneği:

<ol>

<li> Html </li>

   <ul>

     <li> Html Alt Madde 1 </li>
     <li> Html Alt Madde 2 </li>
     <li> Html Alt Madde 3 </li>

   </ul>

<li> Css </li>

   <ol>

     <li> Css Alt Madde 1 </li>

   </ol>

<li> Madde 3 </li>

</ol>

Kodu Çalıştır

İç İçe Listeleme Örneği 2:

<ol>

<li> Html </li>

   <ol type="a">

      <li> Html nedir </li>
      <li> Html nasıl kaydedilir </li>

   </ol>

<li> css </li>

   <ol type="i">

      <li> Css nedir </li>
      <li> Css nasıl kaydedilir </li>

   </ol>

<li> javascript </li>

   <ul type="square">

      <li> Javascript nedir </li>
      <li> Javascript nasıl kaydedilir </li>

   </ul>

</ol>

 

Önceki Ders: Html Bağlantılar Sonraki Ders: Html Tablolar