CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Meydan okuma - Responsive görsel

HTML kursu · İleri seviye · Ders 52/56

<picture> ile ekran ve format bazlı değişen bir hero yazarsın.

Responsive görsel meydan okuması

Bu meydan okuma, responsive görsel konusunun tamamını yoklar: <picture> kapsayıcısı, <source> ile ekran ve format seçimi, <img> yedeği ve performans ayarları.

Bir hero görsel kurman istenecek: media ile dar ve geniş ekran karesi, type="image/webp" ile modern format, srcset ve sizes ile çözünürlük seçimi, loading="lazy" ve decoding="async" ile akıcı yükleme, son olarak width ve height ile yer ayrımı yapılmalı. <figure> ve <figcaption> ile başlığı da unutma.

Uygulama Hero görseli sıfırdan yaz

Body içine bir <figure> ekle. İçine bir <picture> koy. picture içine iki <source> yaz: birincisi media="(min-width: 800px)" ve srcset="/gorseller/kahraman-genis.jpg" öznitelikli, ikincisi type="image/webp" ve srcset="/gorseller/kahraman.webp" öznitelikli olsun. picture'ın son çocuğu olarak <img> ekle: src="/gorseller/kahraman-dar.jpg", alt="Dağ manzarası", width="1200", height="600", loading="lazy", decoding="async", srcset="/gorseller/kahraman-dar.jpg 600w" ve sizes="100vw" öznitelikleriyle. picture'dan sonra bir <figcaption> ekle ve içine bir başlık yaz.

Örnek çözümü göster 
<body>
  <figure>
    <picture>
      <source media="(min-width: 800px)" srcset="/gorseller/kahraman-genis.jpg">
      <source type="image/webp" srcset="/gorseller/kahraman.webp">
      <img src="/gorseller/kahraman-dar.jpg"
           alt="Dağ manzarası"
           width="1200" height="600"
           loading="lazy" decoding="async"
           srcset="/gorseller/kahraman-dar.jpg 600w"
           sizes="100vw">
    </picture>
    <figcaption>Manzara üzerimizde etkileyici.</figcaption>
  </figure>
</body>

Kendini test et

  1. Hangi öznitelik, source'u ekran genişliğine göre seçer?

    • srcset
    • sizes
    • media
    • type
    Cevabı göster

    media — Doğru. media özniteliği bir ekran koşulu tanımlar; koşul sağlanınca o source seçilir.

  2. WebP source'unu yaz

    <picture>
  <source ____="image/webp"
        srcset="/gorseller/kahraman.webp">
  <img src="/gorseller/kahraman-dar.jpg" alt="Dağ manzarası">
</picture>
    Cevabı göster 
    <picture>
  <source type="image/webp"
        srcset="/gorseller/kahraman.webp">
  <img src="/gorseller/kahraman-dar.jpg" alt="Dağ manzarası">
</picture>

  3. Özniteliği rolüyle eşleştir

    media
    Ekran koşulu
    type
    Dosya formatı
    srcset
    Görsel yolu
    sizes
    Görünüm genişliği
    loading
    Yükleme zamanı

İ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