🚀 Sayfalarınızı Düzenlemenin Anahtarı (Süper Deluxe Edition)

🎯 Giriş: “Sayfan Düzensizse Kalbimiz Çatlar”

Bir web sayfasına giriyorsun…
Menü aşağıda…
Footer yukarıda…
Header hiç yok ortalıkta…
Sanki tasarımı uğur böcekleri yapmış gibi.

İşte tam burada HTML layout elementleri,
site tasarımı için “evi toparlayan anne” rolünü üstlenir.

Onlar sayesinde web sitesine:
✔ düzen gelir
✔ anlam gelir
✔ SEO mutluluktan göbek atar

Hazırsan, gel bu elementleri tek tek tanıyalım.

🧱 Bölüm 1: HTML Layout Elementleri – Web Sitesinin İskeleti

🧡 1) <header> – Sitenin “Merhaba Ben Geldim” Dediği Yer

Bir header, karşı tarafın üzerinde ilk izlenimi bırakan yer.
Nasıl ki evine gelen misafir önce antreye girince etkilenir…
Header da bu işin antre kısmı.

Genellikle şunları barındırır:

• Logo
• Menü
• Arama çubuğu
• Başlık
• Tanıtım banner’ı

⭐ Örnek:

<header>
  <h1>🔥 Süper Tasarımlar Blogu</h1>
  <nav>
    <a href="#">Anasayfa</a>
    <a href="#">Blog</a>
    <a href="#">Hakkımızda</a>
    <a href="#">İletişim</a>
  </nav>
</header>

💡 İpucu:

Header’ın arka planına ufak bir degrade ver, siten “ben profesyonelim” diye bağırır.

💙 2) <nav> – Kullanıcıya Yol Gösteren “GPS Sistemi”

“Acaba bu sitede nereye tıklayacağım?”
Bu soruyu sordurtan siteler genelde 3 saniyede kapatılır.

<nav> bu duruma izin vermez.

⭐ Örnek:

<nav>
  <ul>
    <li><a href="#">Haberler</a></li>
    <li><a href="#">Rehberler</a></li>
    <li><a href="#">İpuçları</a></li>
  </ul>
</nav>

💡 İpucu:

<nav> içinde liste kullanmak SEO için altın değerindedir.
Google sever, yap.

💛 3) <section> – “Bu Bölüm Bu Konuyu Anlatıyor” Etiketi

Section, sayfanın konulara ayrılmış bölümlerini temsil eder.
Bir sitenin kitabın bölümleri gibi düşün.

⭐ Örnek:

<section>
  <h2>💡 Son Teknoloji Haberleri</h2>
  <p>Teknoloji dünyasında neler oldu?</p>
</section>

💡 İpucu:

<section> kullanırken mutlaka bir başlık (h1–h6) ekle.
Google buna bayılıyor.

❤️ 4) <article> – “Tek Başına Bile Kullanılabilir” İçerik

Blog yazıları, haberler, ürün incelemeleri…
Hepsi birer article’dır.

⭐ Örnek:

<article>
  <h3>🎮 Yeni Oyun İncelemesi</h3>
  <p>Bu oyun neden herkesin dilinde?</p>
</article>

💡 İpucu:

Article = tek başına paylaşılabilir içerik.
Bunu unutma.

💜 5) <aside> – “Ek Bilgi Köşesi / Reklam Alanı”

Sayfanın sağında solunda duran minik, tatlı bilgiler veya reklamlar aside içine konur.

⭐ Örnek:

<aside>
  <h4>📌 Popüler Yazılar</h4>
  <ul>
    <li>HTML İpuçları</li>
    <li>CSS Derin Temeller</li>
    <li>JavaScript Hileleri</li>
  </ul>
</aside>

💡 İpucu:

“Göz yormayan ufak içerikler” aside’ın olayıdır.
Siteyi karmaşadan kurtarır.

💚 6) <footer> – Diploman, Kapanış Cümlen, Son İzlenimin

Footer siteye karakter katar.
Genelde şunlar olur:

• Telif hakları
• Sosyal medya linkleri
• İletişim bilgileri
• Kısa açıklamalar

⭐ Örnek:

<footer>
  <p>© 2025 Süper Tasarımlar Blogu</p>
  <p>Bizi takip edin: Instagram • Twitter • GitHub</p>
</footer>

💡 İpucu:

Footer içine sitenin mini-site haritasını koyarsan kullanıcı kolayca aradığını bulur.

🎨 Bölüm 2: Layout Teknikleri – Sihri Yapan CSS Büyücüleri

🌀 1) Display Özellikleri: “Davranış Biçimlerini” Belirler

🟥 block

• Genişliği tüm satırı kaplar
• Alt alta dizilir

🟦 inline

• Sadece içeriği kadar yer kaplar
• Yan yana dizilebilir

🟩 inline-block

• Hem blok gibi ölçü alabilir
• Hem inline gibi yan yana durabilir

⭐ Örnek:

<span style="display:inline-block; padding:10px;">Buton gibi span</span>

💡 İpucu:

Eğer element yan yana durmuyor → büyük ihtimal block’tur.

🧩 2) Flexbox – “Ben Bu Sayfayı Sizin İçin Toparladım”

Flexbox modern layout’un aşkıdır.
En büyük meziyeti:
Elemanları hizalamak → çocuk oyuncağı.

⭐ Basit örnek:

<div class="kapsayici">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<style>
.kapsayici {
  display: flex;
  justify-content: center;
  gap: 20px;
}
</style>

💡 Flexbox İpuçları:

• justify-content: yatay hizalama
• align-items: dikey hizalama
• gap: elemanlar arası boşluk (bordaki sihirli toz)
• flex-wrap: taşan elemanları aşağı indir

🧱 3) CSS Grid – “Profesyoneller Burada”

Grid = sayfaya komple mimari çizen CSS sistemi.
Sanki bir ev planı çiziyorsun.

⭐ Örnek:

<div class="grid">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<style>
.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 15px;
}
</style>

💡 Grid İpuçları:

• grid-template-columns: sütun sayısı
• grid-template-rows: satırlar
• grid-area: istediğin yere teleport
• Komple sayfa tasarımlarında Flexbox’tan daha iyi

📍 4) Position: “Bu Elemanı Nereye Koyayım?”

relative

Hafifçe kayabilir, ama yerini korur.

absolute

En yakın relative ebeveyne göre konumlanır.

fixed

Scroll yapsan bile kımıldamaz.

⭐ Örnek:

<div class="box"></div>

<style>
.box {
  width: 100px;
  height: 100px;
  background: red;
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style>

💡 İpucu:

Menüleri “scroll’da sabit” yapmak istiyorsan → position: fixed.

🛠 Bölüm 3: Tüm Elementleri İçeren Mini Layout Projesi

AŞIRI düzenli mini bir sayfa:

<body>
  <header>Ben Header 😎</header>

  <nav>Menüler buradan geçer 🚦</nav>

  <section>
    <article>Bu bir blog yazısıdır ✍️</article>
    <aside>Reklam / Ek bilgi 💡</aside>
  </section>

  <footer>Ben footer 👣</footer>
</body>

🌟 Bonus: Profesyoneller İçin Mini İpuçları

✔ Core Web Vitals için düzen şart

Layout elementleri → Google “A-haaa!” der.

✔ Mobil uyum olmazsa olmaz

Flex ve Grid = telefon dostu.

✔ Çok div kullanıyorsan

Sen bir şeyleri yanlış yapıyorsun demektir.

✔ Semantik etiket kullanmak

Erişilebilirliği artırır (engelli kullanıcılar için harika).

🎉 Sonuç: Artık Layout Senin Avucun İçinde!

Bu bilgilerle artık:

• Daha profesyonel
• Daha düzenli
• Daha öğrenilebilir
• Daha SEO dostu

web sayfaları yapabilirsin.