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.

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

Sıradaki ders: Ana sayfa

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler