HTML Dersleri Ders#5 | Liste Etiketleri

HTML Liste Etiketleri

  • Liste Etiketi / Lists Tag

<li></li> etiketi ile basit listeleme yapar. Liste etiketi, içinde bulundukları sıralı listeler ve sıralı olmayan listelere göre önündeki şekil ve rakamlar değişiklik gösterebilecektir.

  • Sıralı Listeler / Ordered List

<ol></ol> etiketleri içine yazılan liste <li></li> etiketlerine 1.2.3.4 gibi sıra numaralı vererek yazılmasını sağlar. <ol> etiketine verilecek bir “type” özelliği ile bu özelliğe verilecek “1”, “A”, “I”,”i” değerleri ile rakam, roma rakamı, alfabe ile sıralanmasını sağlar. Kullanılacak “reversed” özelliğine herhangi bir değer girilmeden en büyük sayıdan aşağıya doğru sıralama gerçekleştirilebilir. Son olarak “start” özelliğine verilecek bir numara ile o numaradan başlayan sıralı listeler oluşturulabilir.

Örnek: Basit olarak sıralı listeler…

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<h3>Alışveriş Listesi</h3>
	<ol>
		<li>Yumurta</li>
		<li>Domates</li>
		<li>Ekmek</li>
	</ol>
</body>
</html>

Örnek Çıktısı;

Alışveriş Listesi

  1. Yumurta
  2. Domates
  3. Ekmek

Örnek: “type”, “start”, “reversed” özelliklerini kullanarak 50 den geriye roma rakamıyla sayan bir liste yapalım

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<h3>50'den geriye Roma Rakamı İle Mitolojik İsimler</h3>
	<ol type="I" start="50" reversed=" ">
		<li>Adrastos: Argos kralı, (Adraste)</li>
		<li>Meleagros : Kalydon kralının kızı.</li>
		<li>Okeanid'ler : Okeanos'un kızları. Kaynak dere ve akarsu tanrıçaları.</li>
		<li>Orpheus : Thrakia kralı Oiagros'un oğlu ve Yunanlıların efsanevi şairi.</li>
		<li>Pales : Romalıların koyun sürülerini koruyucusu olduğuna inandıkları tanrı.</li>
		<li>Thesprotlar : Epir halkına verilen ad.</li>
	</ol>
</body>
</html>
  • Sırasız Listeler

<ul></ul> etiketleri içine yazılan liste <li></li> etiketlerine kare (square), daire (circle), disk (disc)  gibi şekiller vererek yazılmasını sağlar. Bu şekillerin oluşmasını “type” özelliğinin alacağı “disc”, “square”, “circle” değerlere göre oluşacaktır.

Örnek: İç içe geçmiş sırasız listeler yaratalım,

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <ul>
        <li>Honda
            <ul type="square">
                <li>Civic</li>
                <li>Accord</li>
            </ul>
        </li>
        <li>Renault
            <ul type="circle">
                <li>Megane</li>
                <li>Clio</li>
            </ul>
        </li>
    </ul>
</body>
</html>
  • Açıklama Listeleri

<dl></dl> Description List (Açıklama Listesi) etiketlerinin içerisine <dt></dt> (Define Terms) ve <dd></dd> (Describes Each Terms) etiketlerinin yazılması ile oluşur.

Örnek:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<dl>
		<dt>Gazoz</dt>
		<dd>Asitli beyaz renkteki içecek</dd>
		<dt>Fanta</dt>
		<dd>Asitli turuncu renkteki içecek</dd>
	</dl>
</body>
</html>

Konu ile ilgili video dersi izlemek için tıklayınız.

Bir önceki “HTML Dersleri Ders#4 | HTML Karakter Biçim Etiketleri” konulu yazımı okumak için tıklayınız.

Olmalısın giriş yapmış yorum yazmak için

Proudly powered by WordPress   Premium Style Theme by www.gopiplus.com