Sayfanın iskeleti

Başlamadan önce

Önceki dersteki örneği çalıştırmış olman ve dosya/çıktı ayrımını biliyor olman yararlı.

Öğrenme sırası: konuyu oku → çıktıyı tahmin et → örneği değiştir → alıştırmayı çöz → cevabını gerekçelendir.

Konu anlatımı

Bir HTML dosyasında ziyaretçinin gördüğü içerik ile belge hakkında bilgi veren bölüm ayrıdır. head bölümünde karakter kodlaması, sekme başlığı ve stil bağlantıları bulunur. body bölümünde ise başlık, paragraf, menü ve diğer görünür öğeler yer alır. Bu ayrım dosyan büyüdüğünde yanlış yere yazılmış içeriği bulmanı kolaylaştırır.

DOCTYPE tarayıcının belgeyi standart HTML olarak ele almasını sağlar. html üzerindeki lang, sayfanın temel dilini bildirir; metni çevirmek veya klavye dilini değiştirmek için kullanılmaz. UTF-8 Türkçe karakterlerin doğru çözülmesine yardım eder. Dosyayı editörde de UTF-8 olarak kaydetmelisin.

Tarayıcı kaynak kodunu harfi harfine çizmez; kurallara göre işler ve bazı eksikleri düzeltmeye çalışır. Sayfanın açılması tek başına yapının doğru olduğunu kanıtlamaz. İncele araçlarında Elements bölümünü açarak tarayıcının oluşturduğu belge ağacı ile yazdığın kaynağı karşılaştır.

İlk örneği oku ve dene

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8">
    <title>Sekmede görünen başlık</title>
  </head>
  <body>
    <h1>Görünen her şey body içine yazılır</h1>
  </body>
</html>

Ekranda "Görünen her şey body içine yazılır" başlığı görünür. "Sekmede görünen başlık" ise tarayıcı sekmesinde yazar.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Adım adım neden böyle çalışıyor?

1. DOCTYPE belge türünü belirtir; ekranda bir satır yazdırmaz.
2. head içindeki title sekme/yer imi başlığıdır; sayfaya h1 eklemez.
3. meta viewport telefonlarda genişliğin cihazla uyumlu ele alınmasını sağlar.
4. body içine görünür öğeler yazılır; meta ayarlarını buraya taşımak gerekmez.

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Öğrenme günlüğü</title>
</head>
<body>
  <h1>Merhaba!</h1>
  <p>Türkçe: ç, ğ, ı, ö, ş, ü.</p>
</body>
</html>

Sekme başlığı Öğrenme günlüğü olur; gövdede Merhaba ve Türkçe karakterler görünür.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Kolaydan zora sen dene

1. Örneği index.html olarak kaydet ve tarayıcıda aç.
2. title ile h1 değerlerini farklı yap; hangisinin nerede göründüğünü not et.
3. Telefon görünümünü açıp viewport satırı varken ve yokken davranışı karşılaştır.

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Deneme sekmesi</title>
</head>
<body><h1>Sayfadaki başlığım</h1></body>
</html>

Sekmede Deneme sekmesi; gövdede Sayfadaki başlığım.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Yaygın hata ve çözümü

1. Başlığın sekmede değişmemesi yanlış dosyayı açtığını veya kaydetmediğini gösterebilir; dosya yolunu karşılaştır.
2. Türkçe karakter bozuluyorsa yalnızca meta eklemek yetmez; dosyanın gerçek kodlamasını da UTF-8 yap.

Kendini değerlendir

Ezberlemeden açıklayabiliyor musun?

lang="tr" hangi işi yapar?

Kendi çözümünde bir girdiyi değiştir. Çalıştırmadan önce beklenen sonucu yaz; gerçek sonuçla karşılaştır ve fark varsa hangi satırdan kaynaklandığını açıkla.

Kaynak ve çalışma ortamı

Örnekler küçük öğretim senaryolarıdır. Java/C#/PHP/Swift çalışma ortamını kendi cihazında ayrıca doğrula; yazılı sonuçlar beklenen davranışı açıklar.