CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Özet - Anlamsal blog iskeleti

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

Tüm anlamsal etiketleri kullanarak bir blog sayfası iskeleti kurarsın.

Bu grupta öğrendiklerimiz

Bu grupta anlamsal HTML'in temel etiketlerini gördün:

  • <header> ve <footer>: üst ve alt kısım
  • <nav> ve <main>: menü ve ana içerik
  • <article> ve <section>: bağımsız yazı ve tema bölümü
  • <aside> ve <address>: yan içerik ve iletişim

Şimdi bunları birleştirip bir blog sayfası iskeleti kuracağız.

Uygulama Blog iskeleti yaz

Body içine şu yapıyı kur: <header> içinde bir <h1> (metin: Günlüğüm); <nav> içinde bir <ul> ve bir <li> (metin: Ana sayfa); <main> içinde bir <article>, onun içinde bir <h2> (metin: İlk Yazı) ve bir <p>; <aside> içinde bir <h2> (metin: İlgili); <footer> içinde bir <p> (metin: © 2024).

Örnek çözümü göster 
<body>
  <header>
    <h1>Günlüğüm</h1>
  </header>
  <nav>
    <ul>
      <li>Ana sayfa</li>
    </ul>
  </nav>
  <main>
    <article>
      <h2>İlk Yazı</h2>
      <p>Yazı metni...</p>
    </article>
  </main>
  <aside>
    <h2>İlgili</h2>
  </aside>
  <footer>
    <p>© 2024</p>
  </footer>
</body>

Kendini test et

  1. Etiketi rolüyle eşleştir

    <header>
    Üst kısım
    <nav>
    Asıl menü
    <main>
    Ana içerik
    <article>
    Bağımsız yazı
    <aside>
    Yan içerik

  2. Footer içine iletişim

    <footer>
  <____>
    <a href="mailto:info@blog.org">İletişim</a>
  </address>
</footer>
    Cevabı göster 
    <footer>
  <address>
    <a href="mailto:info@blog.org">İletişim</a>
  </address>
</footer>

  3. Bir blog sayfasında ana içeriği işaretlemek için hangi etiket kullanılır?

    • <aside>
    • <main>
    • <address>
    • <nav>
    Cevabı göster

    <main> — Doğru. main sayfanın ana içeriğini işaretler.

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