UL OL DL Tagları

Dökümanların göze hoş görünmelerini sağlamak amacıyla listeler yaygın olarak kullanılır. HTML, pek çok liste çeşidi destekler. Bunlar, düz listeler, numaralı listeler, tanımlı listeler ve içiçe listelerdir.

Düz (Numarasız) Listeler

UL OL DL Tagları

UL OL DL Tagları

Düz liste (unordered lists, <ul>) oluşturmak için,

  1. Listeye başlamak için belirteç açılır. <ul>
  2. Liste elemanlarını teker teker girerken başına <li> belirteci girilir. Kapatmak için </li> belirtecine gerek yoktur.
  3. Listeyi bitirmek için belirteç kapatılır. </ul>

Örnek olarak,

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

Örnek, ekranda şu şekilde görülür :

  • Elma
  • Armut

<li> belirteçleri içinde paragraflar, diğer dökümanlara bağlantılar, ve diğer belirteçleri kullanabilirsiniz.

Numaralı Listeler

Numaralı listeler (ordered lists <ol>), düz listelerden farklı olarak, <ul> belirteci yerine <ol> kullanırlar. Ekrandaki liste elemanlarının başına 1'den başlayarak sayılar eklenir. Aşağıdaki HTML kodu,

<ol>
  <li> Linux İşletim Sistemi
    <li> Linux'un desteklediği donanımlar
</ol>

ekrana şunları yazar:

  1. Linux İşletim Sistemi
  2. Linux'un desteklediği donanımlar

Tanımlı Listeler

Genellikle birden fazla başlığı olan, her başlık altında kısa bir metin içeren yazılar, tanımlı listeler ile oluşturulur. Tanımı yapılacak başlık, <dt> ile belirtilir, <dd> ile başlık altına metin girilir. Tüm liste, <dl> ile </dl> arasına alınır.

<DL>
  <DT> Kişisel Kullanım 
    <DD> Linux evinde veya işinde UNIX işletim sistemi altında çalışmak isteyenler için ideal bir platformdur.  
  <DT> Internet Sunucusu
    <DD> Linux doğrudan TCP/IP desteği ile gelmektedir. 
</DL>

Ekrandaki çıktı şu şekilde görünür:

Kişisel Kullanım

Linux evinde veya işinde UNIX işletim sistemi altında çalışmak isteyenler için ideal bir platformdur.

Internet Sunucusu

Linux doğrudan TCP/IP desteği ile gelmektedir.

İçiçe Listeler

Tüm liste çeşitleri, 3'den fazla bölüm kullanmadıkça içiçe yazılabilir. Örnek olarak,

   <ul>
  <li> İstanbul'un büyük semtleri
    <lu>
      <li> Beyoğlu</li>
      <li> Bakırköy</li>
      <li> Kadıköy</li>
    </lu>
  </li>
  <li> Ankara'nın belli başlı yerleşim birimleri
    <lu>
      <li> Kızılay</li>
      <li> Ulus</li>
    </lu>
  </li>
  </lu>

Ekrandaki görüntüsü,

  • İstanbul'un büyük semtleri
    • Beyoğlu
    • Bakırköy
    • Kadıköy
  • Ankara'nın belli başlı yerleşim birimleri
    • Kızılay
    • Ulus 
    •  

i. Sıralı Liste(Ordered List):

Örnek:

HTML etiketi Etiketin Web Sayfas?ndaki görüntüsü
<ol type="i">Çerezler:
  <li>Kavurga
    <li>Çekirdek
      <li>Mısır
        <li>Cips
</ol>
<ol type="a">Içeçekler:
  <li>Şalgam
    <li>Ayran
      <li>Çay
        <li>Oralet
          <li>Soda
</ol>
  1. Çerezler:
  2. Kavurga
  3. Çekirdek
  4. Mısır
  5. Cips
  1. İçeçekler
  2. Şalgam
  3. Ayran
  4. Çay
  5. Oralet
  6. Soda

Örnekte görüldü?ü gibi type de?i?keni s?ral? listenin türünü belirler. Type de?i?keni için a?a??daki de?erlerden biri kullan?labilir:

type: {1, a, A, I, i}

Listeyi start değişkeni ile istediğimiz sayıdan başlatabiliriz:

Örnek:

HTML etiketi Etiketin Web Sayfas?ndaki görüntüsü
<ol start="199">Çerezler:
  <li>Kavurga
    <li>Çekirdek
      <li>M?s?r
        <li>Cips
</ol>
  1. Çerezler:
  2. Kavurga
  3. Çekirdek
  4. Mısır
  5. Cips

 

ii. Sırasız Liste(Unordered List):

Örnek:

HTML etiketi Etiketin Web Sayfas?ndaki görüntüsü
<ul type="circle">Çerezler:
  <li>Kavurga</li>
  <li>Çekirdek</li>
  <li>M?s?r</li>
  <li>Cips</li>
</ul>
<ul type="disc">Içeçekler:
  <li>Şalgam</li>
  <li>Ayran</li>
  <li>Çay</li>
  <li>Oralet</li>
  <li>Soda</li>
</ul>
  • Çerezler:
  • Kavurga
  • Çekirdek
  • Mısır
  • Cips
  • İçeçekler:
  • Şalgam
  • Ayran
  • Çay
  • Oralet
  • Soda

Benzer şekilde burada da type değişkeni sırasız listenin işaretini belirler. Type değişkeni için aşağıdaki değerlerden biri kullanılabilir:

type:{square, disc, circle}

iii. Tanımlama Listeleri (Definition List):

Örnek:

HTML etiketi Etiketin Web Sayfas?ndaki görüntüsü
<dl>
  <dt>Karbonhidrat ve ben
<dd>En çok bol karbonhidratl? yemekleri severim, özellikle de makarna ve türevlerini. Lazanya favorimdir. Pizza ve mant?ya da bay?l?r?m. </dd></dt>
  <dt>Sebze ve ben
<dd>Sebzeyle aram pek iyi de?ildir ama taze fasulye oldukça lezziz bir yiyecektir. Onun d???nda dolma, sarma da güzeldir. </dd></dt>
  <dt>Et ve ben
<dd>Et seven bir insanimdir. Her çesit kebabi afiyetle yerim. K?rm?z? olsun, beyaz olsun, hemen hemen bütün etleri yerim. Bal?k seçerim ama. </dd></dt>
</dl>

Karbonhidrat ve ben

En çok bol karbonhidratlı yemekleri severim, özellikle de makarna ve türevlerini. Lazanya favorimdir. Pizza ve mantıya da bayılırım.

Sebze ve ben

Sebzeyle aram pek iyi değildir ama taze fasulye oldukça lezziz bir yiyecektir. Onun dışında dolma, sarma da güzeldir.

Et ve ben

Et seven bir insanımdır. Her çesit kebabı afiyetle yerim. Kırmızı olsun, beyaz olsun, hemen hemen bütün etleri yerim. Balık seçerim ama.

 

Kaynak

 

 

 

Yorumunuzu Ekleyin
UL OL DL Tagları Yorumları +2 Yorum
  • ty
    1
    ty
    Net sade açıklayıcı. Teşekkürler.
    24 Aralık 2019 02:19:25, Salı
  • sane
    1
    sane
    lu ne demek? ekrana gelen çıktılar yanlış? açıklarmısınız?
    16 Eylül 2021 11:08:47, Perşembe


Yükleniyor...
Yükleniyor...