HTML · Sayfanın iskeleti — videolu atölye

Sayfanın iskeleti

Tam bir HTML dosyasını doğru belge iskeletiyle kaydetmek.

Kavramı kur

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.

Neden böyle çalışıyor?

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.

Çalışma sırası

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.

İkinci örnek · 1

DOCTYPE belge türünü belirtir; ekranda bir satır yazdırmaz. Kodun tamamı yazılı derste bulunur.

<!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>

Beklenen sonucu oku

body içine görünür öğeler yazılır; meta ayarlarını buraya taşımak gerekmez.

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

Bir değeri sen değiştir

Örneği index.html olarak kaydet ve tarayıcıda aç. title ile h1 değerlerini farklı yap; hangisinin nerede göründüğünü not et.

Hata nereden gelir?

Başlığın sekmede değişmemesi yanlış dosyayı açtığını veya kaydetmediğini gösterebilir; dosya yolunu karşılaştır.

Kendi çözümünü kur

Telefon görünümünü açıp viewport satırı varken ve yokken davranışı karşılaştır. Dosya uzantısını denetle: index.html.txt bir HTML dosyası olarak açılmayabilir.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu 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>

Kendini kontrol et

lang="tr" hangi işi yapar? Yanıt: Belgenin temel dilini bildirir; sayfayı otomatik olarak Türkçeye çevirmez.

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