HTML alapok › 4. modul: Képek és média › 4.2 lecke
HTML alapok · 4.2 lecke
figure és figcaption: képaláírás, ahogy a múzeumban
A múzeumban minden műtárgy mellett ott egy kis tábla: cím, alkotó, évszám. A weben a figure és a figcaption pontosan ezt adja: összekapcsolja a képet a hozzá tartozó felirattal. Ebben a leckében egy saját virtuális kiállítást rendezel.
A lecke végére
- képet és képaláírást kapcsolsz össze a
figureés afigcaptioncímkével; - megkülönbözteted az alt szöveget és a képaláírást;
- ábrát, diagramot és idézetet is ábraként jelölsz;
- egy kis online kiállítást rendezel.
Mielőtt elkezded
Szükséged lesz a képek beillesztésére.
A figure és a figcaption
<figure> <img src="kepek/csillagos-eg.webp" alt="Kék és sárga örvénylő égbolt egy falu fölött" width="1200" height="950" loading="lazy"> <figcaption>Vincent van Gogh: Csillagos éj (1889)</figcaption> </figure>
A figure egy önálló egységet jelöl, amelyre a szöveg hivatkozhat („lásd az 1. ábrát”), a figcaption pedig a hozzá tartozó feliratot. A felolvasóprogramok a feliratot a képhez tartozóként olvassák fel.
Miért ez a festmény?
Van Gogh 1890-ben halt meg, így a művei ma már közkincsek (a szerzői jog az alkotó halála után 70 évig tart), a róla készült hű digitális másolatok pedig szabadon használhatók. A 4.3 leckében erről részletesen lesz szó.
Alt szöveg kontra képaláírás
Jósold meg!
Ha a figcaption és az alt ugyanazt a szöveget tartalmazza, mit hall a felolvasót használó látogató?
Megoldás
Kétszer ugyanazt. Ezért a két szöveg legyen más: az alt írja le, mi látszik a képen, a figcaption adja meg a címet, az alkotót, a forrást.
Nem csak kép: ábra, diagram, idézet
A figure-be bármi kerülhet, ami egy önálló, feliratozható egység: diagram, térkép, kódrészlet, videó vagy idézet.
<figure> <blockquote> <p>A tudás hatalom.</p> </blockquote> <figcaption>Francis Bacon (1597)</figcaption> </figure>
Egy figure, több kép
Egy figure-ben több kép is lehet egy közös felirattal, például egy „előtte–utána” képpár.
Kihívás: rendezd meg a virtuális múzeumot!
Kihívás: kurátor vagy
Válassz egy témát (például kedvenc festők, híres épületek, űrfelvételek, régi videojáték-konzolok), és keress hozzá 3–4 szabadon felhasználható képet (a 4.3 lecke segít a keresésben). Mindegyiket tedd egy figure-be, és írj hozzá múzeumi táblácskát a figcaption-ben: cím, alkotó vagy helyszín, évszám, és egy érdekes mondat.
Nemzetközi ötlet
A Google Arts & Culture és a nagy múzeumok (például a Rijksmuseum vagy a Metropolitan Museum) online gyűjteményeiben rengeteg szabadon felhasználható, nagy felbontású műalkotás-fotó van. Mindig nézd meg az adott kép felhasználási feltételeit!
Hibavadászat
1. Felirat a figure-ön kívül
<figure><img src="kepek/hid.webp" alt="…"></figure> <figcaption>A Lánchíd</figcaption>
Mi a baj?
A figcaption csak a figure-ön belül, annak első vagy utolsó elemeként állhat.
2. Ugyanaz kétszer
<img alt="A Lánchíd" …> <figcaption>A Lánchíd</figcaption>
Mi a baj?
A felolvasó kétszer mondja ugyanazt. Az alt írja le a képet („Lánchíd esti kivilágításban a Duna fölött”), a felirat adja a címet és a forrást.
3. Díszítő ikon ábraként
<figure><img src="kepek/csillag-ikon.svg" alt=""> <figcaption>Csillag</figcaption></figure>
Mi a baj?
A díszítő ikon nem önálló ábra, nem kell neki figure és felirat.
Projekt: galéria a saját oldaladon
Folytasd a saját oldalad projektet!
- Készíts egy
galeria.htmloldalt, és linkeld a menüből. - Tegyél rá legalább három képet figure-rel és figcaptionnel (saját rajz, tárgyfotó vagy szabadon felhasználható kép).
- Minden képnek legyen az aláírástól eltérő, leíró alt szövege.
Kész vagy, ha…
…a galériád olyan, mint egy kis múzeum: minden képnek van táblácskája, és a felolvasó sem mondja kétszer ugyanazt.
Ellenőrizd magad!
Mire jó a figure?
Egy önálló, feliratozható egység (kép, ábra, idézet) jelölésére.
Hol állhat a figcaption?
A figure-ön belül, első vagy utolsó elemként.
Mi a különbség az alt és a figcaption között?
Az alt a képet helyettesíti (csak akkor jelenik meg, ha a kép nem látszik), a figcaption mindenki számára látható kiegészítő felirat.
Kerülhet-e idézet figure-be?
Igen, blockquote-tal és a forrást megadó figcaptionnel.
Tanároknak
Kerettantervi kapcsolódás
NAT 2020, Digitális kultúra, 9. évfolyam, Publikálás a világhálón (képek, feliratok), a szerzői jog és a forrásmegjelölés. Tantárgyközi kapcsolódás: vizuális kultúra, történelem.
Módszertan
A virtuális múzeum a kurátori szerepbe helyezi a diákot: válogat, rendez, feliratoz. A feladat a vizuális kultúrával és a történelemmel is összekapcsolható. Az alt és a figcaption különbsége gyakori tévedés, ezért jóslós feladat tárgya.
Időterv
A figure: 8 perc. Alt kontra felirat: 8 perc. Nem csak kép: 6 perc. Virtuális múzeum elkezdése: 15 perc. Hibavadászat: 8 perc.