Yükleniyor...

HTML head

Önceki oturum belge head’inin bir çocuğuna odaklandı: title. Şimdi head öğesinin kendisine uzaklaşın — tarayıcılar, arama araçları ve bağlı kaynaklar için sayfa hakkındaki meta veriyi tutan kutu. Ziyaretçiler head’i ana görünümdeki bir hikâyeyi okur gibi okumaz. Etkisini sekme etiketi, doğru karakterler, mobil ölçekleme ve gövde içeriği boyanmadan önce yüklenen stil sayfaları üzerinden hissederler.

head ne işe yarar

<head>...</head>, <html> içinde yer alır; genellikle açılış html etiketinden hemen sonra ve <body>’den önce. Meta veri ve kaynak bağlantıları için belgenin kontrol odasıdır. Görünür bir banner değildir. Daha sonra <header> öğesiyle oluşturabileceğiniz görünür sayfa banner’ı farklı bir işi olan farklı bir etikettir.

Doğrudan yanıt

Meta veriyi <head>...</head> içine koyun: bir title, genellikle <meta charset="UTF-8">, mobil düzen için sıkça bir viewport meta ve harici CSS kullandığınızda <link rel="stylesheet" href="...">. Görünür başlıklar, paragraflar, görseller ve etkileşimli arayüz <body> içine gider. title, head’in önemli bir çocuğudur — head’in yerini tutmaz.

Yaygın çocuklara kısa bakış

📊 Yaygın head çocukları

Öğe Rol
title Sekme / belge etiketi
meta charset Karakter kodlaması (UTF-8)
meta viewport Mobil genişlik ve ölçek ipucu
link stylesheet Harici CSS dosyası
style İsteğe bağlı iç CSS
script İsteğe bağlı betikler (yerleşim alışkanlıkları değişir; birçok yeni başlayan body sonunda yükler)

Pratik bir başlangıç head’i

İlk günde her olası meta etiketine ihtiyacınız yoktur. Güvenilir bir yeni başlayan head’i kodlamayı, mobil viewport’u, belge başlığını ve CSS ayrı bir dosyadaysa stil sayfası bağlantısını kapsar.

Pratik bir başlangıç head’i

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<p>Visible content lives in the body.</p>
</body>
</html>

Örneği okumak

  • meta charset="UTF-8" tarayıcıya karakterleri nasıl çözeceğini söyler — önceki oturumlardaki emoji ve Latin olmayan metin dahil
  • viewport, mobil tarayıcıların küçültülmüş masaüstü düzeni yerine cihaz genişliğini kullanmasına yardımcı olur
  • title, page-title oturumunda pratik ettiğiniz gibi sekmeyi etiketler
  • link rel="stylesheet", CSS kurallarını her HTML dosyasına koymadan styles.css’i bağlar
  • Ziyaretçinin sayfada okuduğu her şey body altındadır

Charset önce, head’de erken

Charset meta’sını head’in üstüne yakın koyun ki tarayıcı belgenin geri kalan metnini yorumlamadan önce kodlamayı bilsin. Nadir bir eski kısıtlama aksini söylemedikçe UTF-8 modern varsayılandır. Eksik veya geç charset, “rastgele” bozulma gibi görünen kırık karakterlerin klasik nedenidir.

Viewport ve mobil tarayıcılar

Viewport meta olmadan birçok telefon geniş bir masaüstü tuvali varsayar ve sayfayı küçültür. Yaygın başlangıç width=device-width, initial-scale=1.0, tarayıcıya cihaz genişliğine uyum sağlamasını ve normal bir yakınlaştırmayla başlamasını söyler. Duyarlı tasarımı sonra CSS ile incelteceksiniz; viewport, bu düzenleri telefonlarda kullanılabilir kılan HTML tarafındaki el sıkışmadır.

head’den CSS bağlamak

Harici stil sayfaları sunumu yapıdan ayrı tutar. head içindeki link öğesi, rel="stylesheet" ve bir href yolu ile CSS bağlamanın yeni başlayan dostu yoludur. Yollar daha önce öğrendiğiniz dosya yolu fikirlerini izler. CSS dosyası yoksa HTML yine çalışır — yalnızca stillenmemiş görünür.

head vs body vs header

  • head — meta veri ve kaynak bağlantıları; ana okunabilir makale değil
  • body — ziyaretçilerin okuduğu ve etkileştiği görünür içerik
  • header — body içinde banner veya giriş blokları için görünür bir bölümleme öğesi (daha sonraki düzen oturumlarında kullanacaksınız)
    head’i header diye yeniden adlandırmayın; takma ad sandığınız için. Farklı öğelerdir. Karıştırmak geçersiz veya etkisiz işaretlemeye yol açar.

Betikler ve head (yeni başlayan notu)

Betikler head veya body içinde görünebilir. Birçok öğretim sayfası, HTML yapısı önce var olsun diye basit betikleri body sonunda yükler. Gelişmiş yükleme stratejileri sonra gelir. Bu oturum için bilin: script bir head çocuğu olarak izinlidir, ancak görünür içerik yine de head’e ait değildir.

Editörünüzde pratik

  1. html, head ve body içeren temel bir HTML iskeletinden başlayın.
  2. head içinde UTF-8 charset, bir viewport meta ve net bir title ekleyin.
  3. Varsa basit bir styles.css’e link ekleyin (veya yol gerçek olsun diye boş bir dosya oluşturun).
  4. Tüm görünür metni ve başlıkları yalnızca body içinde tutun.
  5. View Source veya DevTools Elements ile head bölümünün niyetinize uyduğunu doğrulayın.
  6. Viewport’u geçici olarak kaldırın, dar bir pencerede veya telefon emülatöründe yeniden yükleyin (mümkünse) ve ölçeklemenin nasıl farklı hissedilebileceğini fark edin — sonra geri koyun.

Kolay hatalar

  • Paragrafları, görselleri veya ana başlıkları yalnızca head içine koymak — sanki sayfa tuvaliymiş gibi
  • Charset’i unutup özel karakterlerin ve emojilerin bozulmasına yol açmak
  • Viewport’u atlamak ve mobil düzenin tuhaf yakınlaşmasına şaşırmak
  • head’i (meta veri) header ile (kursun ilerisinde görünür bölüm) karıştırmak
  • Yalnızca title’ın yettiğini sanıp çok dilli sayfalarda charset’i dışarıda bırakmak
  • Yanlış yolla stil sayfası bağlayıp CSS hiç yüklenmeyince HTML’i suçlamak

Özet

  • head meta veri ve kaynak bağlantılarını tutar; body görünür içeriği tutar
  • Başlangıç parçaları: charset, viewport, title ve sıkça bir CSS link
  • title, head’in bir çocuğudur; head’in yerine geçmez
  • head, görünür header ile aynı öğe değildir
  • Charset’i erken koyun ki tarayıcı belgeyi doğru çözsün

🧠 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

❓
6
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