UL, OL, DL Taglar?

Dökümanlarin göze hos görünmelerini saglamak amaciyla listeler yaygin olarak kullanilir. HTML, pek çok liste çesidi destekler. Bunlar, düz listeler, numarali listeler, tanimli listeler ve içiçe listelerdir

Düz listeler

Düz liste yaratmak için,

1. 1. Listeye baslamak için belirteç açilir.
<ul>

2. 2. Liste elemanlarini teker teker girerken basina <li> belirteci girilir. Kapatmak için </li> belirtecine gerek yoktur.

3. 3. Listeyi bitirmek için belirteç kapatilir.
</ul>

Örnek olarak,

    <ul>

    <li> Elma

    <li> Armut

    </ul>

Örnek, ekranda su sekilde görülür :

Elma
Armut

<li> belirteçleri içinde paragraflar, diger dökümanlara baglantilar, ve diger belirteçler kullanabilirsiniz

Numarali Listeler

Numarali listeler, düz listelerden farkli olarak, <ul> belirteci yerine <ol> kullanirlar. Ekranda liste elemanlarinin basinda 1'er artan numaralar görünür.
Asagidaki HTML kodu,

    <ol>

    <li> Linux Isletim Sistemi

    <li> Unix Isletim Sistemi

    </ol>

ekrana sunlari yazar:

1. 1. Linux Isletim Sistemi

2. 2. Unix Isletim Sistemi

Tanimli listeler

Genellikle birden fazla basligi olan, her baslik altinda kisa bir metin içeren yazilar, tanimli listeler ile olusturulur. Tanimi yapilacak baslik, <dt> ile belirtilir, <dd> ile baslik altina metin girilir. Tüm liste, <dl> ile </dl> arasina alinir.

    <DL>

    <DT> NCSA

    <DD> NCSA, the National Center for Supercomputing Applications,

         is located on the campus of the University of Illinois

         at Urbana-Champaign. NCSA is one of the participants in the

         National MetaCenter for Computational Science and Engineering.

    <DT> Cornell Theory Center

    <DD> CTC is located on the campus of Cornell University in Ithaca,

         New York. CTC is another participant in the National MetaCenter

         for Computational Science and Engineering.

    </DL>

Ekrandaki çikti su sekilde görünür:

NCSA

NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. NCSA is one of the participants in the National MetaCenter for Computational Science and Engineering.

Cornell Theory Center

CTC is located on the campus of Cornell University in Ithaca, New York. CTC is another participant in the National MetaCenter for Computational Science and Engineering.

Içiçe Listeler

Tüm liste çesitleri, 3'den fazla bölüm kullanmadikça içiçe yazilabilir. Örnek olarak,

   <ul>

   <li> Istanbul'un büyük semtleri

       <lu>

       <li> Beyoglu

       <li> Taksim

       <li> Bakirköy

       </lu>

   <li> Ankara'nin belli basli yerlesim birimleri

       <lu>

       <li> Kizilay

       <li> Ulus

       </lu>

   </lu>

Ekrandaki görüntüsü,

Istanbul'un büyük semtleri
- Beyoglu
- Taksim
- Bakirköy
Ankara'nin belli basli yerlesim birimleri
- Kizilay
- Ulus

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

Örnek:

HTML etiketi Etiketin Web Sayfas?ndaki görüntüsü

<ol  type="1">Çerezler:

            <li>Kavurga

            <li>Çekirdek

            <li>M?s?r

            <li>Cips 

            </ol>

            <ol  type="a">Içkiler:

            <li>Bira

            <li>Votka

            <li>?arap

            <li>Viski

            <li>Rak?

            </ol>

Kavurga
Çekirdek
M?s?r
Cips

Bira
Votka
?arap
Viski
Rak?

Ö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 baslatabiliriz:

Ö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>`	Çerezler: Kavurga Çekirdek M?s?r 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çkiler:

            <li>Bira</li>

            <li>Votka</li>

            <li>?arap</li>

            <li>Viski</li>

            <li>Rak?</li>

            </ul>

Kavurga
Çekirdek
M?s?r
Cips

Bira
Votka
?arap
Viski
Rak?

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 www.bidb.odtu.edu.tr/index.php

Bu içerikle ilgili henüz herhangi bir yorum yapılmamıştır. Bu içerikle ilgili Yorumunuzu eklemek için burayı tıklayınız.