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

🧪 Uygulama: Kişisel Sayfa İskeleti Satır Satır

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

Bölümün TÜM parçalarını tek sayfada birleştiriyoruz: sıfırdan, satır satır, geçerli bir kişisel sayfa. Kod editörünü açmış Kerem'in omzundan bakalım. Önce bildiri ve kök:

HTML

<!DOCTYPE html>
<html lang="tr">

İlk satır tarayıcıya "modern HTML5" diyor; ikinci satır her şeyi saracak kök etiketi lang="tr" özniteliğiyle açıyor. Sıra sahne arkasında — head:

HTML

<head>
  <meta charset="UTF-8">
  <title>Kerem | Kişisel Sayfa</title>
</head>

Girintiye dikkat: head'in çocukları bir kademe içeride. meta charset Türkçe karakterleri garantiye alıyor (void etiket — kapanışı yok), title sekmeye adını yazıyor. Şimdi sahne — body ve başlık hiyerarşisi:

HTML

<body>
  <!-- Ana başlık: sayfada SADECE BİR tane h1 -->
  <h1>Kerem Yıldız</h1>
  <p>Merhaba! Kod yazmayı öğrenen bir lise öğrencisiyim.<br>Bu sayfa, HTML yolculuğumun ilk durağı.</p>

Tek h1 geleneğine uyduk; paragraf içindeki <br> selamlama ile açıklamayı aynı paragrafta ayrı satırlara koydu. Devamında konu değişiyor — araya hr çekip h2 ile yeni bölüm açıyoruz:

HTML

  <hr>
  <h2>Neler Seviyorum?</h2>
  <p>Bilim kurgu romanları, satranç ve tabii ki    kod    yazmak.</p>

  <h2>Hedefim</h2>
  <p>Kendi oyunumu yapıp yayınlamak!</p>
</body>
</html>

"kod yazmak"ın etrafındaki o dağınık boşluklara takılma — artık biliyorsun, tarayıcı hepsini tek boşluğa indirecek. En sonda body ve html sırayla kapandı: son açılan ilk kapanır.

Tam liste — bu sayfada bölümün her dersi iş başında: iskelet (ders 2), tek h1 + h2 hiyerarşisi (ders 3), p/br/hr ve boşluk kuralı (ders 4), yorum ve girinti (ders 5), lang ile charset öznitelikleri (ders 6). Altı dersin tamamı, 20 satırlık tek sayfada. 🏗️

💡 Bu iskeleti kas hafızana kazı: bundan sonra yazacağın HER sayfa — en karmaşık web uygulaması bile — bu 10 satırlık omurganın üstüne kurulur. Boş bir dosyaya bakıp iskeleti su gibi yazabiliyorsan, bu bölümü gerçekten bitirmişsin demektir.

Kendini test et

Doğru mu, yanlış mı? — <hr> etiketi soldan sağa yatay bir ayraç çizgisi çizer ve kapanış etiketi yoktur.

Cevabı gör

Cevap: Doğru

Doğru! hr (horizontal rule) konu değişimini işaretleyen yatay çizgidir; içerik sarmadığı için void'dir, </hr> yazılmaz.

Kullanıcının ekranda GÖRDÜĞÜ her şey hangi etiketin içinde yaşar?

<body>
<head>
<title>
<meta>

Cevabı gör

Cevap:

body = sahne, head = sahne arkası. Başlıklar, paragraflar, ileride resimler ve butonlar — görünen her şey body'nin içindedir.