25 Ocak 2014 Cumartesi

HTML Dersleri 8 Listeler

Merhabalar. Bu anlatımımda HTML in önemli konularından biri olan listeleme yöntemleri ve parametrelerinden bahsetmeye çalışacağım.

Bir internet sayfasında yazdığımız yazının daha düzenli görünmesi için listeleme yöntemlerini kullanırız.

Listeleme yöntemlerini 3 grupta inceleyeceğiz.

1. Sırasız Listeler


En basit sırasız listenin başlangıç etiketi <ul> ve bitiş etiketide </ul> dür. Bu etiketler içinde ise sıralamak istediğimiz ifadelerin etiketi de <li>....</li> dir.

Hemen küçük bir örnek ile görelim.


İstediğimiz şey şu, bir bilgisayar donanımından 3 parçayı sırasız listeleme. Başlığımızda Bilgisayar Donanımı olsun.



Geçen derslerde öğrendiklerimizide işin içine katarak biraz daha görsel açıdan güzel hale getirelim.



Sırasız liste oluşturma etiketi olan <ul> ifadesi varsayılan olarak disc yani daire ifadesini belirteç olarak seçer. Ama biz istersek kare yada çember ifadelerini type parametresi ile belirterek yapabiliriz.

Yukarıdaki örneğimizde kare için görelim.

Kullanımı:

<ul type="square">.... </ul> şeklindedir.



Eğer çember yapmak isteseydikte type ile circle ifadesini kullanacaktık.

Tabi biz mesela sadece bir tane şıkkın belirtecinin kare birinin çember olmasını istesek o zaman aynı şekilde type parametresi ile bu ifadeleri <li> etiketi içinde yazacaktık. Hangi <li> içine yazarsak sadece o şıkkı etkileyecektir.

2. Sıralı Listeler


Sıralı listelerde listelemek istediğimiz ifadeleri bir sayı yada bir sıra ile belirtmek istediğimizde kullandığımız bir listeleme yöntemidir. Genel etiket <ol>....</ol> dür.

<ol> etiketi standart olarak 1 ifadesinden başlayan bir değere sahiptir. Ama bunun yanında sıralama için kullanabileceğimiz 

A
a
l
i

sıralama değerlerini alabilir. 

Küçük bir örnek ile görelim. Şu anda Süper ligin ilk 3 ünü gösterelim.




İşleri biraz daha karmaşık ve görüntüsel olarak güzel hale getirelim. Mesela değerlerin i şeklinde roma rakamları ile gösterelim.




Diyelimki Süper Ligdeki son 3 lüyü 16 dan başlayarak sıralamak istiyorum. İşte bu iş için imdadımıza <ol> etiketinin start parametresi yetişiyor. 

Sıralama hangi değerden başlasın istiyorsak start parametresine o değeri veriyoruz.

Kullanımı:

<ol start="16">....</ol>

Örneğimizle görelim.



Mesela bir sıralama yapacağız ama 3 8 ve 11. takımları listemizde göstermek istiyoruz. O zaman ne yapacağız?

Bu sorunumuza da <li> etiketinin value parametresi ile çözüm buluyoruz.

Kullanımı:

<li value="3">....</li>

Burada hangi değeri verdiysek diğer etiket kapsamındaki ifade sadece bu değeri alır. Diğerlerini etkilemez.

3. Tanımlama Listeleri


Bir alt satırında yukarıdaki ifadeyi açıklamaya çalıştığımız bir liste oluşturmak istiyorsak tanımlama listesinin özelliklerini kullanırız. Ne demek istedim bir örnekle daha net görelim.

Diğer listelere göre biraz daha fazla etiketimiz var.



Öncelikle tarayıcıya <dl> etiketi ile bir tanımlama listesi oluşturduğumuzu bildiririz.


Daha sonra tanımlayacak olduğumuz ifadeyi belirtmek için <dt>....</dt> etiketleri kullanılır. 

Hemen bu etiket altına da ifadenin açıklaması <dd>...</dd> etiketleri arasına yazılır.

Görelim...








Bol resimli yararlı bir anlatım oldu umarım. Bu dersinde böylece sonuna geldik. Ve HTML de önemli bir konuyu daha yolumuzdan kenara ittik. Çalışan arkadaşlarıma kolaylıklar dilerim. Bir sonraki derste buluşma ümidiyle vesselam.


KONUNUN YAZARI NCFKR
DİĞER KONU ANLATIMLARI İÇİN TIKLA VE ÖĞREN

Hiç yorum yok:

Yorum Gönder