(Bu sefer pro-level, mizah-level-max, öğretici-seviye: üstat)

HTML’yi anlatırken çoğu kişi şöyle yapar:

“Header koy, nav koy, section koy.”
(Sonra da giderler.)

Biz öyle değiliz!
Biz HTML’nin mutfağına dalıyoruz, tencereyi çeviriyoruz, tahtaya vurup ritim tutuyoruz 😄💻✨

Bugün HTML’yi ev, etiketleri de yap-boz parçası olarak düşüneceğiz.
Ve her parçayı masaya yatıracağız — neden var, nasıl çalışır, ne zaman kullanılır, hangi hatalar yapılır?

Kodlu, örnekli, ipuçlu, tatlı tatlı…

🧩 1) HEADER = Evimizin Ön Kapısı, Kapı Zili, Asansör Lobi Alanı

📌 Header Ne İşe Yarar?

• Sayfanın giriş atmosferini oluşturur (evin giriş dekorasyonu gibi 🎀)
• Kullanıcı “Ben nereye geldim?” sorusunun cevabını burada alır
• Genelde logo, başlık, açıklama, bazen nav bulunur
• SEO açısından arama motoru “Bu bölüm önemli” der

📌 Neden Puzzle’ın İlk Parçası?

Çünkü kullanıcı önce burayı görür.
Header olmazsa sayfa kapısız yazlık ev gibidir, içeri giren nereye geldiğini anlamaz.

📌 Doğru Kullanım Örneği:

<header>
  <img src="logo.png" alt="Sitenin Logosu" class="logo">

  <h1>HTML Puzzle Evine Hoş Geldin!</h1>
  <p>Burada her etiket, yerine cuk oturan bir parçadır 😄✨</p>
</header>

📌 Gelişmiş Header (Profesyonel sürüm):

Açılır menülü, arama çubuklu, havalı versiyon:

<header>
  <div class="top-bar">
    <h1>🚪 Puzzle Mansion</h1>
    <input type="search" placeholder="Evde kayboldun mu? Ara bakalım..." />
  </div>

  <nav>
    <ul>
      <li><a href="#oda1">Salon</a></li>
      <li><a href="#oda2">Mutfak</a></li>
      <li><a href="#oda3">Kütüphane</a></li>
    </ul>
  </nav>
</header>

💡 Header İpucu Kutusu:

✔ Logo eklemek site kimliğini güçlendirir
✔ Arama kutusu kullanıcıyı mutlu eder
✔ Header’ın içine gereksiz şey doldurma (kapıya dolap koymak gibi)
✔ Mobil görünümde header’ı minimal yap

🧩 2) NAV = Evimizin Koridoru, Yol Haritası, Google Maps’i

📌 Nav Ne İçindir?

• Kullanıcıyı sayfada dolaştıran yol işaretleridir
• Menüleri içerir
• Kullanıcıya “Sana yolu göstereceğim” der
• Mobilde hamburger menü olur, masaüstünde geniş bir yol olur

📌 Puzzle Mantığı:

Evde koridor yoksa:
Salon → banyo → yatak odası → mutfak dolaşırken kaybolursun.
İşte nav’ın görevi bu “kaderi” değiştirmek 😄

📌 Temel Kod Örneği:

<nav>
  <ul>
    <li><a href="#bolum1">Ana Oda</a></li>
    <li><a href="#bolum2">Yan Oda</a></li>
    <li><a href="#bolum3">Gizli Oda</a></li>
  </ul>
</nav>

📌 Profesyonel, stilize nav:

<nav class="main-nav">
  <ul>
    <li><a href="#giris">Giriş</a></li>
    <li><a href="#servisler">Servisler</a></li>
    <li><a href="#hakkimizda">Hakkımızda</a></li>
    <li><a href="#iletisim">İletişim</a></li>
  </ul>
</nav>

💡 Nav İpucu Kutusu:

✔ Mobilde kaybolmasın diye hamburger menü kullan
✔ Gereksiz 10 tane link verme (koridoru alışveriş merkezine çevirmeyelim)
✔ Aktif sayfaya “active” sınıfı ekle

