Figure ve figcaption
<figure> ve <figcaption> ile görsellere başlık eklemeyi öğrenirsin.
figure öğesi
<figure> öğesi, bir içeriği başlığıyla birlikte gruplamak için kullanılır. İçine görsel, video, kod parçası ya da alıntı koyabilirsin. Önemli olan: içerik kendine yeten bir birimdir, çevresindeki metne bağımlı değildir.
Örneğin bir blog yazısındaki bir görsel ve onun açıklaması figure içine alınabilir. Sayfa düzeninde bu bir bütün olarak taşınır; başka yere konduğunda da anlamını yitirmez.
figcaption ile başlık
<figcaption> öğesi figure içine bir başlık ekler. Figure içinde yalnızca bir figcaption olur; genelde görselin hemen altına ya da üstüne yazılır.
Başlık görselin ne anlattığını kısaça söyler: Yaylada sabah saatleri gibi. Bu metin görselden ayrı bir paragraf olarak değil, görselle bağlantılı olarak okunur.
Uygulama Başlıklı görsel oluştur
Body içine bir <figure> öğesi ekle. İçinde bir <img> (src ve alt ile) ve bir <figcaption> (kısa açıklama metniyle) olsun.
Örnek çözümü göster
<body>
<figure>
<img src="https://example.com/sanat/heykel.jpg" alt="Bronz heykel">
<figcaption>Anadolu medeniyetlerinden bronz heykel</figcaption>
</figure>
</body>Kendini test et
-
figure ve figcaption yerleşimi için hangisi doğrudur?
- figcaption, img'yi doğrudan sarmalar
- figcaption, figure'ün dışında durur
- figure, img ve figcaption'ı birlikte sarar
- img, figure'ün dışında durur
Cevabı göster
figure, img ve figcaption'ı birlikte sarar — Doğru. figure hem img'yi hem figcaption'ı bir bütün olarak sarar.
-
Öğeyi göreviyle eşleştir
- figure
- İçeriği başlığıyla gruplar
- figcaption
- Başlığı taşır
- img
- Görseli yükler
- p
- Metin paragrafı
-
figcaption etiketini kapat
<figcaption>Anadolu medeniyetlerinden bronz heykel____Cevabı göster
<figcaption>Anadolu medeniyetlerinden bronz heykel</figcaption>