Academy › 🌐 Web Geliştirme › HTML: Sayfanın İskeleti

Tam İskelet: DOCTYPE'tan body'ye

📄 HTML: Sayfanın İskeleti bölümü · Code Quest Web Geliştirme parkuru

Her düzgün HTML sayfası aynı iskeletle doğar. Önce tamamını gör, sonra satır satır sökelim:

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Sayfamın Adı</title>
</head>
<body>
  <p>Görünen her şey burada.</p>
</body>
</html>

<!DOCTYPE html> — en tepede durur ve tarayıcıya "bu modern bir HTML5 belgesidir" der. Etiket bile değildir, bir bildiridir; kapanışı yoktur.
<html> — her şeyi saran kök etiket. Sayfada ondan dışarıda hiçbir şey kalmaz.
<head> — sayfa HAKKINDA bilgiler: sekme başlığı, karakter seti... Buradakiler sayfada görünmez.
<meta charset="UTF-8"> — "bu dosyayı UTF-8 ile oku" der. Türkçe için hayati: bu satır olmazsa ğ, ş, ı, ç harflerin Ã¼ÅŸ gibi anlamsız sembollere dönüşebilir!
<title> — tarayıcı sekmesinde ve aramalarda görünen isim.
<body> — kullanıcının ekranda GÖRDÜĞÜ her şeyin evi.

head ile body kardeştir; ikisi de html'in çocuğudur. Akılda tutma hilesi: head = sahne arkası, body = sahne. Şimdi test edelim — bu iskelet ekranda ne gösterir?

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Gizli Başlık</title>
</head>
<body>
  <p>Sahnedeki tek oyuncu benim.</p>
</body>
</html>

▸ TARAYICIDA GÖRÜNÜM

Sayfada sadece "Sahnedeki tek oyuncu benim." görünür; "Gizli Başlık" yalnızca sekmenin üzerinde yaşar

⚠️ <title> ile <h1>'i karıştırma: title SEKMEDE görünür ve head'de yaşar; h1 SAYFADA görünür ve body'de yaşar. İkisi ayrı dünyaların başlıklarıdır — Etiket Yutan bu ikisini yer değiştirtmeye bayılır.

Kendini test et

<title> etiketi nereye yazılır ve nerede görünür?

head'e yazılır, tarayıcı sekmesinde görünür
body'ye yazılır, sayfanın en üstünde görünür
head'e yazılır, sayfanın en üstünde görünür
html'in dışına yazılır, adres çubuğunda görünür

Cevabı gör

Cevap: head'e yazılır, tarayıcı sekmesinde görünür

title sahne arkasının (head) elemanıdır; sayfada değil SEKMEDE görünür. Sayfa içinde görünen büyük başlık ise body'deki h1'dir.

Doğru mu, yanlış mı? — Kaynak koda art arda beş boşluk yazarsan tarayıcı ekranda beş boşluk gösterir.

Cevabı gör

Cevap: Yanlış

Tarayıcı art arda gelen boşlukları, tab'ları ve satır sonlarını TEK boşluğa indirger. Ekrandaki boşluk, etiketlerle ve ileride CSS ile yönetilir.