Html Listeleme Etiketleri

Html de listeleme yapmak için 2 temel yapı vardır. Birincisi "Sıralı Liste" diğeri ise "Sırasız Liste". Sıralı liste için <ol> (ordered list) sırasız liste için de <ul> (unordered list) etiketlerini kullanırız. Her iki liste seçeneği için de liste elemanlarını belirlemek için <li> (list item) etiketi kullanılır.

Şimdi bunları örneklerle inceleyelim.
<ol> / Sıralı Liste
Sıralı listeler bildiğiniz gibi 1. 2. 3., III. IV. V. veya A. B. C. şeklinde sırayla devam eden listelerdir. <ol> etiketi ile bu listeleri düzenleyebiliriz. Ayrıca <ol> etiketi "type" ve "start" parametreleri ile de kullanılabilir.
type parametresi = Liste elemanlarının nasıl numaralandırılacağını belirler.
start parametresi = Listemizin kaçıncı sıradan başlayacağını belirler.

Aşağıdaki şekilde bir liste oluşturacak olursa kodlarımız da şu şekilde olacaktır.

  1. Web Tasarımı
  2. Grafik Animasyon
  3. Veri Tabanı
  4. İnternet Programcılığı

                  <ol>
                         <li> Web Tasarımı </li>
                         <li> Grafik Animasyon </li>
                         <li> Veri Tabanı </li>
                         <li> İnternet Programcılığı </li>
                 </ol>

Type ve Start parametrelerini de kullanacak olursak;

d. Web Tasarım
e. Grafik Animasyon
f. Veri Tabanı
g. İnternet Programcılığı

              <ol type="a"; start="4">
                    <li> Web Tasarımı </li>
                    <li> Grafik Animasyon </li>
                    <li> Veri Tabanı </li>
                    <li> İnternet Programcılığı </li>
              </ol>


<ul> / Sırasız Liste
Sırasız listelerde ise sadece elemanlar listelenir. Tek parametre değeri alır. Type parametresi ile elemanların başındaki işaretler değişir.
 

  • Web Tasarımı

  • Grafik Animasyon

  • Veri Tabanı

  • İnternet Programcılığı

                <ol>
                      <li> Web Tasarımı </li>
                      <li> Grafik Animasyon </li>
                      <li> Veri Tabanı </li>
                      <li> İnternet Programcılığ </li>
                </ol>

  • Web Tasarımı

  • Grafik Animasyon

  • Veri Tabanı

  • İnternet Programcılığı

                   <ol type="square">
                          <li> Web Tasarımı </li>
                          <li> Grafik Animasyon </li>
                          <li> Veri Tabanı </li>
                          <li> İnternet Programcılığ </li>
                   </ol>

Evet arkadaşlar html liste elemanlarını bu şekilde örneklerle anlatmaya çalıştık umarım faydalı olmuştur.

İyi çalışmalar...

11 Ekim 2017      217       0
Yorumunuz