Proje sonu - Landing
Tüm bölümleri birleştirip landing sayfasını tamamlayıp dokümante edersin.
Sayfayı birleştir
Son adımda sayfayı baştan sona birleştirirsin. <body>'nin başına <header> ve içinde <nav> koyarsın; menü bağlantıları nav içinde yaşar. <main>'den sonra <footer> gelir; telif ve yardımcı bağlantılar orada durur.
Bölümleri <!-- yorum --> ile işaretlemek dosyayı okunabilir tutar. Yorumlar tarayıcıda görünmez, yalnızca kaynağı okuyana görünür.
HTML yorumları
HTML yorumları tarayıcıda görünmez ama kaynak dosyada kalır. <!-- ile açılır, --> ile kapanır. Bölümleri işaretlemek, not almak veya geçici olarak kod gizlemek için kullanılır.
Yorum içindeki metin sayfada gösterilmez; yalnızca kaynağı okuyan kişi görür. Aşırı kullanma; dosyayı şişirir. Anlamlı kısa notlar yeğle.
Uygulama Header, nav, footer ve yorum ekle
Önceki adımın fiyat tablosu içeren sayfasını al. <body>'nin başına bir <header> ekle; içine <nav> ve en az iki a (href ile) koy. <main>'den sonra bir <footer> ekle; içine dolu bir p (telif metni) koy. Sayfaya en az bir yorum ekle (ör. header ve footer'ı işaretle).
Ö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>TaskFlow - Görev yönetimi</title>
</head>
<body>
<!-- Üst menü -->
<header>
<nav>
<a href="/">TaskFlow</a>
<a href="/ozellikler">Özellikler</a>
<a href="/fiyatlar">Fiyatlar</a>
</nav>
</header>
<main>
<h1>Görevlerini akılda değil, akışta tut</h1>
<p>TaskFlow ile ekibinin görevlerini, son tarihlerini ve ilerlemesini tek panelden yönet.</p>
<a href="/kayit">Ücretsiz başla</a>
<button>Tur iste</button>
<section>
<h2>Neden TaskFlow?</h2>
<article>
<h3>Kanban panoları</h3>
<p>Görevleri <strong>sürükle bırak</strong> ile taşı, akışı <em>canlı</em> gör.</p>
</article>
<article>
<h3>Otomatik hatırlatma</h3>
<p>Son tarih yaklaşırken <strong>e-posta</strong> ve <em>anlık bildirim</em> al.</p>
</article>
<ul>
<li><strong>Takvim</strong> görünümü</li>
<li><strong>Dosya</strong> ekleri</li>
<li><strong>Etiket</strong> sistemi</li>
</ul>
</section>
<section>
<h2>Planlar</h2>
<table>
<caption>TaskFlow fiyatlandırması</caption>
<thead>
<tr>
<th>Plan</th>
<th>Fiyat</th>
<th>Üye</th>
</tr>
</thead>
<tbody>
<tr>
<td>Başlangıç</td>
<td>Ücretsiz</td>
<td>3</td>
</tr>
<tr>
<td>Pro</td>
<td>99 ₺/ay</td>
<td>Sınırsız</td>
</tr>
</tbody>
</table>
</section>
</main>
<!-- Alt bilgi -->
<footer>
<p>© 2026 TaskFlow</p>
</footer>
</body>
</html>TaskFlow landing tamamlandı
TaskFlow landing sayfası tamamlandı! Beş derste şu yapıyı kurdun:
- Belge iskeleti ve head ayarları
- Hero bölümü: slogan, açıklama, eylem
- Özellikler: article kartları ve listeler
- Fiyatlandırma: caption'lı tablo
- Header, nav, footer ve yorumlar
Bu yapı gerçek bir ürün sayfasının iskeletidir. İçeriği değiştirip kendi ürününe uyarlayabilirsin.
Kendini test et
-
Sayfanın ana içeriğini sarmak için hangi etiket kullanılır?
- aside
- main
- header
- nav
Cevabı göster
main — Doğru. main sayfanın ana içeriğini sarar; her sayfada bir tane bulunur.
-
HTML yorumunu açan işaretleri yaz
____ Üst menü -->Cevabı göster
<!-- Üst menü --> -
Yapısal etiketi rolüyle eşleştir
- header
- Üst bölüm
- nav
- Gezinme menüsü
- main
- Ana içerik
- footer
- Alt bölüm