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  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 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
```

```
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

Sıradaki ders: Col ve colgroup

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler