Altıncı Ders Listeler

Listeler

1. Sırasız Listeler
2. İç içe Sırasız Listeler
3. Mermi Şeklini Değiştirmek
4. Sıralı Listeler
5. İç içe Sıralı Listeler
6. Tanımlı Listeler
7. Özet

6.1 Sırasız Listeler

Sıranın önemi olmadığı maddelerden oluşan listeler oluşturmak için her bir maddenin önüne <LI> işaretini koyup bütün bu maddeleri <UL> ve </UL> işaretleriyle çevreliyoruz. Örneğin Türkiye'de yayınlanan bilgisayar/internet dergilerinin isimlerini sıralayalım. Rahat okunsun diye örnek 16'daki her bir maddeyi üç karakter içeriden yazdım; ama siz nasıl isterseniz öyle yazabilirsiniz.

ornek16.html
<HTML>
<HEAD>
<TITLE>Sırasız Listeler</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#0000FF">

Türkiye'de yayınlanan bilgisayar/internet dergilerinin web sayfaları:
<UL>
<LI><A HREF="http://www.adnet.com.tr">ad.net</A>
<LI><A HREF="http://www.chip.com.tr">Chip</A>
<LI><A HREF="http://www.pcmagazine.com.tr">PC Magazine</A>
<LI><A HREF="http://www.pcnet.com.tr">PCnet</A>
<LI><A HREF="http://www.pcworld.com.tr">PC World</A>
</UL>

</BODY>
</HTML>

<UL> işareti listemizin başladığını gösteriyor. <UL>'den önce yeni bir satıra geçmek için veya işaretlerini kullanmanız gerekmiyor çünkü <UL> zaten otomatik olarak bir satır boşluk bırakarak, <LI> ile başlayan her satırın (maddenin) önüne bir mermi (bullet) koyarak -biraz içeriden- bu maddeleri listeliyor. Yalnız listeleyeceğiniz maddeler bitince liste bitirme işareti </UL>'yi kullanmayı unutmayın yoksa listenizden sonra gelen tüm metin ve resimler listenizle aynı hizadan başlar.

6.2 İç içe Sırasız Listeler

<UL> işaretini kapatmadan yeni bir <UL> işareti kullanırsanız iç içe sırasız listeler oluşturabilirsiniz. Yalnız her bir alt liste bittikten sonra bu alt listeyi </UL> ile kapatmayı unutmayın. Örnek olarak ad.net'in web sitesinde neler varmış bir bakalım.

ornek17.html
<HTML>
<HEAD>
<TITLE>İç içe Sırasız Listeler</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#0000FF">

Türkiye'de yayınlanan bilgisayar/internet dergilerinin web sayfaları:
<UL>
<LI><A HREF="http://www.adnet.com.tr">ad.net</A>
<UL>
<LI>Köşe Yazıları
<LI>Sinema
<LI>TM 10
<LI>ad.network
<LI>Çözüm Hattı
<LI>Web Tasarımı
<LI>Resimler
<LI>Oyunlar
<LI>Shareware.net
</UL>
<LI><A HREF="http://www.chip.com.tr">Chip</A>
<LI><A HREF="http://www.pcmagazine.com.tr">PC Magazine</A>
<LI><A HREF="http://www.pcnet.com.tr">PCnet</A>
<LI><A HREF="http://www.pcworld.com.tr">PC World</A>
</UL>

</BODY>
</HTML>

6.3 Mermi Şeklini Değiştirmek

Önceki örneklerin sonuçlarına dikkatle baktıysanız her düzeyde farklı tür mermi kullanıldığını ve bunların şeklinin standart olduğunu farketmişsinizdir. Örneğin Netscape Navigator, ilk düzey için içi dolu daire, ikinci düzey için içi boş daire, üçüncü düzey için de içi dolu kare kullanır ve bu böyle devam eder; ama bunların sırasını değiştirmek elinizde. Tek yapmanız gereken <UL> işaretinin arkasına TYPE parametresini eklemek. TYPE parametresinin alabileceği değerler disc (içi dolu daire), circle (içi boş daire) ve square (içi dolu kare).
Bir önceki örneğimizin mermilerini biz belirleyelim bu sefer:

ornek18.html
<HTML>
<HEAD>
<TITLE>Değişik Mermili Sırasız Listeler</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#0000FF">

Türkiye'de yayınlanan bilgisayar/internet dergilerinin web sayfaları:
<UL TYPE="circle">
<LI><A HREF="http://www.memphisreal.cjb.net">Memphis</A>
<UL TYPE="square">
<LI>Güncel
<LI>Bilgisayar
<LI>Şiir
<LI>Sinema
<LI>Çözüm Hattı
<LI>Web Tasarımı
<LI>Resimler
<LI>Oyunlar
<LI>Shareware
</UL>
<LI><A HREF="http://www.chip.com.tr">Chip</A>
<LI><A HREF="http://www.pcmagazine.com.tr">PC Magazine</A>
<LI><A HREF="http://www.pcnet.com.tr">PCnet</A>
<LI><A HREF="http://www.pcworld.com.tr">PC World</A>
</UL>

