Liste öğelerinde bağlantı

Menü ve içerik listeleri için <li> içine bağlantı yerleştirmeyi öğrenirsin.

Liste öğesinde bağlantı

Bir <li> öğesinin içine daha önce öğrendiğin <a> etiketini koyarak bağlantı oluşturursun. Örnek: <li><a href="about.html">Hakkında</a></li>.

Önemli sıra: <a> etiketi <li>'nin içinde olmalıdır. Tersi (<li>'yi <a>'nın içine koymak) geçersizdir; tarayıcı bunu yanlış yorumlar.

Navigasyon listesi

Bir sitenin üst menüsü genelde bir <ul> ve içinde bağlantılı <li> öğelerinden kurulur. Buna navigasyon listesi denir. Her öğe site içindeki bir sayfaya bağlantı taşır.

Örnek: Ana sayfa, Hakkında, İletişim öğelerini içeren bir menü. Görsel biçimlendirme CSS ile yapılır; HTML tarafında yalnızca yapı ve bağlantılar vardır.

Uygulama Üç bağlantılı menü yaz

Body içine bir <ul> menü ekle. Üç <li> öğesi olsun; her birinin içinde bir <a href="..."> bağlantı bulunsun. Örneğin Ana sayfa (index.html), Hakkında (about.html), İletişim (contact.html).

Örnek çözümü göster

<body>
  <ul>
    <li><a href="index.html">Ana sayfa</a></li>
    <li><a href="about.html">Hakkında</a></li>
    <li><a href="contact.html">İletişim</a></li>
  </ul>
</body>

Kendini test et

Bir bağlantı (<a>) liste öğesinde nasıl yazılır?
- <a><li>Bağlantı</li></a>
- <li><a href="x.html">Bağlantı</a></li>
- <li>Bağlantı</li><a href="x.html"></a>
- <a href="x.html"></a><li>Bağlantı</li>
Cevabı göster

<li><a href="x.html">Bağlantı</a></li> — Doğru. a, li'nin içine yazılır; tersi geçersizdir.

Bağlantıya hedef ver

<li><a ____>Ana sayfa</a></li>

Cevabı göster

<li><a href="index.html">Ana sayfa</a></li>

Özniteliği rolüyle eşleştir

href

Bağlantının hedefi
target

Bağlantının nerede açılacağı
rel

Sayfalar arası ilişki
id

Sayfa içi çapa için kimlik

Sıradaki ders: Özet - İçindekiler tablosu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler