HTML
Proje sonu - Site iskeleti
Tüm sayfaları bağlantılarla birbirine bağlayıp dokümante edersin.
Relative URL'lerle sayfa bağlantısı
Çok sayfalı sitede sayfalar birbirine <a> bağlantılarıyla bağlanır. Aynı klasördeki sayfalara giderken relative URL kullanılır: href="hakkimizda.html" gibi. Başında / yoktur; bu yüzden bağlantı geçerli sayfanın yanındaki dosyayı açar.
Nav'daki bağlantılar her sayfada aynı olacağı için relative URL kullanmak, siteyi bir klasöre taşınsa bile çalışır. Ana sayfa genelde index.html olarak adlandırılır.
Yorumlarla yapıyı belgele
Sayfa büyüdükçe hangi bölgenin ne işe yaradığını bulmak zorlaşır. HTML yorumları (<!-- ... -->) bölümleri etiketlemek için kullanılır; tarayıcı bunları göstermez ama kaynakta okunabilir.
Peynir Dergisi'nde her landmark'tan önce kısa bir yorum yazılır: <!-- Üst menü -->, <!-- Ana içerik -->, <!-- Yan içerik -->, <!-- Alt bilgi -->. Bu, ekran okuyucuyu etkilemez ama geliştiriciye yol gösterir.
Uygulama Nav'ı relative URL'lere çevir, aside ve yorumlar ekle
Nav'daki bağlantıları relative URL'lere çevir: index.html, yazilar.html, hakkimizda.html, iletisim.html. main'den sonra bir <aside> ekle; içinde <h2> ve en az iki bağlantı olsun. header, main, aside ve footer'dan önce yapıyı açıklayan <!-- ... --> yorumları ekle.
Ö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>
<!-- Üst menü -->
<header>
<nav>
<a href="index.html">Peynir Dergisi</a>
<a href="yazilar.html">Yazilar</a>
<a href="hakkimizda.html">Hakkimizda</a>
<a href="iletisim.html">Iletisim</a>
</nav>
</header>
<!-- Ana içerik -->
<main>
<h1>Peynir Dergisi</h1>
<p>Peynir kültürüne dair yazılar, tarifler ve üretici hikayeleri.</p>
<section>
<h2>Son yazılar</h2>
<article>
<h3>Ezine peyniri</h3>
<p>Trakya'nın beyaz peynirinin üretim aşamalarını inceledik.</p>
</article>
<article>
<h3>Van otlu peyniri</h3>
<p>Doğu Anadolu'nun otlu peynirinde kullanılan bitkileri tanıdık.</p>
</article>
</section>
<section>
<h2>Hakkımızda</h2>
<article>
<h3>Hikayemiz</h3>
<p>Peynir Dergisi 2018'den beri yerel üreticilerin hikayelerini paylaşıyor.</p>
<address>
Peynir Dergisi, Beyoglu, Istanbul
</address>
</article>
</section>
<section>
<h2>İletişim</h2>
<form action="/iletisim" method="post">
<label for="ad">Adınız</label>
<input type="text" id="ad" name="ad" required>
<label for="eposta">E-posta</label>
<input type="email" id="eposta" name="eposta" required>
<label for="mesaj">Mesajınız</label>
<textarea id="mesaj" name="mesaj" placeholder="Mesajınızı buraya yazın"></textarea>
<button type="submit">Gönder</button>
</form>
</section>
</main>
<!-- Yan içerik -->
<aside>
<h2>Önerilen</h2>
<ul>
<li><a href="yazilar.html">Tüm yazılar</a></li>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
</ul>
</aside>
<!-- Alt bilgi -->
<footer>
<address>
Peynir Dergisi, Beyoglu, Istanbul
</address>
<p>(c) 2026 Peynir Dergisi</p>
</footer>
</body>
</html>
Proje tamam: Site iskeleti
Bu projede Peynir Dergisi için çok sayfalı bir site iskeleti kurduk. Her sayfada tutarlı header ve footer var; main sayfaya özel içerik taşır ve section/article ile bölünür. aside yan içeriği, address iletişim bilgisini taşır.
Sayfalar relative URL'lerle birbirine bağlandı ve yapı yorumlarla belgelendi. Bir sonraki adımda bu iskeleti CSS ile stillendirmeyi öğreneceksin.
Kendini test et
-
hakkimizda.html dosyasına gitmek için doğru relative href hangisi?
- href="/hakkimizda.html"
- href="hakkimizda.html"
- href="http://hakkimizda.html"
- href="#hakkimizda"
Cevabı göster
href="hakkimizda.html" — Doğru. Başında / olmayan dosya adı relative URL'dir; aynı klasördeki dosyayı açar.
-
Yorum etiketini tamamla
<!-- ____ menü -->
Cevabı göster
<!-- Üst menü -->
-
Sayfa dosyasını amacıyla eşleştir
- index.html
- Ana sayfa
- yazilar.html
- Yazı listesi
- hakkimizda.html
- Hakkımızda
- iletisim.html
- İletişim formu
Sıradaki ders: Meydan okuma - İleri metin
