HTML Liste Oluşturma Ve Çeşitleri - HTML Dersleri - 6

Trang chủ » Html Açıklama Listesi » HTML Liste Oluşturma Ve Çeşitleri - HTML Dersleri - 6

Có thể bạn quan tâm

HTML Öğreniyorum
HTML Öğreniyorum Görseli

HTML Dersleri 6 anlatımımda HTML’de liste oluşturma, düzenli ve düzensiz listeler ve bu listelere öznitelikler tanımlama gibi konuları işleyeceğim.

Listeler

Bilindiği gibi alt alta yazılmış şeylerin bütününe liste denir. Örneğin markete gidip almanız gereken şeyleri bir kağıda listelersiniz (ben genelde annem bir şeyler almak için beni markete gönderdiği dönemlerde siparişlerini eksik almamak için bir kağıda listelerdim). Bu sadece bir örnekti. İş hayatımda veya herhangi bir organizasyonda yapılacak işleri atlamadan eksiksiz yapmak için bir yapılacaklar listesi oluştururum, kampa çıkacağım zaman yanıma alacağım eşya ve malzemelerin listesini çıkartırım.

Bu listelerin iki çeşidi vardır, düzenli (sıralı) ve düzensiz (sırasız) listeler.

Sıralı / Düzenli HTML Liste (Ordered List)

HTML kodlarıyla bir sıralı liste oluşturacak olursak kullanmamız gereken etiket <ol> etiketidir. “Sıralı Liste” ifadesinin İngilizce karşılığı olan “Ordered List” kelime grubunun ilk harfleri olan kullanılmıştır. Listedeki her bir öğe <li> etiketiyle tanımlanır. Bu etiketlerin kapanış etiketleri de mevcuttur.

Örnek verecek olursak:

<html> <head> <title>İlk Sayfam</title> </head> <body> <ol> <li>HTML Dersleri</li> <li>CSS Dersleri</li> <li>PHP Dersleri</li> </ol> </body> </html>

Bu kodlar tarayıcımızda şu şekilde görüntülenir:

  1. HTML Dersleri
  2. CSS Dersleri
  3. PHP Dersleri

Sıralı listeler herhangi bir öznitelik tanımlanmadan (üstteki örnekte olduğu gibi) kullanılırsa varsayılan olarak 1, 2, 3, … gibi listelenecektir. Bu satır başındaki sıralama şeklini A, B, C, … gibi yapmak isterseniz bir type=”” özniteliği eklememiz gerekecektir. Örnek verecek olursak:

<ol type="A"> <li>HTML Dersleri</li> <li>CSS Dersleri</li> <li>PHP Dersleri</li> </ol>

Bu sefer görünüm şu şekilde olacaktır:

  1. HTML Dersleri
  2. CSS Dersleri
  3. PHP Dersleri

type özniteliğine “A” (büyük harfle) tanımlarsak yukarıdaki gibi bir liste oluşturmuş oluruz. “a” (küçük harfle) değeri tanımlanırsa bu sefer liste öğeleri başında küçük harflerle a, b, c,… şeklinde olur. “I” (büyük harfle) değeri tanımlanırsa listede öğelerin başında Roma rekamları I, II, III, IV,… şeklinde olur. “i” (küçük harfle) değeri tanımlanırsa i, ii, iii, iv,… gibi görünecektir.

Sırasız / Düzensiz HTML Liste (Unordered List)

Sırasız / düzensiz listeler de yine ifadenin İngilizce karşılığının baş harflerinden oluşan <ul> etiketi ile başlar. Liste öğeleri yine <li> ile tanımlanır. Bunların da kapanış etiketleri vardır.

<ul> <li>HTML Dersleri</li> <li>CSS Dersleri</li> <li>PHP Dersleri</li> <ul>

Şu şekilde görünür:

  • HTML Dersleri
  • CSS Dersleri
  • PHP Dersleri

Ayrıca bu etikette herhangi bir öznitelik tanımlanmazsa varsayılan olarak yukarıdaki gibi görünür. Ancak <ul> etiketine style=”” özniteliğine list-style-type:circle, list-style-type:square veya list-style-type:none değerini tanımladığınızda neler olacağını deneyip görebilirsiniz. style özniteliği ile tanımladığımız bütün özellikler CSS ile de tanımlanabilir. Detaylarını CSS derslerinde işleyeceğim.

<ul style="list-style-type:square"> <li>HTML Dersleri</li> <li>CSS Dersleri</li> <li PHP Dersleri</li> </ul>

Genel ve temel anlamda listelemeler bu şekildedir. Ancak HTML5 ile birlikte bir de “Açıklama Listeleri” (Description List) de işlenmelidir. Bu tip listeler ise <dl> etiketiyle tanımlanır. Açıklama listelerinin başlıkları <dt> etiketiyle, açıklama öğeleri de <dd> etiketiyle tanımlanır.

<dl> <dt>HTML Dersleri</dt> <dd>Temel Düzeyde HTML Dersleri</dd> <dd>Orta Seviye HTML Dersleri</dd> <dd>İleri Seviye HTML Dersleri</dd> <dt>CSS Dersleri</dt> <dd>CSS derslerinin verildiği bölümdür</dd> <dt>PHP Dersleri</dt> <dd>Başlangıç Seviyesi PHP Dersleri</dd> <dd>Orta Seviye PHP Dersleri</dd> <dd>İleri Seviye PHP Dersleri</dd> </dl>

Bu kod yumağı ise aşağıdaki gibi görünür:

HTML Dersleri Temel Düzeyde HTML Dersleri Orta Seviye HTML Dersleri İleri Seviye HTML Dersleri CSS Dersleri CSS derslerinin verildiği bölümdür PHP Dersleri Başlangıç Seviyesi PHP Dersleri Orta Seviye PHP Dersleri İleri Seviye PHP Dersleri

Bu dersimizde HTML’de düzenli ve düzensiz listeler nasıl oluşturulur, açıklama listeleri nedir ve nasıl oluşturulur gibi konuları gördük. Bir sonraki dersimiz olan HTML Tablo Oluşturma ve Özellikleri yazımda görüşmek üzere…

Từ khóa » Html Açıklama Listesi