Görsel Açıklamaları

Ders 16/45 · 5 dakika · 2 soru · 1 egzersiz

Bu dersin sonunda resimlere görünür açıklamalar ekleyebileceksiniz.

`figure` ve `figcaption`

figure etiketi resmi ve ona ait açıklamayı bir arada tutar. figcaption ise görünür açıklamadır.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Figure</title>
</head>
<body>
  <figure>
    <img src="baldiyetapanadam.png" alt="Bir adam, oyun karakteri Baldi'nin önünde eğilmiş duruyor." width="320" height="190">
    <figcaption>Şekil 1: Sadık bir hayran.</figcaption>
  </figure>
</body>
</html>

figure yalnızca resimler için değildir. Grafikler, kod örnekleri veya alıntılar da içine konabilir.

`alt` ile `figcaption` farkı

alt, resmi göremeyen kişiye resimde ne olduğunu anlatır.
figcaption, herkesin gördüğü ek bilgidir: resmin başlığı, kaynağı, tarihi gibi.

Örnek olarak bir köprü fotoğrafı için:

alt: Gün batımında Boğaz Köprüsü
figcaption: Fotoğraf: Ayşe Yılmaz, 2024

İleri seviye: Farklı ekranlara farklı resim

İsterseniz okuyun, şimdilik atlayabilirsiniz

Telefonlar için büyük bir resim indirmek gereksizdir. srcset niteliğiyle tarayıcıya birkaç seçenek sunabilirsiniz. Tarayıcı ekrana uygun olanı seçer.

480w ifadesi, o dosyanın 480 piksel genişliğinde olduğunu söyler. sizes ise resmin ekranda ne kadar yer kaplayacağını anlatır.

<img src="buyuk.jpg" srcset="kucuk.jpg 480w, buyuk.jpg 1200w" sizes="(max-width: 600px) 480px, 1200px" alt="Manzara">

Sık yapılan hatalar

alt ve figcaption içine aynı metni yazmak. Ekran okuyucu aynı cümleyi iki kez okur. İkisine farklı bilgiler yazın.

figcaption etiketini figure dışına yazmak. Bu etiket yalnızca figure içinde kullanılabilir.

Soru 1

Resmin kaynağını herkesin görmesini istiyorsanız nereye yazarsınız?

alt niteliğine :: alt normalde ekranda görünmez.
figcaption etiketine :: Doğru.
title etiketine :: title sekme başlığıdır.

Soru 2

figcaption nerede bulunmalıdır?

figure etiketinin içinde :: Doğru.
img etiketinin içinde :: img boş bir elemandır, içine bir şey yazılamaz.
head etiketinin içinde :: Görünür içerik head içine yazılmaz.

Açıklamalı resim

Hedefteki sonucu elde edin. Yalnızca body içine yazılacak kodu yazın. Resim dosyası baldiyetapanadam.png, alt metni Eğilmiş duran bir adam, genişliği 320, yüksekliği 190 olsun. Görünür açıklama Şekil 1 yazsın.

<figure>
  <img src="baldiyetapanadam.png" alt="Eğilmiş duran bir adam" width="320" height="190">
  <figcaption>Şekil 1</figcaption>
</figure>

Bu derste öğrendikleriniz

figure resim ile açıklamasını bir arada tutar.
figcaption görünür açıklamadır, alt ise resmin yazılı karşılığıdır.
alt ve figcaption farklı bilgiler içermelidir.

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.