Tutarlı header/footer
Tüm sayfalarda tekrar eden header ve footer'ı yazarsın.
Tutarlı header ve nav
Çok sayfalı sitenin her sayfasında aynı <header> görünür. Header içine <nav> konur; nav de marka bağlantısı ve sayfa bağlantıları taşınır. Böylece ziyaretçi her sayfada aynı menüyü bulur.
Örneğin Peynir Dergisi'nde nav şu dört bağlantıyı taşır: ana sayfa, yazılar, hakkımızda ve iletişim. Marka bağlantısı genellikle href="/" ile ana sayfaya gider.
Footer ve address
Sayfanın altında <footer> bulunur. Footer'da genellikle iletişim bilgisi, telif metni ve alt bağlantılar yer alır. İletişim bilgisi için <address> etiketi kullanılır; bu etiket yalnızca iletişim bilgisi taşıyacak şekilde tasarlanmıştır.
Peynir Dergisi footer'ında adres ve telif yılı (c) 2026 ile beraber bulunur. Footer da her sayfada aynı kalır.
Uygulama Header ve footer'ı ekle
Body içine <header> ekle. Header içinde <nav> ve nav içinde en az dört bağlantı olsun (marka + üç sayfa). Sonra <footer> ekle; footer içinde <address> (dergi adresi) ve telif metni içeren <p> olsun.
Örnek çözümü göster
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Peynir Dergisi</title>
</head>
<body>
<header>
<nav>
<a href="/">Peynir Dergisi</a>
<a href="/yazilar">Yazilar</a>
<a href="/hakkimizda">Hakkimizda</a>
<a href="/iletisim">Iletisim</a>
</nav>
</header>
<footer>
<address>
Peynir Dergisi, Beyoglu, Istanbul
</address>
<p>(c) 2026 Peynir Dergisi</p>
</footer>
</body>
</html>Kendini test et
-
Birincil gezinme bağlantıları hangi landmark içine yazılır?
- header içinde nav
- footer içinde nav
- main içinde nav
- aside içinde nav
Cevabı göster
header içinde nav — Doğru. Birincil gezinme header içindeki nav'da olur.
-
Footer'da telif metnini tamamla
<footer><address>Peynir Dergisi</address><p>(c) 2026 Peynir ____</p></footer>Cevabı göster
<footer><address>Peynir Dergisi</address><p>(c) 2026 Peynir Dergisi</p></footer> -
Landmark'ı tipik içeriğiyle eşleştir
- header
- Logo ve nav
- footer
- address ve telif
- nav
- Sayfa bağlantıları
- address
- İletişim bilgisi