Ünite Projesi: Konu Sayfası

Ders 24/45 · 22 dakika · ünite projesi

Bu ünitede bir sayfayı listelerle, kutularla ve anlamlı bölümlerle düzenlemeyi öğrendiniz. Şimdi kopyalanacak bir hedef yok: konuyu siz seçiyorsunuz, sayfayı siz kuruyorsunuz.

Konu

Bir hobiyi veya ilgilendiğiniz herhangi bir konuyu anlatan tek sayfalık bir site yazın. Sevdiğiniz bir oyun, yaşadığınız şehir, en sevdiğiniz yemek… Hangisini anlatırsanız anlatın, kontrol listesi aynıdır.

Nasıl çalışır?

Siz yazdıkça kontrol listesi kendini işaretler ve sayfanızın sonucu yanında görünür. Liste sayfanın yapısına bakar, yazdıklarınızın içeriğini değerlendirmez. Bu yüzden “Kendiniz kontrol edin” bölümündeki maddeleri size bırakıyoruz.

Takılırsanız önceki derslere dönebilirsiniz. Bu bir sınav değil, süre de yok.

Konu sayfası

Sayfanızı aşağıya yazın. Metinler tamamen size ait.

header :: Sayfanın üstünde bir header olsun
h1 = 1 :: Sayfada tek bir h1 olsun
nav li >= 2 :: nav içinde en az iki maddelik bir menü listesi olsun
main = 1 :: Asıl içerik tek bir main içinde olsun
main section[id] >= 2 :: main içinde id değeri olan en az iki section olsun
section:not(:has(h2, h3)) = 0 :: Her section kendi başlığına sahip olsun
main li >= 3 :: main içinde en az üç maddelik bir liste olsun
[class] >= 2 :: En az iki elemana class verin
footer :: Sayfanın altında bir footer olsun
section kullandığım her yer gerçekten kendi konusu olan bir bölüm; yalnızca gruplama için olanlar div
id ve class adları görünümü değil, elemanın ne olduğunu anlatıyor

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Satranç</title>
</head>
<body>
  <header>
    <h1>Satranç</h1>
    <nav>
      <ul>
        <li><a href="#nedir">Nedir?</a></li>
        <li><a href="#baslamak">Nasıl başlanır?</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="nedir">
      <h2>Nedir?</h2>
      <p class="ozet">İki kişiyle, 64 kareli bir tahtada oynanan bir strateji oyunudur.</p>
    </section>

    <section id="baslamak">
      <h2>Nasıl başlanır?</h2>
      <ul class="adimlar">
        <li>Taşların nasıl hareket ettiğini öğrenin.</li>
        <li>Kısa bulmacalar çözün.</li>
        <li>Bir arkadaşınızla oynayın.</li>
      </ul>
    </section>
  </main>

  <footer>
    <p><small>&copy; 2026 Satranç Sayfası</small></p>
  </footer>
</body>
</html>

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.