🧩 3) SECTION = Evimizin Odaları (Her Oda Bir Konuya Açılır)

HTML’nin en büyük puzzle parçaları section’lardır.

📌 Section Ne Yapar?

• İçeriği konu konu ayırır
• “Bu oda blog odası” der
• “Bu oda ürün tanıtım odası” der
• “Bu oda yemek tarifi odası” der
• SEO açısından arama motoru “Bu bölüm önemli bir içerik” der

📌 Temel Section Örneği:

<section id="oda_blog">
  <h2>Blog Odası</h2>
  <p>Burada yazılarım ve kahve kokuları var ☕✨</p>
</section>

📌 Gelişmiş Section (Kartlı, görselli):

<section id="oda_urunler" class="room">
  <h2>Ürünler Odasına Hoş Geldin</h2>

  <article class="urun">
    <h3>HTML Puzzle Seti</h3>
    <p>Her yeni başlayan için 50 parçalık HTML seti 😄</p>
  </article>

  <article class="urun">
    <h3>CSS Boya Kutusu</h3>
    <p>Sayfaları renklendirmek için birebir 🎨</p>
  </article>

</section>

💡 Section İpucu Kutusu:

✔ Her section tek konu içermeli
✔ Section içine article, aside, figure ekleyebilirsin
✔ Section yerine her şeyi “div” yapmak 2005 modasıdır 😄

🧩 4) FOOTER = Evden Çıkarken Verilen Son Selam

Footer, puzzle’ın son parçasıdır.
Sayfanın en altındaki bitiş yazısıdır.

📌 Footer Ne Yapar?

• İletişim
• Telif
• Küçük uyarılar
• Linkler
• Sosyal medya butonları
• Minik öpücükler (opsiyonel 😘)

📌 Temel Footer:

<footer>
  <p>Bu sayfayı kaydırma yeteneğin harika 😍</p>
  <small>© 2025 HTML Puzzle Evi</small>
</footer>

📌 Gelişmiş Footer:

<footer>
  <div class="footer-links">
    <a href="#hakkimizda">Hakkımızda</a>
    <a href="#gizlilik">Gizlilik Politikası</a>
    <a href="#iletisim">İletişim</a>
  </div>

  <p>Bizi ziyaret ettiğin için teşekkürler 💖</p>
</footer>

💡 Footer İpucu Kutusu:

✔ Çok dolu yapma (evin çıkışına koltuk koymak gibi olur)
✔ Telif yazısı mutlaka olsun
✔ Mobilde derli toplu görünmeli

🧩 5) Puzzle’ın Tam Birleştirilmiş Hali (Tam HTML Şablonu)

İşte tam puzzle gibi oturan komple sayfa:

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Puzzle HTML Sayfası</title>
</head>

<body>
  
  <header>
    <h1>HTML Puzzle Evine Hoş Geldin!</h1>
    <p>Her etiket bir yapı taşıdır.</p>
  </header>

  <nav>
    <ul>
      <li><a href="#oda1">Oda 1</a></li>
      <li><a href="#oda2">Oda 2</a></li>
      <li><a href="#oda3">Oda 3</a></li>
    </ul>
  </nav>

  <section id="oda1">
    <h2>Oda 1: Blog</h2>
    <p>Burası bilginin rahat koltuklarda yayıldığı oda.</p>
  </section>

  <section id="oda2">
    <h2>Oda 2: Galeri</h2>
    <p>Burada fotoğraflar duvarlarda çerçeveli duruyor.</p>
  </section>

  <section id="oda3">
    <h2>Oda 3: Kütüphane</h2>
    <p>Bilgelik burada kitap raflarında saklı.</p>
  </section>

  <footer>
    <small>© 2025 Puzzle Evinden Sevgilerle 😍</small>
  </footer>

</body>
</html>

🧩 SONUÇ:

HTML aslında bir kodlama dili değil,
tam bir ev düzeni + puzzle mantığı + mantıklı mimari oyunudur.

Her parça yerini bulunca:
✨ Web sayfan profesyonel görünür,
✨ Arama motorları bayılır,
✨ Kullanıcı kaybolmaz,
✨ Sen de “Ben bu işi çözdüm!” dersin