En son web geliştirme öğreticiler

HTML Listeler

❮ Önceki Sonraki Bölüm ❯

Bir sırasız listesi ve HTML sıralı bir liste örneği:

Sırasız liste:

  • madde
  • madde
  • madde
  • madde

Sıralı Liste:

  1. İlk madde
  2. İkinci madde
  3. Üçüncü öğe
  4. Dördüncü madde

Sırasız HTML Listeleri

Sırasız bir listeyi ile başlar <ul> etiketi. Her liste öğesi ile başlar <li> etiketi.

Liste öğeleri mermi ile işaretlenecektir (small black circles) :

Örnek

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

Kendin dene "

Sırasız HTML Listeleri - Style Özellik

Bir style özelliği, işaretleyicinin stil tanımlamak için, bir sırasız listeye eklenebilir:

stil Açıklama
list-style-type:disc Liste öğeleri kurşunla işaretlenir (default)
list-style-type:circle Liste öğeleri çevreler ile işaretlenecektir
list-style-type:square Liste öğeleri kareler ile işaretlenecektir
list-style-type:none liste öğeleri işaretli olmayacak

Disc :

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Kendin dene "

Circle :

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Kendin dene "

Square :

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Kendin dene "

None :

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Kendin dene "

Sıralı HTML Listeleri

Sıralı liste ile başlar <ol> etiketi. Her liste öğesi ile başlar <li> etiketi.

Liste öğeleri numaraları ile işaretlenir:

Örnek

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Kendin dene "

Sıralı HTML Listeleri - Type Özellik

Bir type özelliği, işaretleyicinin türünü tanımlamak için, sıralı bir listeye eklenebilir:

tip Açıklama
type="1" Liste öğeleri numaraları ile numaralandırılmış olacaktır (default)
type="A" Liste öğeleri büyük harf olan numaralanacak
type="a" Liste öğeleri küçük harfle numaralanacak
type="I" Liste öğeleri büyük Romen rakamlı numaralanacak
type="i" Liste öğeleri küçük Romen rakamlı numaralanacak

Sayılar:

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Kendin dene "

Büyük harfler:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Kendin dene "

Küçük harfler:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Kendin dene "

Büyük Romen Numaraları:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Kendin dene "

Küçük Roma Numaraları:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Kendin dene "

HTML Açıklama Listeleri

HTML de açıklama listelerini destekler.

Bir açıklama listesi her bir terimin bir bilgi ile, terimler bir listesidir.

<dl> etiketi, açıklama listesi tanımlar <dt> etiket terimi tanımlar (name) ve <dd> etiketi her dönem açıklanmaktadır:

Örnek

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

İçiçe HTML Listeleri

Liste iç içe olabilir (lists inside lists) :

Örnek

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
Kendin dene "

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

Yatay Listeleri

HTML listeleri CSS ile çok farklı şekillerde tarz edilebilir.

Popüler bir şekilde, yatay olarak görüntülenecek bir liste stili için:

Örnek

<!DOCTYPE html>
<html>

<head>
<style>
ul#menu li {
    display:inline;
}
</style>
</head>

<body>

<h2>Horizontal List</h2>

<ul id="menu">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ul>

</body>
</html>
Kendin dene "

Biraz ekstra tarzı ile, bunu bir menü gibi gösterebilen:

Örnek

ul#menu {
    padding: 0;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: orange;
}
Kendin dene "

Bölüm özeti

  • HTML kullanın <ul> bir sırasız liste tanımlamak elemanı
  • HTML kullanın style mermi tarzını tanımlamak için öznitelik
  • HTML kullanın <ol> sıralı bir listesini tanımlamak için eleman
  • HTML kullanın type numaralandırma türünü tanımlamak için öznitelik
  • HTML'yikullanın <li> Bir liste öğesini tanımlamak için eleman
  • HTML'yikullanın <dl> Bir açıklama listesini tanımlamak için eleman
  • HTML kullan <dt> tanım terimini tanımlamak için eleman
  • HTML kullanarak <dd> açıklama verilerini tanımlamak için eleman
  • Listeler listeleri iç içe olabilir
  • Liste öğeleri diğer HTML öğelerini içerebilir
  • CSS özelliği ekranı kullanın: yatay bir listesini görüntülemek için satır içi

Egzersizleri ile Yourself test edin!

Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 » Egzersiz 6»

HTML Liste Etiketler

Etiket Açıklama
<ul> Sırasız liste tanımlar
<ol> sıralı bir listesini tanımlar
<li> Bir liste öğesini tanımlar
<dl> Bir açıklama listesini tanımlar
<dt> Bir açıklama listesinde terimini tanımlar
<dd> Bir açıklama listesinde açıklamasına tanımlar

❮ Önceki Sonraki Bölüm ❯