CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Özet - Kart şablonu

HTML kursu · İleri seviye · Ders 40/56

Template ve slot ile yeniden kullanılabilir kart şablonu yazarsın.

Kart şablonu özeti

Bu grupta dört temel yapı öğrendin: <template> ile şablon, <slot> ile içerik yeri, custom element adlandırma ile bileşen ismi ve shadowrootmode ile bildirimsel shadow DOM. Dördü birleşince yinelenen kart yapısı ortaya çıkar.

Doğru kart şablonu şöyle çalışır: template iskeleti hazırlar, slot dışarıdan içeriği alır, custom element adı kartı çağırır, shadow DOM iç yapıyı korur. Bu dörtlü, modern yeniden kullanılabilir bileşenlerin temelidir.

Uygulama Yinelenen kart şablonu yaz

Body içine bir <template> ekle. İçinde bir <article> olsun. Article içinde bir <h2> (metin: Başlık) ve bir <slot> (yedek metin: İçerik yok) bulunsun.

Örnek çözümü göster 
<body>
  <template>
    <article>
      <h2>Başlık</h2>
      <slot>İçerik yok</slot>
    </article>
  </template>
</body>

Kendini test et

  1. Hangisi doğru kart iskeletidir?

    • <div><h2>Başlık</h2></div>
    • <template><h2><slot></slot></h2><slot></slot></template>
    • <template><h2>Başlık</h2><p>İçerik</p></template>
    • <slot><template><h2>Başlık</h2></template></slot>
    Cevabı göster

    <template><h2><slot></slot></h2><slot></slot></template> — Doğru. template içinde h2 ve slot olan yapı, kart şablonuna uygundur.

  2. Kart başlığını yaz

    <template>
  <article>
    <h2>____</h2>
    <slot></slot>
  </article>
</template>
    Cevabı göster 
    <template>
  <article>
    <h2>Başlık</h2>
    <slot></slot>
  </article>
</template>

  3. kart şablonu kavramlarını eşleştir

    template
    şablon iskeleti
    slot
    içerik yerleştirme yeri
    custom element
    bileşen adı
    shadowrootmode
    shadow DOM modu

İleri seviye bölümündeki tüm dersler

1 İleri medya

  1. Loading lazy
  2. Decoding async
  3. Srcset ve sizes
  4. Width/height ve CLS
  5. Preload ve prefetch
  6. Özet - Performans galerisi

2 Picture ve responsive görsel

  1. Picture ve source
  2. Media özniteliği
  3. Type özniteliği
  4. Aspect-ratio
  5. Background ve img
  6. Özet - Responsive hero

3 Proje: Video oynatıcı

  1. Proje: Erişilebilir video oynatıcı
  2. Video iskeleti
  3. Track ve altyazı
  4. Poster ve önizleme
  5. Proje sonu - Video oynatıcı

4 Karmaşık formlar

  1. Form yönelimi
  2. Hidden input
  3. File upload
  4. Range ve color
  5. Output ve form event
  6. Özet - Ayarlar paneli

5 Meta veri ve SEO

  1. Meta description
  2. Open Graph
  3. Twitter card
  4. Canonical ve hreflang
  5. Title ve slug stratejisi
  6. Özet - SEO paketi

6 Proje: Schema.org işaretleme

  1. Proje: Schema.org işaretleme
  2. Itemtype ve itemid
  3. Itemprop
  4. Nested itemtype
  5. Proje sonu - Yapısal veri

7 Web bileşenleri HTML

  1. Template element
  2. Slot element
  3. Custom element isimleri
  4. Shadow DOM iskeleti
  5. Declarative shadow DOM
  6. Özet - Kart şablonu

8 Şablonlar ve partial

  1. Server-rendered vs client
  2. Partial HTML
  3. Data attributes
  4. Hydration hooks
  5. Noscript ve progressive
  6. Özet - Bileşen iskeleti

9 Proje: Dashboard widget

  1. Proje: Dashboard widget
  2. Widget iskeleti
  3. Veri görsel yapı
  4. Şablon ve slot
  5. Proje sonu - Widget

10 İleri seviye finali

  1. Meydan okuma - Responsive görsel
  2. Meydan okuma - Erişilebilir video
  3. Meydan okuma - Karmaşık form
  4. Meydan okuma - SEO ve yapısal veri
  5. Meydan okuma - İleri seviye projesi