HTML Liste Yapısı!

#HTML

html listeleri. html de iki ana listeleme türü vardır. biri “ul” yani sırasız listeleme türüdür, diğeri ise “ol” yani sıralı listeleme türüdür.

HTML Listeleri!
HTML Listeleri!

 HTML Listesi Örneği;

See the Pen html sıralı sırasız listeler by ArmyYazılım (@armyyazilim) on CodePen.

Sırasız HTML Listesi

Sıralanmamış bir liste  <ul> etiketi ile başlar . Her liste maddesi <li> etiketi ile başlar.

Liste öğeleri varsayılan olarak kurşunlarla (küçük siyah daireler) işaretlenir:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Sırasız HTML Listesi – Liste Öğesi İşaretleyicisini Seçin

CSS list-style-typeözelliği, liste öğesi işaretleyicisinin stilini tanımlamak için kullanılır:

DeğerAçıklama
disc Liste öğesi işaretleyicisini bir madde imine ayarlar (varsayılan)
circle Liste öğesi işaretçisini bir daireye ayarlar
square Liste öğesi işaretleyicisini kareye ayarlar.
none Liste öğeleri işaretlenmeyecek.

Örnek;

See the Pen html sırasız listelerin işaretleri by ArmyYazılım (@armyyazilim) on CodePen.

Sıralı HTML Listesi

Sıralı bir liste <ol> etiketi ile başlar . Her liste maddesi <li> etiketi ile başlar.

Liste öğeleri varsayılan olarak sayılarla işaretlenecektir:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Sıralı HTML Listesi – Tür Özelliği

typeÖznitelik etiketi, liste öğesi işaretleyici türünü tanımlar:

TipAçıklama
type=”1″ Liste öğeleri sayılarla numaralandırılır (varsayılan)
type=”A” Liste öğeleri büyük harflerle numaralandırılır
type=”a” Liste öğeleri küçük harflerle numaralandırılır
type=”I” Liste öğeleri büyük harfli Roma rakamlarıyla numaralandırılır
type=”i” Liste öğeleri küçük harfli Roma rakamlarıyla numaralandırılır

Örnek;

See the Pen html sıralı liste tipleri by ArmyYazılım (@armyyazilim) on CodePen.

HTML Açıklama Listeleri

HTML ayrıca açıklama listelerini de destekler.

Bir açıklama listesi, her bir terimin açıklamasını içeren bir terimler listesidir.

<dl>Etiket, açıklama listesi tanımlar <dt>  etiket terimi (ad) tanımlar ve  <dd> etiket her terimin alt açıklamasını yapmanızı saplar.

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

Örnek;

See the Pen dl liste by ArmyYazılım (@armyyazilim) on CodePen.

İç İçe HTML Listeleri

Liste iç içe geçebilir (listelerin içindeki listeler):

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Örnek;

See the Pen html iç içe listeler by ArmyYazılım (@armyyazilim) on CodePen.

Not: Liste öğeleri, yeni liste ve görüntüler ve bağlantılar gibi diğer HTML öğelerini içerebilir.

Kontrol Listesi Sayımı

Varsayılan olarak, sıralı bir liste 1’den saymaya başlayacaktır. Belirtilen bir numaradan saymaya başlamak istiyorsanız, start niteliği kullanabilirsiniz :

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Çıktısı;

See the Pen html listeleri istenilen sayıda saymaya başlatma by ArmyYazılım (@armyyazilim) on CodePen.

CSS ile Yatay Liste

HTML listeleri CSS ile birçok farklı şekilde düzenlenebilir.

Popüler bir yöntem, bir listeyi yatay olarak stillendirmek, bir gezinme menüsü oluşturmaktır:

Örnek;

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Çıktısı;

See the Pen html yatay menü by ArmyYazılım (@armyyazilim) on CodePen.

Bölüm özeti

<ul>Sırasız bir liste tanımlamak için HTML öğesini kullanın

list-style-typeListe öğesi işaretleyicisini tanımlamak için CSS özelliğini kullanın

<ol>Sıralı bir liste tanımlamak için HTML öğesini kullanın

typeNumaralandırma türünü tanımlamak için HTML özelliğini kullanın

<li>Bir liste öğesini tanımlamak için HTML öğesini kullanın

<dl>Bir açıklama listesi tanımlamak için HTML öğesini kullanın

<dt>Açıklama terimini tanımlamak için HTML öğesini kullanın

<dd>Bir açıklama listesindeki terimi tanımlamak için HTML öğesini kullanın

Listeler, listelerin içine yerleştirilebilir

Liste öğeleri başka HTML öğeleri içerebilir

CSS özelliğini kullanın: float:leftveya display:inlineyatay bir listesini görüntülemek için.

HTML Listesi Etiketleri

EtiketlerAçıklama
<ul> Sırasız bir liste tanımlar
<ol> Sıralı bir liste tanımlar
<li> Bir liste öğesini tanımlar
<dl> Bir açıklama listesi tanımlar
<dt> Açıklama listesindeki bir terimi tanımlar.
<dd> Bir açıklama listesindeki terimi açıklar

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …


Bir cevap yazın

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

İçerik Metası
İbrahim Bozkurt //////