Html Dersleri / UL OL DL Tagları

Düz (Numarasız) Listeler

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>	Çerezler: Kavurga Çekirdek Mısır Cips İçeçekler Şalgam Ayran Çay Oralet 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>	Ç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ç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

• www.bidb.odtu.edu.tr/index.php