Html Dersleri 5: Listeleme Etiketleri | Kodlama Merkezi

Html derslerimizin beşincisi olarak listeleme etiketlerini düşündüm. Listeleme etiketleri derken kelime işlemci programlarında aşina olduğunuz sıralı liste ve madde işaretli listeler htmlde de sıklıkla kullanılır. Bu etiketler verilerin düzgün şekilde gösterilmesinin yanında her türlü menünün (yatay,dikey ve açılır menü) yapısında da temel taş olarak yer alırlar.

<ol>, <ul> ve <li> Etiketleri Kullanımı

Öncelikle listeleme de kullanılan 3 tane etiketin ne işe yaradığının bilinmesi gerekir.

<ol> :Ordered (sıralı) liste oluşturmak için kullanılır. Alt alta başında 1,2,3 olacak şeklinde.

<ul> :Unordered (sırasız) liste oluşturmak için kullanılır. Alt alta başında madde işaretleri olacak şekilde.

<li> :Listenin her bir öğesini oluşturmak için kullanılır.

Konunun daha iyi anlaşılması için örnekler üzerinden ilerleyelim. 1-Sıralı liste örneği:

12345678

<p>Meyveler</p> <ol><li>Armut</li><li>Elma</li><li>Portakal</li><li>Muz</li></ol>

2-Madde işaretli liste örneği:

12345678

<p>Sebzeler</p> <ul><li>Kabak</li><li>Marul</li><li>Lahana</li><li>Domates</li></ul>

Yukarıdaki örneklerde anlaşılacağı üzere sadece <ul> ve <ol> u değiştirmekle listenin nasıl görüntüleneceğini değiştirebiliyoruz.

Listeleme Etiketleriyle Birlikte Kullanılan Parametreler

Bu parametreler yardımıyla listenin başlangıç değeri ve liste öğelerinin biçimi değiştirilebilir. Bu değişiklikler css kodları ile de yapılabildiğinden çok fazla üzerinde durmayacağım.

type parametresi: Listeleme etiketinin türünü değiştirir.

<ol type=”A”> şeklinde bir kullanımda 1,2,3 yerine A,B,C yazılır.

• A, alfabetik bir liste oluşturur. Küçük harfi de kullanılabilir.
• I, roma rakamı ile liste oluşturur.Küçük harfide kullanılabilir.

<ul type=”square”> şeklinde bir kullanımda madde işaretleri kare şeklinde görülür.

• square: kare şeklinde liste oluşturur.
• circle: içi boş daire şeklinde liste oluşturur.
• disc: içi dolu daire şeklinde liste oluşturur.

start parametresi: Bu parametre listeyi istenilen değerden başlatma için kullanılır.

<ol start=”C”> şeklinde bir kullanımda liste C harfinden başlar ve artarak devam eder.

İç içe (Hiyerarşik) Liste Oluşturma

Bazen tek bir liste kullanmak, işimizi halletmek için yeterli olmayabilir. Örneğin listedeki bir öğeye alt öğeler eklemek isteyebiliriz. Ayrıca açılır menü yapmak içinde iç içe menü kullanımını bilmek zorundayız.

Örnek olarak İç Donanım ve Dış Donanım birimlerini gösteren bir liste oluşturalım.

12345678910111213

<ol type="A"><li>İçDonanımBirimleri</li>               <ul>               <li>Anakart</li>               <li>İşlemci</li>               <li>Ram</li>               </ul><li>DışDonanımBirimleri</li>               <ul type="square">               <li>Monitör</li>               <li>Klavye</li>               </ul><ol>

Not: Bu tarz listelerde kodlamayı karıştırmamak için öncelikle en dıştaki (yukarıdaki örnekte iç ve dış donanım birimleri) liste oluşturulur. Daha sonra iç listelere geçilir.

Not2: Listeleri karıştırmamak için girintili şekilde yazmak işinizi kolaylaştıracaktır.

Bu günkü dersimizde listeleme etiketlerinin kullanımını anlatmaya çalıştım. Konuyla ilgili anlamadığınız yerleri bana iletebilirsiniz. Bir sonraki derste html ile form öğelerinin kullanımını anlatacağım. Kolay gelsin.