7. Listeler (lists)

Bir çok web sayfası listelenmiş bilgi gösterir. HTML’de bu listeleri oluşturmak kolaydır, hatta bu listeler liste içinde liste oluşturabilirler (mesela bir outline oluşturmak için). Listeler ayrıca bir içindekiler bölümü hazırlarken ya da bir seri bilginin bölümlerini göstermek için uygundur.

Sırasız (unordered) listeler

Sırasız listeler ya da “ul” belirteci, browserda, başında noktalarla belirtilen satırlar oluşturur. Noktaların şekli, kullanılan browsera ve yapılan ayarlarına göre değişir (tanımlanan font da etkilidir; mesela Macintosh’ta bu noktalar option-8 karakter denen bir karakterle, Times fontunda bu küçük bi kare, Genova fontunda ise büyükçe bir nokta).

Sırasız listeye bir örnek:

• birinci parça
• ikinci parça
• üçünçü parça

Bu listeyi yapmak için HTML kodu:

<B>Sırasız listeye bir örnek:</B>

<ul>

<li>  birinci parça

<li>  ikinci parça

<li>  üçüncü parça

</ul>

<ul> belirteci listenin başlangıç ve bitişini belirtir.

Sıralı Listeler

Sıralı listeler browserın her parçaya bir numara atadığı listelerdir (1., 2. gibi). Sırasız listeden tek farkı <ul> belirteçlerini <ol> haline değiştirmektir. Bir önceki örneği kullanırsak:

Sıralı listeye bir örnek:

1. 1.   Birinci parça
2. 2.   İkinci parça
3. 3.   Üçüncü parça

Bu listeyi oluşturmak için HTML kodu:

<B>Sıralı listeye bir örnek:</B>

<ol>

<li>  Birinci parça

<li>  ikinci parça

<li>  üçüncü parça

</ul>

İçiçe Listeler

Sıralı ve sırasız listeler değişik derecelerde kullanılabilir, her biri browser tarafından gerektiği gibi işlenecektir. Fakat önem vermeniz gereken nokta her listenin doğru bir bitiş belirteci olması ve içiçe sıralanışında bir hata olmamasıdır.

Tüm bu <ol> <li> </ul> <li> belirteçleri ile işler biraz karışıyor gibi görünmeye başlayabilir, fakat öncelikle aklınızda tutmanız gereken listelerin temel görünüşüdür.

<ul>          <ol>

<li>          <li>

<li>          <li>

</ul>         </ol>

Başka listelerin içinde kullanılmış bir sırasız liste:

İçiçe Sırasız Liste

• Bu birinci parça
• Bu ikinci parça

à      Bu ikinci parçanın ilk alt parçası

¨    Bu da bir alt parçanın alt parçası

¨    Bu, alt parçanın ikinci alt parçası

à      Bu, ikinci parçanın ikinci alt parçası

à      Bu, ikinci parçanın üçüncü alt parçası

•   Bu üçüncü parça

Liste işaretlerinin her derecede değiştiğine dikkat edin.

Bu formatı oluşturmak için HTML kodu:

<B>İçiçe Sırasız Liste</B>

<ul>

<li>Bu birinci parça

<li>Bu ikinci parça

<ul>

<li>Bu ikinci parçanın ilk alt parçası

<ul>

<li>Bu da bir alt parçanın alt parçası

<li>Bu, alt parçanın ikinci alt parçası

</ul>

<li>Bu, ikinci parçanın ikinci alt parçası

<li>Bu, ikinci parçanın üçüncü alt parçası

</ul>

<li>Bu üçüncü parça

</ul>

İçiçe Listeler – Hepsini Kullanmak

Sıralı listelerde sadece sıralı listeleri kullanmanız gerekmez, liste çeşitlerini birlikte içiçe kullanabilirsiniz.

Mesela, bu örnekteki sıralı listenin içinde bir sırasız liste kullanılıyor:

İçiçe sırasız liste

1. 1.   Bu birinci parça
2. 2.   Bu ikinci parça

• Bu ikinci parçanin birinci alt parçası

1. Bu da bir alt parçanın numaralı alt parçası

1. 2.   Bu da bir alt parçanın numaralı başka alt parçası

• Bu ikinci parçanın ikinci alt parçası
• Bu ikinci parçanın üçüncü alt parçası

1. 3.   Bu üçüncü parça

Bu çıktının sağlanması için gerekli HTML kodu:

<B>İçiçe sırasız liste</B>

<ol>

<li>Bu birinci parça

<li>Bu ikinci parça

<ul>

<li>Bu ikinci parçanin birinci alt parçası

<ol>

<li> Bu da bir alt parçanın numaralı alt parçası

<li>Bu da bir alt parçanın numaralı başka alt parçası

</ol>

<li>Bu ikinci parçanın ikinci alt parçası

<li>Bu ikinci parçanın üçüncü alt parçası

</ul>

<li>Bu üçüncü parça

</ol>

HTML Dökümanınıza Listeler Yerleştirmek

Şimdi, liste belirteçlerini kullanarak Volkanlar Sayfasına sıralı ve sırasız listeler koyacaksınız.

1. 1.   Açık değilse çalışmanızı açın.
2. 2.   HTML dökümanınızı text editöründe açın.
3. 3.   Volkan terminolojisi başlığı altında teknik kelime örnekleri göstermek için sırasız liste belirteçlerini kullanacağız. Dökümanınızda bu bölüme gidin.
4. 4.   Önce aşağıdaki cümleyi yerleştirin.

Ne kadarını biliyorsunuz?

1. 5.   Şimdi listeyi oluşturmak için HTML formatını kullanacağız:

<ul>

<li>kaldera

<li>vesikularite

<li>pahoehoe

<li>reoloji

<li>lahar

</ul>

1. 6.   Şimdi, gerekli kısımların yazılması için sıralı liste kullanacağız. Araştırma Projesi kısmı altında aşağıdaki yazıyı girin:

Göreviniz, yukarıdaki listenin dışında son yüz yıl içinde faaliyete geçmiş bir volkan hakkında bilgi toplayıp rapor etmek. Raporunuzda şunlar olmalı:

<ol>

<li>Volkanın çeşiti

<li>Jeografik konumu

<li>En yakın şehrin ismi, popülasyonu, ve volkana uzaklığı

<li>En son faaliyeti ve verdiği hasar.

<li>Faaliyetle birlikte görülen olaylar (toprak kaymaları, depremler, vs.)

</ol>

<p>

Sonra, bu volkanın yol açtığı genel hasarlar üzerine bir gözlem ve bunların azaltılması için neler gerektiği konusunda bir paragraf yazın.

1. 7.   HTML dosyanızı kaydedin ve browserınızda tekrar yükleyin.