CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Özet - Responsive hero

HTML kursu · İleri seviye · Ders 12/56

<picture> ile ekran başına değişen bir hero görseli yazarsın.

Bu grupta öğrendiklerimiz

Bu grupta responsive görsel tekniklerini öğrendin:

  • <picture> ve <source> ile görsel seçimi
  • media ile ekran bazlı kare (art direction)
  • type ile AVIF/WebP progresif sunumu
  • width ve height ile yer ayırma ve CLS azaltma
  • dekoratif görselde alt="" kullanımı

Bu beş tekniği birleştirirsen, hem hızlı hem erişilebilir hem de ekran başına doğru kareyi gösteren bir görsel ortaya çıkar. Şimdi bunları bir responsive hero görselinde birleştireceğiz.

Uygulama Responsive hero görseli yaz

Body içine bir <picture> ekle. İçine iki <source> koy: birincinin media özniteliği (min-width: 800px), srcset özniteliği hero-genis.avif, type özniteliği image/avif; ikincinin media özniteliği (max-width: 799px), srcset özniteliği hero-dar.webp, type özniteliği image/webp olsun. Sonra bir <img> ekle; src özniteliği hero-dar.png, alt özniteliği Hero görsel, width özniteliği 800, height özniteliği 450 olsun.

Örnek çözümü göster 
<body>
  <picture>
    <source media="(min-width: 800px)" srcset="hero-genis.avif" type="image/avif">
    <source media="(max-width: 799px)" srcset="hero-dar.webp" type="image/webp">
    <img src="hero-dar.png" alt="Hero görsel" width="800" height="450">
  </picture>
</body>

Kendini test et

  1. Kavramı rolüyle eşleştir

    <picture>
    Görsel seçim kapsayıcısı
    media
    Ekran koşulu
    type
    Biçim (MIME)
    width/height
    Yer ayırma
    alt=""
    Süs görsel

  2. Responsive hero'yu picture ile aç

    <____>
  <source media="(min-width: 800px)" srcset="hero-genis.avif" type="image/avif">
  <img src="hero-dar.png" alt="Hero görsel" width="800" height="450">
</picture>
    Cevabı göster 
    <picture>
  <source media="(min-width: 800px)" srcset="hero-genis.avif" type="image/avif">
  <img src="hero-dar.png" alt="Hero görsel" width="800" height="450">
</picture>

  3. Bir responsive hero görseli için en uygun yapı hangisidir?

    • picture içinde media ile source'lar + son img yedek
    • Sadece img ve CSS background-image
    • picture içinde yalnızca bir source ve img olmadan
    • Birden fazla img etiketi yan yana
    Cevabı göster

    picture içinde media ile source'lar + son img yedek — Doğru. media ile source + img yedek responsive hero için idealdir.

İ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