</BODY>
</HTML>

6.4 Sıralı Listeler

Sıralı listelerin oluşturulması sırasız listelerinkiyle tamamen aynı şekilde yapılıyor. Tek farklılık <UL> yerine <OL> işaretini kullanmamız. Hemen bir örnekle görelim:

ornek19.html

<HTML>
<HEAD>
<TITLE>Sıralı Listeler</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#0000FF">

Şimdiye kadar gördüğümüz bölümler:
<OL>
<LI>Web Tasarımına Giriş
<LI>Paragraf Düzenleme İşaretleri
<LI>Fontlar ve Renkler
<LI>Resimler
<LI>Bağlantılar
<LI>Listeler
</OL>

</BODY>
</HTML>

Sıralı listelerde bizim herhangi birşekilde numara yazmamız gerekmiyor. Numaralar otomatik olarak veriliyor. Böylece herhangi bir maddenin yerini değiştirdiğinizde bütün numaraları baştan yazmak zorunda kalmadığınız gibi tıpkı sırasız listelerde olduğu gibi bu listeler de otomatikman içeriden başlayarak gösteriliyor.

6.5 İç içe Sıralı Listeler

Tıpkı sırasız listelerde olduğu gibi <OL> işaretini kapatmadan yeni bir <OL> işareti kullanırsanız iç içe sıralı listeler oluşturabilirsiniz. Yine her bir alt liste bittikten sonra bu alt listeyi </OL> ile kapatmamız gerekiyor. Yalnız sıralı alt listelerde numaralandırma web tarayıcısı tarafından varsayım olarak hep aynı şekilde yapıldığından numaralandırma şeklini değiştirmek isteyebilirsiniz. Bunun için <OL> işaretinin arkasına TYPE parametresini ekleyip bu parametreye aşağıdaki değerlerden herhangi birini verebilirsiniz:
1 - Standart numaralandırma (1, 2, 3, 4, ...)
a - Küçük harf (a, b, c, d, ...)
A - Büyük harf (A, B, C, D, ...)
i - Küçük Roma rakamları (i, ii, iii, iv, ...)
I - Büyük Roma rakamları (I, II, III, IV, ...)
Örnek olarak 6. bölümde ne anlatılıyor bir bakalım.

ornek20.html
<HTML>
<HEAD>
<TITLE>İç içe Sıralı Listeler</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#0000FF">

Şimdiye kadar gördüğümüz bölümler:
<OL>
<LI>Web Tasarımına Giriş
<LI>Paragraf Düzenleme İşaretleri
<LI>Fontlar ve Renkler
<LI>Resimler
<LI>Bağlantılar
<LI>Listeler
<OL TYPE="a">
<LI>Sırasız Listeler
<OL TYPE="i">
<LI>İç içe Sırasız Listeler
<LI>Mermi Şeklini Değiştirmek
</OL>
<LI>Sıralı Listeler
<OL TYPE="i">
<LI>İç içe Sıralı Listeler
</OL>
</OL>
</OL>

</BODY>
</HTML>

İpucu 1: <UL> ve <OL> işaretlerini iç içe kullanabilirsiniz.
İpucu 2: Eğer <UL> ve </UL> işaretleri arasında <LI> işaretini kullanmazsanız bu iki işaret arasındaki tüm metin ve resimler bir miktar içeriden başlar. Daha içeriden başlamak istiyorsanız içiçe birden çok <UL> işareti kullanabilirsiniz

6.6. 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> İnternet 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.
İnternet Sunucusu
Linux doğrudan TCP/IP desteği ile gelmektedir.

6.7 Listeler Bölüm Özeti

* Sıranın önemli olmadığı listeler oluşturmak için <UL> işaretinin kullanıldığını, listedeki her bir maddenin başına ise <LI> işaretinin getirildiğini öğrendik.
* İç içe sırasız listeler oluşturmak için bir üst düzeydeki <UL> işaretini kapatmadan yeni bir <UL> işaretinin kullanıldığını gördük.
* Sırasız listelerdeki mermi şeklini değiştirmek için <UL> işaretinin arkasına TYPE parametresini eklemiz gerektiğini gördük. Bu parametrenin alabileceği değerlerin disc, circle ve square olduğunu öğrendik.
* Sıralı listelerin sırasız listelerle aynı mantıkla çalıştığını, tek farkın <UL> yerine <OL> kullanmak olduğunu gördük.
* Sıralı listelerde iç içe listeler oluşturmanın sırasız listelerle olduğu gibi yapıldığını ancak numaralandırma şeklini TYPE parametresiyle belirlememizin iyi olacağını öğrendik.

Ana Sayfaya Dön