Web Tasarım ve Programlama #2: Listeleme Etiketleri

Web Tasarım ve Programlama #2: Listeleme Etiketleri

 

Kullanılacak etiketler: <ol> <ul> <li>

<OL>:  Sıralı liste oluşturmak için kullanılır.
Word programında da listelemeler le aynıdır…

Sıralı listemelerde Sayılarla(1. 2. 3…), Harflerle( a  b. c. – A. B. C…), Roma rakamlarıyla ( I, II, III,) yapılabilir…

ÖRN:

<ol>
<li>Web Tasarım ve Programlama</li>
<li>Grafik Animasyon</li>
</ol>

 

Type parametresi kullanarak listenin rakamla mı harfle mi başlayacağını belirleyebiliriz. “A” harfi yerine küçük “a” harfi yazılırsa sıralama a, b, c, …. şeklinde küçük harflerle olacaktır.

<ol type=”A”>
<li>Web Tasarım ve Programlama</li>
<li>Grafik Animasyon</li>
</ol>

 

“I” harfi yerine küçük”i” harfi yazılırsa, sıralama i, ii, iii,….şeklinde küçük roma rakamları ile yapılacaktır.

<ol type=”I”>
<li>Web Tasarım ve Programlama</li>
<li>Grafik Animasyon</li>
</ol>

 

Sıralamanın her zaman “1” den veya “A” dan başlamasını istemeyebiliriz. Bu tür durumlarda Start parametresi kullanılır. Start parametresinin her zaman sayı olması gerekmektedir. Örneğin sıralamayı “C” harfinden başlatmak istiyorsak start değerine “C” yazmak yerine “3” yazmak zorundayız.

<ol type=”A”  start=”3″>
<li>Web Tasarım ve Programlama</li>
<li>Grafik Animasyon</li>
</ol>

 

<UL> : Sırasız listelerde kullanılır..

<ul>
<li>Web Tasarım ve Programlama</li>
<li>Grafik Animasyon</li>
</ul>

 

Type parametresi ile kullanacağınız madde işaretinin şeklini belirleyebilirsiniz. Type ile kullanılan parametreler disc (içi dolu daire), circle (içi boş daire) ve square (içi dolu kare)’dir.

<ul type=”square”>veya <ul type=”disc”>veya <ul type=”circle”>
<li>Web Tasarım ve Programlama</li>
<li>Grafik Animasyon</li>
</ul>

 

 Örnek Uygulamalar:

<ul type=”square”>
<li>Web Tasarım Dersi </li>
<ol  type=”a” start=”1″
<li>Tasarımın Temel İlkeleri </li>
<li>HTML ile Basit Web İşlemleri</li>
</ol>
<li>Grafik ve Animasyon Dersi </li>
<ol start=”3″ type=”a”>
<li>Animasyon </li>
<li>Grafik Düzenleme </li>
<ol start=”1″ type=”i”>
<li>Photoshop </li>
<li>Fireworks</li>
</ol>
</ol>
</ul>

 

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir