Yükleniyor...

HTML Düzen (Layout)

Anlamsallıktan sonra layout: bölgeleri birleştir; CSS yerleştirir.

Önce yapı, sonra görsel yerleşim

Hikâyeyi netleştir; sonra sütunlar — dev tablo değil.

Doğrudan yanıt

Landmark iskeleti. Benzersiz içerik main’de. Sütunlar CSS ile. Layout table yok.

📊 HTML structure vs CSS visuals

Layer Responsibility Examples
HTML landmarks Name page regions by meaning header, nav, main, aside, footer
HTML wrappers Optional styling hooks with no landmark role div class="row"
CSS Visual columns, gaps, widths, order on screen flex, grid, margin, width
Avoid Fake layout with data tables table/tr/td for the whole site chrome

Landmark sayfa iskeleti

Header, satır, main+article, aside, footer. div.row yalnızca CSS kancası.

Landmark layout skeleton

html
HTML Code 
<body>
<header>
<h1>News</h1>
<nav>
<a href="index.html">Home</a>
<a href="local.html">Local</a>
</nav>
</header>
<div class="row">
<main>
<article>
<h2>Story</h2>
<p>Primary article content goes here.</p>
</article>
</main>
<aside>
<h2>Related</h2>
<p>Side links and notes.</p>
</aside>
</div>
<footer>
<p>Contact</p>
</footer>
</body>

İskeleti okuyun

  • Hikâye main’de
  • aside ilgili
  • CSS yoksa dikey yığın

Sütun için küçük CSS

Aynı landmarks; .row’da flex.

Layout skeleton with flex row

html
HTML Code 
<body>
<header><h1>News</h1></header>
<div class="row">
<main>
<article><h2>Story</h2><p>Primary content.</p></article>
</main>
<aside><h2>Related</h2><p>Side note.</p></aside>
</div>
<footer><p>Contact</p></footer>
<style>
.row { display: flex; gap: 16px; }
main { flex: 2; }
aside { flex: 1; }
</style>
</body>

Flex önizlemesini okuyun

  • Anlam aynı
  • main daha geniş
  • sütun için td yok

Tablolar veri için, sayfa çerçevesi için değil

Layout tablolarından kaçının.

Alıştırma

  1. header/main/aside/footer
  2. article yalnız main’de
  3. layout table yok

Kolay hatalar

  • layout tablosu
  • main atlamak
  • row’u landmark sanmak

Özet

  • HTML adlandırır; CSS yerleştirir
  • layout tablo yok
  • sırada: responsive

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
5
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Html Ders