Html Dersleri (6.Bölüm)

Sıralı Listeler Yaratmak
Sıralı listelerden kastımız kelime yada cümlelerinizi ya da herhangi bir şeyi numaralı, alfabeli, ya da roma rakamlı sıralı olarak göstermektir.Yani;
1.Html
2.Perl
3.Eperl

Bunu <OL> imi ile sağlarız.Ancak bu im tek başına kullanılmaz sırayı belirtmek için de <LI> imi ile birlikte kullanılır.Yani sıralanacak olan şeyin başına <LI> getirmeliyiz.

Kullanımı:
<OL>
<LI>Html</LI>
<LI>Perl</LI>
<LI>Eperl</LI>
</OL>

Bunun sonucu yukarıdaki örnek ile aynıdır.

Görüldüğü gibi <OL> ile başlayıp </OL> ile bitiyor.Bu sırayı istediğiniz kadar yapabilirsiniz.

<LI></LI> ler <OL></OL> arasında olmalı.

Sıramızı ister sayı ister alfabe isterseniz de roma rakamı olarak belirtebiliriz.

Sıralı Listeyi Sayı Olarak Atamak: Yukarıdaki gibi yapıldığı zaman listemiz sayılı olur.

Sıralı Listeyi Büyük Harf Alfabe Olarak Atamak:
<OL TYPE="A">
<LI></LI>
<LI></LI>
</OL>

Listeyi büyük harf alfabe olması için <OL> iminin özniteliği olan TYPE imi ile ve büyük "A" harfiyle yaparız.

Sıralı Listeyi Küçük Harf Alfabe Olarak Atamak:
<OL TYPE="a">
<LI></LI>
<LI></LI>
</OL>

Büyük "A" yı küçük "a" olarak değiştirirsek tabii ki küçük sıralı olacaktır.Bunu anlamış olmanız lazım.

Sıralı Listeyi Büyük Roma Rakamları Olarak Atamak:
<OL TYPE="I">
<LI></LI>
<LI></LI>
</OL>

Sıralı Listeyi Küçük Roma Rakamları Olarak Atamak:
<OL TYPE="i">
<LI></LI>
<LI></LI>
</OL>

Tabii ki OL ve TYPE arasında boşluk var.

İsterseniz sıralı listenizi belli bir sayı,harf yada roma rakamından başlatabilirsiniz.Yani 1.2.3. değil de 5.6.7.8.9 gibi.

Bunun için <OL> iminin özniteliği olan START imi ile gerçekleştireceğiz.

Kullanımı:
<OL TYPE="A" START="5">
<LI></LI>
<LI></LI>
</OL>

START değeri her zaman bir sayı olmalı.Yani sırayı alfabe olarak atamak ve "f" den başlamak istersek START değerini "f" değil "6" yapmalıyız. TYPE değerini de küçük "a" yapmalıyız.

Şekil -18/40 Şekil -19/40
Sıralı Olmayan Listeler Yaratmak
Sıralı olmayan listeler ise sırayı sayı, harf yada roma rakamı yerine bir şekil ile belirlemek anlamındadır.Yani sıramızı küçük kare, yuvarlak, oval vb.. şekillerde yapmak içindir.

Burada <OL> imini değil de <UL> imini kullanacağız.Sırayı da yine özniteliği olan <LI> ile belirteceğiz.
Kullanımı:
<UL>
<LI>[color:cd6b="Red"]</LI>
<LI></LI>
</UL>

Biz sıralı listelerde sıra tipini belirtmek için TYPE özniteliğini kullanıyorduk.Burada da onu kullanacağız.

Listeyi KARE(SQUARE) Olarak Atamak: TYPE="SQUARE"
<UL TYPE="SQUARE">
<LI></LI>
</UL>

Listeyi Yuvarlak Dolu Olarak Atamak: TYPE="DISC"
<UL TYPE="DISC">
<LI></LI>
</UL>

Listeyi Yuvarlak İçi Boş Olarak Atamak: TYPE="CIRCLE"
<UL TYPE="CIRCLE">
<LI></LI>
</UL>

Bunların her hangi bir başlangıç değeri olamaz değil mi?

Şekil -20/40
Tanım Listeleri Yaratmak
Bir kavramı açıklayacağınızı düşünün.Ama yanına iki nokta yada eşittir(: yada =) koymadan kavramın bir alt satırından ve kavramın uygun bir yerinden başlamak koşuluyla tanımını vereceğinizi düşünün.

Örneğin;
HTML NEDİR?
Web sayfası tasarlamak için ve metin biçimlendirmek için kullanılan bir dildir.

Bu şekilde yapılan bir açıklama daha hoş görünebilir.Bunu yapmak için biz <DL>[color:cd6b="Blue"]</DL> imlerinden ve bunlarla kullanılan imlerden yararlanacağız.

Kullanımı:
<DL>
<DT>Tanımını yapacağınız kavram yada kelimeyi yazın</DT>
<DD>Yukarıda yazmış olduğunuz kelime yada kavram için açıklamanızı yazın.</DD>
</DL>

Görüldüğü gibi <DL> ile birlikte <DT> ve <DD> imleri kullanılmakta.

<DT></DT> arasına yazacağınız kelimenin kısa olmasına dikkat edin.Uzun olması kötü görünmesine neden olabilir.

Şekil -21/40
İç İçe Listeler Yaratmak
İç içi listeler yaratmak listeleri iyi bir şekilde kullanmaktan başka bir şey değildir.

Öncelikle hangi liste imini kullanacağınıza ve nerde kullanacağınıza karar verin.Sıranın tipini de belirleyin.

Örneğin şöyle bir sıra yapabilirsiniz.
A. HTML
1. web
2.site
3.tasarım
B. PERL
1.script
2.cgi

Tabii ki burada sıralı olmayan listeleri de rahatlıkla kullanabilirsiniz.

Örnek:
<OL> TYPE="A">
<LI>HTML</LI>
<OL>
<LI>Web</LI>
<LI>site</LI>
<LI>tasarım</LI>
</OL>
<LI>PERL</LI>
<OL>
<LI>script</LI>
<LI>cgi</LI>
</OL>
</OL>