CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Özet - İlk HTML sayfam

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

Belge iskeletini, meta etiketlerini ve yorumları birleştirerek ilk tam HTML sayfanı yazarın.

Tüm parçalar bir arada

Şu ana kadar öğrendiklerini birleştir: <!DOCTYPE html> bildirimi, <html lang="..."> kökü, <head> içinde charset, viewport ve title, <body> içinde görünen içerik ve istenirse yorumlar.

Bu parçaların tamamı bir araya gelince ilk tam HTML sayfan oluşur. Şimdi bunu adım adım sen yazacaksın.

Yorum ve girinti

Koduna yorum eklemek hangi bölümün ne işe yaradığını hatırlatır. Girinti kullanmak iç içe geçmiş etiketleri görsel olarak ayırır. İki alışkanlık birlikte kodunun okunabilirliğini artırır.

Çok uzun yorumlar yerine kısa ve öz notlar yeğle. Aynı girinti ölçüsünü tüm sayfada tutmak kodunu düzenli gösterir.

Uygulama İlk HTML sayfanı yaz — başlık bölümü

Verilen iskeletin head bölümüne şu üç etiketi ekle: <meta charset="utf-8">, <meta name="viewport" content="width=device-width, initial-scale=1"> ve <title>İlk Sayfam</title>.

Ö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">
    <title>İlk Sayfam</title>
  </head>
  <body>
  </body>
</html>

Uygulama Body içine bir yorum ekle

Body içine kısa bir yorum ekle; örneğin ana içeriğin nerede olacağını yaz. <!-- Ana içerik buraya gelecek --> gibi.

Ö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">
    <title>İlk Sayfam</title>
  </head>
  <body>
    <!-- Ana içerik buraya gelecek -->
  </body>
</html>

Kendini test et

  1. Viewport meta etiketinin görevi nedir?

    • Mobil ekranlarda doğru ölçeklemeyi sağlar
    • Sayfanın karakter kodlamasını belirler
    • Sekme başlığını ayarlar
    • Belge türünü bildirir
    Cevabı göster

    Mobil ekranlarda doğru ölçeklemeyi sağlar — Doğru. Viewport meta etiketi mobil ekranlarda sayfanın doğru ölçeklenmesini sağlar.

  2. title öğesini kapat

    <head>
  <meta charset="utf-8">
  <title>İlk Sayfam____
</head>
    Cevabı göster 
    <head>
  <meta charset="utf-8">
  <title>İlk Sayfam</title>
</head>

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