Web Yazılım İçin
HTML Dersleri [6]
Listeleme Etiketleri

5. ders için hoş geldiniz!
İşaretleme nedir HTML dersleri 1 de anlatmıştım. Dersleri sırasıyla okursanız zorluk çekmezsiniz. Bu dersin konusu HTML'de listeleme etiketleridir.



HTML öğrenirken yukarıdaki küpe kulağınızda olsun. Olsun ki Etiketleri daha hızlı ve kolay kavrayın. Listeleme etiketleri de diğer bazı etiketler gibi kısaltmadır. Etiketin hangi İngilizce kelimeden kısaltıldığını bilirseniz HTML etiketi daha hızlı aklınıza girer ve orada uzun süre kalır.

Listeleme etiketleri nelerdir?

Liste türü için: <UL></UL> <OL></OL> Liste Elemanı İçin: <LI></LI>

Yukarıdaki etiketler Html listeleme etiketleridir.

Gelin akılda kalıcılığını arttırmak için kısaltmaların nereden geldiğini öğrenelim. İngilizce bir kelime olan list; Türkçe'de liste anlamına gelir. item ise satır (parça/birleşen) anlamlarına gelir.

İngilizce de i büyük yazılmaz. İngilizce de I harfi küçük yazılmaz. item büyük yazılacak ise ITEM diye yazılır, küçük yazılacak ise item diye yazılır.

Sırasız Listeleme
UL (Unordered)

Sıra nosu olmadan sıralamada (U)nordered harfi kullanılır. Bu tarz listelemede satır (item) başında sıralama için rakam yada harf konmaz. Sadece maddeleme işareti konur. Madelemenin varsayılan işareti büyük noktadır.

1. Sırasız Listeleme Örneği:

<H2> Önceki HTML Dersleri</H2> <UL> <a href="nedir.php"> <li> HTML Nedir? </li> </a> <a href="table_kullanimi.php"> <li> Table Kullanımı </li> </a> <a href="renk_kodlari.php"> <li> Renk Kodları </li> </a> <a href="resim_uzerine_yazi.php"> <li> Resim Üzerine Yazı Yazmak </li> </a> <a href="link_etiketi.php"> <li> Link Etiketi </li> </a> </UL>

Hatırlayacağınız üzere HTML dersleri 4'te bir kelimeye bağlantı verebildiğimiz gibi bir etikete de bağlantı verebiliriz. Bağlantı etiketi olan A etiketini açtıktan sonra bağlantı vereceğimiz etiketi yazarız sonra da A etiketini kapatırız. Yukarıda LI etiketine bağlantı verdik.

Görüntüsü

type özelliği (parametresi) şu değerleri alabilir. circle disc square

Circle ile sırasız listeleme Örneği:

Şimdi de sırasız listede circle örneği verelim. Bu örnekte yukarıdaki 1. örnekten farklı olarak type özelliği kullanıyoruz. UL etiketinin açılışında type parametresine circle değerini verdik.
<ul type="circle"> <li>Select option</il> <li>Radio button</il> <li>input type text</il> <li>Submit button</il> <li>textarea (metin)</il> </ul>

Form Elemanları:

• Select option
• Radio button
• input type text
• Submit button
• textarea (metin)

Sıralı Listeleme
OL (Ordered)

Sıra numarası vererilerek yapılan listeleme şeklidir. Etiketteki O harfi Ordered kelimesinden gelir. Konuyu örnek ile somutlaştıralım.

2. Listeleme Örneği:

<H1> Hacker Listesi</H1> <ol> <li>Kevin Mitnick</li> <li>Albert Gonzalez</li> <li>Jonathan James</li> <li>Anonymous</li> <li>ASTRA</li> <li>Adrian Lamo</li> <li>Michael Calce</li> <li>Kevin Poulsen</li> <li>Gary McKinnon</li> <li>Julian Assange</li> </ol>


Yukarıkdaki sıralı listeleme etiketinin görüntüsü aşağıdaki gibi olur. Her bir liste satırına bir numara verilir. Numaralandırma da 1'den başlar.

2. Örnek (HTML Görüntüsü)

Type özelliği satır başına konacak sıra belirtecinin harf mi roma rakamı mı latin alfabesindeki sayılar mı olacağını belirler. (Type = Çeşit)

a küçük harf ile
A büyük harf ile
i Roma rakamı küçük
I Roma rakamı büyük
1 rakam (varsayılan)



HTML'de Listeleme yapmanın başka bir yolu yok mu? Elbette ki liste görünümü elde etmenin birden fazla yolu vardır. En kolay olanı yukarıda bahsettiğim şekilde olur.

<table><tr><td> etiketleri ile de listeleme görüntüsü oluşturulabilir.

Bunun yanında bir yazıya liste görüntüsü vermek için satır sonlandırma (satır başı) etiketi olan <br>'yi kullanmak gerekirdi. Bir de girinti vermek için & nbsp; özel karakterini kullanmamız gerekirdi. Çünkü birden fazla boşluk dahi versek bu boşluklar görüntülemede tarayıcılar tarafından teke indirilir. & nbsp; ile verilen boşluklar yanyana kaç tane olursa olsun görüntüye yansıtılır.

CSS Dersleri <br>     CSS Nedir?<br>     Etiket CSS Bağlantısı<br>     Margin ve Padding<br>     CSS Çerçeve<br>     Font ve Gölgeleme<br>

Sizin bir merhaba.html dosyanız olsa siz iki kelime arasına biraz boşluk vermek isteseniz ve 5 defa boşluk tuşuna bassanız kelimeleri birbirinden uzaklaştıramazsınız.

Bu tarz ihtiyaçları CSS ile gidereceğiz ama o zamana kadar nbsp ifadesinin başına & ve sonuna ; işaretlerini koyarak halledebilirsiniz.

Yukarıda CSS konularını listeleme yaparken alternatif kodlarını textarea da gösterdim. Fakat nbsp kodlarını göstermedi. nbsp kodlarını görmek için textarea üzerine sağ tıklayıp (Google Chrome) incele menüsünü seçer misiniz.



Gelecek ekranda textarea kapalı gelirse textarea içindekileri görmek için üzerine tıklayınız. Şu resimdeki HTML kodu görürsünüz.



HTML'deki kısaltma ve kelimelerin Türkçe olmaması zorlaştırır. Bu zorluğu biraz İngilizce öğrenerek kolaylaştırın lütfen. Hadi İngilizce öğrenmeye de başlayın. Programcı İngilizcesi diyelim biz buna.



Bizim hedefimiz 100 öncü yazılımcı yetiştirme çabasıdır. Bu ilk olarak Web Yazılım alanında olacaktır. Bu programcıların neler yapacağını göreceksiniz.

---