CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Meydan okuma - Belge iskeleti

HTML kursu · Başlangıç · Ders 64/68

Sıfırdan tam bir HTML belge iskeleti yazarak temelleri test edersin.

Belge iskeletini hatırla

Bir HTML belgesi, tarayıcının tanıdığı sabit bir iskeletle başlar. <!DOCTYPE html> belgenin türünü bildirir; <html lang="tr"> kök etikettir; <head> üst verileri, <body> ise görünür içeriği taşır.

Üst veriler arasında charset ile karakter kümesi, viewport ile mobil ölçek, <title> ile sekme başlığı verilir. Bunlar olmadan sayfa yine açılır ama doğru biçimde çalışmaz; bu yüzden iskeleti tam kurmak alışkanlık olmalı.

Uygulama Tam belge iskeletini yaz

Sıfırdan bir HTML belgesi yaz. <!DOCTYPE html> ile başla; kök <html lang="tr"> olsun. head içine charset="utf-8" olan bir meta, viewport adlı ikinci bir meta ve <title>Kişisel Sayfa</title> ekle. body içine bir <h1> ve bir <p> koy.

Örnek çözümü göster 
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kişisel Sayfa</title>
</head>
<body>
<h1>Merhaba</h1>
<p>İlk sayfam.</p>
</body>
</html>

Kendini test et

  1. viewport meta etiketini tamamla

    <meta charset="utf-8">
<meta name="____" content="width=device-width, initial-scale=1.0">
    Cevabı göster 
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

  2. Etiketi rolüyle eşleştir

    <!DOCTYPE html>
    Belge türü bildirimi
    <html>
    Belge kökü
    <head>
    Üst veriler
    <body>
    Görünür içerik
    <title>
    Sekme başlığı

  3. <title> etiketi HTML belgesinde nereye konur?

    <!DOCTYPE html>
<html lang="tr">
  <head>
    <title>Sayfam</title>
  </head>
  <body></body>
</html>
    • body içine
    • head içine
    • html etiketinin dışına
    • doctype bildiriminden önce
    Cevabı göster

    head içine — Doğru. <title> head içine konur; sekmede görünen başlığı taşır.

Başlangıç bölümündeki tüm dersler

1 Belge temelleri

  1. HTML nedir?
  2. Belge iskeleti
  3. Head ve meta etiketleri
  4. Başlık ve dil
  5. Yorumlar ve okunabilirlik
  6. Özet - İlk HTML sayfam

2 Metin içeriği

  1. Başlıklar: h1–h6
  2. Paragraflar
  3. Satır sonu ve yatay çizgi
  4. Vurgu ve önemli metin
  5. Alıntı ve kaynak
  6. Özet - Makale sayfası

3 Proje: Hakkımda sayfası

  1. Proje: Hakkımda sayfası
  2. İskelet ve başlık
  3. Tanıtım metni
  4. Vurgu ve ayrım
  5. Proje sonu - Hakkımda

4 Bağlantılar ve gezinme

  1. Çapa bağlantıları
  2. Mutlak ve göreli URL'ler
  3. Sayfa içi bağlantılar
  4. Bağlantı hedefleri
  5. E-posta ve telefon bağlantıları
  6. Özet - Gezinme menüsü

5 Listeler

  1. Sırasız listeler
  2. Sıralı listeler
  3. Açıklama listeleri
  4. İç içe listeler
  5. Liste öğelerinde bağlantı
  6. Özet - İçindekiler tablosu

6 Proje: Kartvizit sayfası

  1. Proje: Kartvizit sayfası
  2. İsim ve unvan
  3. İletişim listesi
  4. Beceriler ve bağlantılar
  5. Proje sonu - Kartvizit

7 Görseller ve medya

  1. Görsel ekleme
  2. Görsel boyutları
  3. Figure ve figcaption
  4. Ses ve video
  5. Alternatif kaynaklar
  6. Özet - Medya galerisi

8 Tablolara giriş

  1. Tablo iskeleti
  2. Başlık hücreleri
  3. Tablo bölümleri
  4. Başlık ve caption
  5. Hücre birleştirme
  6. Özet - Ders programı tablosu

9 Proje: Tarif sayfası

  1. Proje: Tarif sayfası
  2. Tarif başlığı ve özet
  3. Malzeme listesi
  4. Adımlar ve pişirme tablosu
  5. Proje sonu - Tarif sayfası

10 Formlara giriş

  1. Form iskeleti
  2. Etiketli input
  3. Input türleri
  4. Textarea ve button
  5. Seçim alanları
  6. Özet - Geri bildirim formu

11 Anlamsal etiketlere giriş

  1. Anlamsal etiketler neden önemli
  2. Header ve footer
  3. Nav ve main
  4. Article ve section
  5. Aside ve address
  6. Özet - Anlamsal blog iskeleti

12 Başlangıç finali

  1. Meydan okuma - Belge iskeleti
  2. Meydan okuma - Metin ve bağlantılar
  3. Meydan okuma - Listeler ve tablolar
  4. Meydan okuma - Form ve anlamsal yapı
  5. Meydan okuma - Başlangıç projesi