Belge Yapısı: DOCTYPE html head body
Geçerli bir HTML5 belgesini sıfırdan yazın: DOCTYPE bildirimi, html kök öğesi, üst veriler için head ve içerik için body.
Belge Yapısı: DOCTYPE html head body, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Her HTML Belgesinin Aynı İskeleti Vardır
Geçerli bir HTML5 belgesi her zaman bir DOCTYPE bildirimiyle başlar, bir html kök öğesi içerir ve bunun içinde üst veriler için bir head bölümü ile görünür içerik için bir body bölümü bulunur. Bu yapıyı anlamak ilk adımdır.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>DOCTYPE Bildirimi
<!DOCTYPE html> bir HTML etiketi değildir — tarayıcıya sayfayı standartlar modunda görüntülemesi için verilen bir talimattır. Bu bildirim olmadan tarayıcılar, sayfaları tutarsız biçimde görüntüleyen "standart dışı moda" geri döner. Bunu her zaman 1. satıra yerleştirin.
<html> Öğesi ve lang Özniteliği
<html> öğesi belgenin köküdür. Sayfanın dilini belirtmek için bir lang özniteliği ekleyin. Ekran okuyucuları doğru telaffuz motorunu seçmek için bu bilgiyi kullanır; arama motorları da yerelleştirilmiş sonuçlar sunmak için bundan yararlanır.
<html lang="en">
<!-- or -->
<html lang="fr">
<html lang="de"><head> Öğesi
<head>, sayfa içeriğinin kendisi yerine sayfa hakkındaki bilgileri, yani üst verileri içerir. head içindeki hiçbir şey kullanıcılar tarafından doğrudan görülmez; ancak tarayıcının ve arama motorlarının sayfayı nasıl ele alacağını etkiler.
charset ve viewport Meta Etiketleri
<meta charset="UTF-8">, tarayıcıya dosyayı UTF-8 olarak çözümlemesini ve tüm uluslararası karakterleri desteklemesini söyler. <meta name="viewport">, duyarlı tasarımın mobil cihazlarda çalışmasını sağlar.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><title> Öğesi
<title> metni tarayıcı sekmesinde, yer imlerinde ve arama motoru sonuçlarında görünür. Metni kısa (50–60 karakter), açıklayıcı tutun ve marka adını sona ekleyin.
<title>Getting Started with HTML | CoddyKit</title>CSS ve Yazı Tiplerini Bağlama
Harici stil sayfalarını head içinde <link> ile bağlayın. rel="stylesheet" ve doğru href değerini kullanın. Google yazı tipleri ve diğer yazı tipi hizmetleri de bu şekilde bağlanır.
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet"><body> Öğesi
Sayfada görünen her şey <body> içinde yer alır: başlıklar, paragraflar, görseller, düğmeler, formlar ve betikler. body, kullanıcının gördüğü ve etkileşim kurduğu bölümdür.
Betik Etiketleri: Nereye Yerleştirilir
<script src="app.js" defer></script> öğesini <head> içine yerleştirin. defer özniteliği betiği paralel olarak indirir ve HTML tamamen ayrıştırıldıktan sonra çalıştırır; bu, en güvenli varsayılan tercihtir.
<head>
<script src="app.js" defer></script>
</head>HTML'de Yorumlar
HTML'nize not eklemek için <!-- comment --> kullanın. Yorumlar kullanıcılara gösterilmez, ancak kaynak görünümünde görülebilir. Bunları amacı açıklamak, bölümleri işaretlemek veya hata ayıklama sırasında kodu geçici olarak devre dışı bırakmak için kullanın.
<!-- Navigation section -->
<nav>
...
</nav>
<!-- End navigation -->Doğrulama: W3C Doğrulayıcısı
Hataları denetlemek için HTML'nizi validator.w3.org adresine yapıştırın. Geçerli HTML, tarayıcılar arasındaki tutarsızlıkları azaltır, ekran okuyucularının sayfayı doğru ayrıştırmasına yardımcı olur ve profesyonel işçiliğin göstergesidir.
Hızlı Kontrol
<meta charset="UTF-8"> etiketi nereye yerleştirilmelidir?
Özet: HTML Belgesi İskeleti
Her HTML dosyası şunları gerektirir: → →
(charset, viewport, title, CSS bağlantıları) → (tüm görünür içerik). Bu iskelet, tarayıcılar arası tutarlılığı, erişilebilirliği ve SEO için düzgün dizine eklemeyi sağlar.Sıkça Sorulan Sorular
“Belge Yapısı: DOCTYPE html head body” dersi ücretsiz mi?
Evet — “Belge Yapısı: DOCTYPE html head body” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Belge Yapısı: DOCTYPE html head body” dersinde ne öğreneceğim?
Geçerli bir HTML5 belgesini sıfırdan yazın: DOCTYPE bildirimi, html kök öğesi, üst veriler için head ve içerik için body. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Belge Yapısı: DOCTYPE html head body” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Belge Yapısı: DOCTYPE html head body
- Anlamsal Etiketler: header nav main article footer
- Metinler, Görseller, Bağlantılar ve Listeler
- Formlar: input label button