HTML alapok › 4. modul: Képek és média › Gyorsítópálya
🚀 HTML alapok · 4. modul · Gyorsítópálya
Képek és média – gyorsítópálya
A 4. modul teljes tudása egyetlen leckében: képek beillesztése, alt szöveg, formátumok és méret, képaláírás, jogtiszta képek és forrásmegjelölés. Ha valahol elakadsz, a részletes leckék egy kattintásra vannak.
Mikor válaszd?
- ha gyorsan haladsz, és egy órában szeretnéd átvenni a modult;
- ha ismételsz, például dolgozat előtt;
- ha érettségire készülsz, és egy tömör áttekintés kell.
Részletesen
4.1 Képek a weboldalon →
4.2 figure és figcaption →
4.3 Jogtiszta képek →
Puska
| Téma | Lényeg |
|---|---|
img | src, alt, width, height; üres elem. Lejjebb lévő képnél loading="lazy". |
| alt | Rövid, a lényeget adja vissza. Díszítő képnél alt="". Linkes képnél: hová visz. |
| Formátum | Fotó: WebP vagy JPG · ábra, átlátszó: PNG · logó, ikon: SVG. |
| Méret | A kép ne legyen nagyobb, mint ahol megjelenik; kicsinyítés és WebP (például Squoosh). |
figure + figcaption | Önálló ábra felirattal; a felirat más, mint az alt. |
| Szerzői jog | A kép alapból védett; a keresőben találtat nem szabad csak úgy használni. |
| Creative Commons | BY: nevezd meg · SA: így add tovább · NC: nem kereskedelmi · ND: ne módosítsd · CC0: szabad. |
| TASL | Cím, szerző, forrás, licenc a képaláírásban, linkekkel. |
| Képmás | Felismerhető emberről csak hozzájárulással. |
Villámkérdések
Előbb gondold végig a választ, csak utána nyisd ki!
Mit olvas fel a felolvasó, ha hiányzik az alt?
Gyakran a fájlnevet, ami semmitmondó.
Melyik első képre ne tegyél lusta betöltést?
Az oldal tetején, azonnal látható képre.
Mi a különbség az alt és a figcaption között?
Az alt a kép helyett áll, a figcaption mindenki számára látható felirat.
Módosíthatsz-e egy CC BY-ND licencű képet?
Nem, az ND tiltja a módosítást.
Hogyan derítheted ki egy ismeretlen kép forrását?
Fordított képkereséssel (Google Lens, TinEye).
Gyorsfeladatok
Alt-verseny
Párban: mindketten írtok alt szöveget ugyanahhoz a három képhez (például egy csapatfotó, egy grafikon, egy mém). Olvassátok fel egymásnak csukott szemmel: melyik alapján tudtad elképzelni a képet?
Formátumválasztó
Melyik formátumot választanád? a) az iskola logója; b) nyaralós fotó; c) képernyőkép egy programról; d) egy vonalas ikon.
Megoldás
a) SVG, b) WebP vagy JPG, c) PNG (vagy WebP), d) SVG
TASL
Keress az Openverse-ön egy képet a kedvenc állatodról, és írd meg hozzá a teljes figure-t forrásmegjelöléssel.
Vegyes hibavadászat
A
<img src="kepek/csapat.jpg" alt="kép">
Mi a baj?
Semmitmondó alt; hiányzik a width és a height is.
B
<figure><img … ></figure><figcaption>Naplemente</figcaption>
Mi a baj?
A figcaption a figure-ön kívül van.
C
Mi a baj?
Egy 6 MB-os, 6000 képpont széles fotó egy 400 képpont széles helyen: kicsinyíteni kell és WebP-re alakítani.
D
Mi a baj?
Egy osztálytárs fényképe engedély nélkül a nyilvános oldalon: a képmáshoz való jog miatt tilos.
Záróprojekt: online kiállítás
Rendezz egy kis online kiállítást egy választott témáról (például „Híres hidak”, „A világűr képekben”, „Régi videojáték-konzolok”) egy új kiallitas.html oldalon.
- Legyen egy h1 és egy rövid bevezető bekezdés.
- Legalább négy kép figure-ben, múzeumi táblácskával (figcaption), TASL szerinti forrásmegjelöléssel.
- Minden kép kicsinyítve, WebP-ben, méretekkel, a lejjebb lévők lusta betöltéssel, és mindegyiknek jó alt szövege legyen.
- A képek csak saját, közkincs vagy CC-licencű képek lehetnek.
Kész vagy, ha…
…a W3C validátor nem talál hibát, a képek gyorsan betöltődnek, és minden kép forrása és licence ellenőrizhető.
Tudom, hogy…
Pipáld ki gondolatban! Ahol bizonytalan vagy, ott a zárójelben lévő lecke segít.
- …hogyan illesztek be képet, és hogyan írok jó alt szöveget. (4.1)
- …melyik formátumot mikor választom, és miért fontos a fájlméret. (4.1)
- …mire jó a figure és a figcaption, és miben más a felirat, mint az alt. (4.2)
- …hogy a netről talált kép nem szabad automatikusan. (4.3)
- …mit jelentenek a Creative Commons-licencek, és hogyan jelölöm meg a forrást. (4.3)
- …hogy emberről csak engedéllyel teszek ki fotót. (4.3)
Tanároknak
Mire jó a gyorsítópálya?
Differenciálásra, ismétlésre, dolgozat előtti összefoglalásra és érettségi-felkészítésre. Az online kiállítás a technikai (img, figure), az akadálymentességi (alt) és a jogi (licenc, TASL) tudást egyetlen, személyes érdeklődésre építő projektben kéri.
Időterv (45 perc)
Puska és villámkérdések: 12 perc. Gyorsfeladatok: 15 perc. Hibavadászat: 5 perc. Záróprojekt elkezdése: 13 perc.
Értékelés
A „Tudom, hogy…” lista önértékelésre, a kiállítás a W3C validátor, a képméret és a forrásmegjelölés ellenőrzésével értékelhető, akár párban, „kurátori zsűrivel”.