HTML de liste oluştururken ul, ol ve dl etiketleri kullanılır. Html attribute ile de liste elemanlarının önündeki şekilleri değiştirilir.
Sırasız listemizi oluştururken <ul>
etiketini kullanıyoruz. Sırasız olmasından kasıt listedeki elemanların başında 1,2,3.. veya a,b,c.. ve benzeri şeklinde olmamasıdır. Hemen örneklendirelim.
<ul>
<li>Çay</li>
<li>Kahve</li>
<li>Süt</li>
</ul>
Sırasız liste oluştururken varsayılan olarak liste elemanlarının başında madde imi şeklinde yuvarlak bir nokta gelir. Eğer bunu değiştirmek istersek CSS ile ya da <ul>
etiketimizin içinde kullanmak üzere bir paramatre ile yapabilriz. Paramtre adımız type=""
disk = madde imi şekline ayarlar (varsayılan).
circle = daire şekline ayarlar.
square = kare şekline ayarlar.
none = herhangi bir şekil olmaz.
Hemen örneklendirelim.
<ul type="square">
<li>Ayva</li>
<li>Kavun</li>
<li>Karpuz</li>
</ul>
Sonuç aşağıda'ki gibidir.
Sıralı listeler <ol>
etiketi ile oluşturulmaktadır. 1-2-3 /A-B-C gibi düzenli sıra şeklinde belirtilecek liste türlerinde kullanılır. Hemen örneklendirelim.
<ol>
<li>Çay</li>
<li>Kahve</li>
<li>Su</li>
</ol>
<ol>
sıralı listenin standart liste başır 1-2-3 diye gelmektedir.
Bu maddelerin belirme türlerini harflerle, romen rakamlarıyla belirtebiliriz.
type="A" –> Sıralamayı büyük harflerle A’dan başlayarak yapar.
type="a" –> Sıralamayı küçük harfle a’dan başlayarak yapar.
type="I" –> Sıralamayı büyük harflerle romen rakamlarıyla yapar.
type="i" –> Sıralamayı küçük harflerle romen rakamlarıyla yapar
Hemen bir örnek verelim.
<ol type="A">
<li>Çay</li>
<li>Kahve</li>
<li>Su</li>
</ol>
Sıralı ve Sırasız liste örneklerinin tarayıcı çıktısı aşağıda'ki gibidir.
<dl>
etiketi tanım listeleri oluşturmak için kullanılır , İngilizce'de definition list cümlesinin kısaltmasıdır tanım listesi anlamına gelmektedir.
<dt>
etiketi tanım listesinin elemanlarını oluşturmak için kullanılır , İngilizce'de definition item cümlesinin kısaltmasıdır.
<dd>
etiketi ise tanım liste elemanlarını tanımlar.
Bu kodların hiyerarşi sırası şu şekildedir. <dl> , <dt> , <dd>
Hemen bir örnek verelim.
<dl>
<dt>Meyve Çeşitleri</dt>
<dd>Ayva</dd>
<dd>Elma</dd>
<dd>Armut</dd>
<br/>
<dt>Sebze Türleri</dt>
<dd>Patlıcan</dd>
<dd>Kabak</dd>
<dd>Pırasa</dd>
</dl>
Yukarıdaki kodların tarayıcıdaki çıktısı aşağıdaki gibi olacaktır.
Sorular (0)