HTML Ders6- Listeleme ve Örnekleri


Bu dersimizde 3 tür listeleme işlemi yapacağız. Html dokümanınızda 3 tip listeleme çeşitlerini ele alacağız. Bunları sıralayacak olursak maddeleme, numaralandırma ve kategorilendirme.

Maddeleme Şeklinde Listeleme

Listeleme

<ul></ul>

etiketleri arasında yapılır ve her birinin arasına

<li></li>

gelecek şekilde maddeleme işlemi gerçekleşir.

<ul></ul>

yazılmadan da listeleme işlemi yapabilirsiniz. Fakat bu sefer listeleme işleminiz sayfanızın en sol köşesinden başlayacaktır. Daha önceki boşluk olmayacaktır. Buradaki ul kısmına bakacak olursak unordered list anlamına gelen sıralanmamış liste anlamına gelir.

<!DOCTYPE html>
<html>
<head>
  <title>linkler</title>
  <meta charset="utf-8">
</head>
<body>
<ul>
<li>Ankara</li>
<li>Adana</li>
<li>İstanbul</li>
<li>İzmir</li>
<li>Manisa</li>
</ul>
</body>
</html>

Çıktısı

Numaralandırma Şeklinde Listeleme

Bazen maddeleme işlemi yapılırken numaraya ihtiyaç duyulur. Bu yüzden

<ol></ol>

etiketleri arasına

<li></li>

şeklinde yazılarak yapılır. Buradaki ol ifadesi ordered list yani sıralı ifade anlamına gelmektedir.

<!DOCTYPE html>
<html>
<head>
  <title>linkler</title>
  <meta charset="utf-8">
</head>
<body>
<ol>
<li>Ankara</li>
<li>Adana</li>
<li>İstanbul</li>
<li>İzmir</li>
<li>Manisa</li>
</ol>
</body>
</html>

Çıktısı

Kategori Şekilde Listeleme

Bazen tablolarınızda maddeleme işlemi yaparken açıklama gereğinde bulunmak istersiniz. Bu açıklamayı altına biraz sağ tarafına yapmak istediğinizde bu etiketleri yapabilirsiniz.

Liste

<dl></dl>

arasında yazılır ve en yakın dereceye sahipleri

<dt></dt>

arasına koyarız. 2. derece yakınlığı ise

<dd></dd>

arasında kullanarak kategorilendirme yapabiliriz.

<!DOCTYPE html>
<html>
<head>
  <title>linkler</title>
  <meta charset="utf-8">
</head>
<body>
<dl>
      <dt>Ankara</dt>
         <dd>Çankaya</dd>
         <dd>Mamak</dd>
      <dt>İstanbul</dt>
         <dd>Pendik</dd>
   </dl>
</body>
</html>

Çıktısı

Bir yorum ekleyin

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