DERS-6) Liste Elementleri

yorumsuz
161 kez okundu

Sitemizde görmek istediğimiz başlıkları ve yazıları başlık ve metin elementleri yardımıyla yazdırdık. Şimdi de yazdırmak istediğimiz listeleri sıralı (ordered list) ve sırasız (unordered list) olmak iki şekilde göstereceğiz. Yapacağımız listenin bir sırası varsa sıralı listeyi yoksa sırasız listeyi kullanacağız.

“ol” LİSTE ELEMENTİ: Sıralı liste (ordered list) oluşturmak için kullanılan liste elementidir. Sitemizde sıralı listeleri görüntülemek için “ol” liste elementinin yanında “li” elementini de kullanmamız gerekiyor. “li” elementini sırasız (unordered list) listelerde de kullanacağız. Bir örnek yapalım.

ol kod

Burda “Yapılacaklar Listesi” başlığını belirgin olsun diye <strong>…</strong> elementleriyle yazdık. Sıralı olmasını istediğimiz adımları <li> elementi yardımıyla tek tek <ol>…</ol> liste elementlerinin arasına yazdık. Bu kodun ekran çıktısı

çıktı1

gibi olacaktır. Sıralı liste elementi olan <ol> elementini kullanarak oluşturduğumuz yazılar sitede yanında 1., 2., 3. gibi önüne sıralayacak rakamlar geldi.

NOT: Ekran çıktısında 1.,2.,3. gibi normal rakamlar yerine roma rakamları ile bir çıktı üretmek istiyorsak “<ol type=”I”></ol>” tag’ının arasına <li></li> tag’larını ekleyerek yazabilir.
NOT2:  Ekran sıralamanın a.,b.,c… gibi olmasını istiyorsak “<ol type=”a”></ol>”  tag’ının arasına <li></li> tag’larını ekleyerek yazabilir.
NOT3:  “<ol type=”a”></ol>” buradaki a harfini A yapsaydık sıralama büyük harflerle
olurdu. Aynı şekilde roma rakamları için de “<ol type=”ı”></ol>” kodu ile
sıralama küçük olacaktı.

“ul” LİSTE ELEMENTİ:  unordered list (sıralı olmayan liste) <ul></ul>
sırasız listeler için kullanılır.Yani hangi işlemi önce yaptığımızın önemi yoktur. Örnek olarak aşağıdaki kodları yazalım.

ul kod

Yine başlığı <strong>…</strong> elementi yardımıyla yazdıktan sonra sırasız listemizin elemanlarını <li> elementi yardımıyla <ul>…</ul> liste elementin arasına yazdık. Bu kodun ekran çıktısı

çıktı2

şeklinde olacaktır.

NOT: Yukarıdaki kodun çıktısındaki sıralama işaretleri içi boş yuvarlaktır.Biz bunun
siyah kare olmasını istiyorsak <ul style=”list-style-type: square”></ul>
kodunu kullanabiliriz.
NOT2: İçi dolu yuvarlak yapmak içinse <ul></ul>
kodu kullanılabilir.

 

EK-NOT: Hem “ol” de hem de “ul” de kullanılan <li></li> tag’ı List İtem(li) dan gelir.
Listedeki üyelerin yazılması için kullanılır.

Bir sonraki yazımızda “Link ve Resim Elementleri” konusunu işleyeceğiz. Görüşmek üzere,

İyi günler…:)


Sosyal Medyada Paylaş Facebook Twitter Google+
Etiketler: ,
Eklenme Tarihi: 6 Ekim 2015

Facebook Yorumları

Konu hakkında yorumunuzu yazın


Time limit is exhausted. Please reload the CAPTCHA.