2. modul · HTML alapok · 7. lecke
Most használjuk élesben, amit az útvonalakról tanultál. Megnézzük, hogyan teszel képet az oldalra,
miért kötelező az alt, melyik képformátumot mikor válaszd
— és hogyan ágyazol be hangot, videót vagy akár egy egész másik oldalt.
alt szöveget írsz — és tudod, mikor hagyd üresen.width és height értékét, és tudod, miért.
A kép beszúrásának eleme az <img>. Üres elem —
nincs záró tagja, hiszen nincs tartalma. Két attribútuma számít:
| Attribútum | Mit jelent? |
|---|---|
src | source — hol van a kép. Útvonal, pontosan úgy, mint a linknél. |
alt | alternative — mi látható a képen, szöveggel. Kötelező. |
<h2>Naplemente a hegyekben</h2>
<img src="kepek/taj.jpg"
alt="Lila hegysziluettek naplementében"
width="360">
kepek/ mappájából — nem rajz
vagy illusztráció. Az útvonal ugyanúgy működik, mint a linkeknél: a mostani fájlhoz képest értendő.
Fontos félreértés: az <img> csak hivatkozik a
képre. A kép külön fájl marad. Ha elküldöd valakinek csak a HTML-t, a képek nélkül, nála törött
képeket fog látni. A képmappa a weboldal része.
Az alt az a szöveg, ami a kép helyett áll. Négy
helyzetben van jelentősége:
<p>Jó útvonal:</p>
<img src="kepek/logo.png"
alt="A műhely logója" width="90">
<p>Elgépelt útvonal:</p>
<img src="kepek/nincs-ilyen.png"
alt="A műhely logója" width="90">
alt szövegét
egy törött ikonnal. alt nélkül itt csak egy néma üres folt lenne.
Nyisd meg az F12 → Console fület: ott látod a 404-es hibaüzenetet is.
| Rossz | Jó | Miért? |
|---|---|---|
alt="kép" |
alt="Naplemente a hegyek fölött" |
Írd le, mi látszik, ne azt, hogy ez egy kép. |
alt="IMG_20240513.jpg" |
alt="Az osztály a ballagáson" |
A fájlnév senkinek nem mond semmit. |
alt="kutya kutya eladó kutya olcsó" |
alt="Barna tacskó a füvön" |
A kulcsszóhalmozás zavaró, és a keresők is büntetik. |
Képzeld el, hogy telefonon olvasod fel valakinek az oldalt, aki nem látja.
Amikor képhez érsz, mit mondanál? Na azt írd az alt attribútumba.
Van egy eset, amikor az alt szándékosan üres:
alt="". Ez azt jelenti: „ez a kép csak dísz,
nincs információtartalma". Például egy elválasztó hullámvonal vagy egy háttérdísz.
<img src="kepek/valaszto.png" alt="">
<img src="kepek/valaszto.png">
A különbség: az alt="" azt üzeni, „tudom, hogy itt kép van, és
szándékosan nincs mit mondani róla". A hiányzó alt
viszont hiba — a képernyőolvasó ilyenkor kénytelen felolvasni a fájlnevet, ami zavaró.
A src ugyanazokat az útvonalszabályokat követi, mint a
href (6. lecke). Nézzük ezzel a szerkezettel:
weboldal/
├── index.html
├── kepek/
│ ├── taj.jpg
│ └── profil.jpg
└── oldalak/
└── rolam.html
| Melyik fájlból? | A taj.jpg útvonala |
|---|---|
index.html | src="kepek/taj.jpg" |
oldalak/rolam.html | src="../kepek/taj.jpg" |
Minden projektben legyen egy kepek/ mappa, és oda kerüljön minden kép.
Ne szórd szét őket a főmappában — pár kép után áttekinthetetlen lesz.
Technikailag működik, hogy más weboldalán lévő képet jelenítesz meg:
<img src="https://masik-oldal.hu/kep.jpg" alt="...">
Ez viszont mások sávszélességét használja (ezt „hotlinkelésnek" hívják), és bármikor eltűnhet vagy kicserélődhet a kép. Ráadásul szerzői jogi kérdéseket is felvet. Töltsd le a képet, és tedd a saját mappádba.
Nem mindegy, milyen formátumban mented a képet. Íme az öt, amivel a weben találkozni fogsz:
| Formátum | Átlátszóság | Mire jó? |
|---|---|---|
| JPG .jpg / .jpeg |
nincs | Fényképekhez. Sok színt, lágy átmenetet kezel jól, kis fájlméret mellett. Veszteséges: minden mentéskor romlik egy kicsit. |
| PNG | van | Logókhoz, ikonokhoz, képernyőképekhez. Éles éleket és feliratokat tisztán tart. Veszteségmentes — de fotónál nagy lesz a fájl. |
| SVG | van | Logókhoz, ikonokhoz, ábrákhoz. Nem képpontokból áll, hanem utasításokból — ezért bármekkorára nagyítható, és soha nem pixeles. |
| WebP | van | Modern, mindenre jó. Kisebb, mint a JPG és a PNG, ugyanolyan minőség mellett. Minden mai böngésző támogatja. |
| GIF | van (durva) | Rövid animációkhoz. Mára elavult — helyette inkább videót vagy WebP-t használunk. |
Az alábbi három kép tartalmilag azonos, csak a formátumuk más. Nézd meg a
fájlméreteket — ezek valódi számok, a tananyag kepek/ mappájából:
<p>JPG — 13,5 kB</p>
<img src="kepek/taj.jpg" alt="Naplemente"
width="200">
<p>PNG — 66,8 kB</p>
<img src="kepek/taj.png" alt="Naplemente"
width="200">
<p>WebP — 5,1 kB</p>
<img src="kepek/taj.webp" alt="Naplemente"
width="200">
A JPG és a PNG képpontokból áll — nagyításkor kockásodik. Az SVG viszont leírás: „rajzolj ide egy kört, oda egy háromszöget". A böngésző minden méretben újrarajzolja, ezért bármekkorán éles marad.
<img src="kepek/ikon.svg" alt="Hegycsúcs"
width="40">
<img src="kepek/ikon.svg" alt="Hegycsúcs"
width="80">
<img src="kepek/ikon.svg" alt="Hegycsúcs"
width="160">
Az <img>-nek adhatsz width és
height attribútumot. Az érték képpontban értendő,
mértékegység nélkül.
<img src="kepek/profil.jpg" alt="Profilkép" width="200" height="200">
Nem azért, hogy „ekkora legyen" — a méretezést úgyis CSS-sel fogod finomítani. Hanem azért, mert a böngésző így előre tudja, mekkora helyet hagyjon a képnek, még mielőtt betöltődne.
Enélkül ez történik: elkezded olvasni a szöveget, megérkezik a kép, és az egész oldal lejjebb ugrik a szemed előtt. Ezt hívják layout-ugrásnak, és rendkívül zavaró.
A böngésző a másikat arányosan kiszámolja. Egy 800×500-as képnél a
width="400" automatikusan 250 magasságot jelent. Ez kényelmes —
de a layout-ugrás ellen csak akkor véd, ha a böngésző ismeri a kép valódi arányait.
Ha mindkét értéket megadod, de nem az eredeti arányban, a kép megnyúlik vagy összenyomódik:
width="400" height="250"
width="400" height="400"
Ha négyzetes kivágás kell, vágd meg a képet egy képszerkesztőben — ne az arányt erőszakold.
<p>Eredeti arány:</p>
<img src="kepek/taj.jpg" alt="Naplemente"
width="260" height="163">
<p>Összenyomva:</p>
<img src="kepek/taj.jpg" alt="Naplemente"
width="260" height="90">
A 6. leckében említettük: az <a> bármit körülvehet — így egy képet
is. Tedd egyszerűen az <img>-t a link belsejébe.
<a href="galeria.html">
<img src="kepek/taj.jpg"
alt="Tovább a galériához"
width="240">
</a>
<p>
<a href="index.html">
<img src="kepek/logo.png"
alt="Vissza a kezdőlapra"
width="60">
</a>
</p>
Ha a link csak egy képet tartalmaz, akkor a képernyőolvasó az
alt szövegét mondja be linkszövegként. Ezért ilyenkor az
alt ne a képet írja le, hanem azt, hogy hova visz a link:
alt="Vissza a kezdőlapra", nem alt="Piros logó".
Az <audio> elemmel hangfájlt tehetsz az oldalra. Fontos: ennek
van záró tagja, és a controls attribútum nélkül nem
látszik semmi.
<p>Egy rövid pittyenés:</p> <audio src="hang/pittyenes.wav" controls> A böngésződ nem tudja lejátszani ezt a hangot. </audio>
| Attribútum | Mit csinál? |
|---|---|
controls | Megjeleníti a lejátszó gombokat. Enélkül semmi nem látszik! |
loop | Végtelenített ismétlés. |
muted | Némán indul. |
autoplay | Magától elindul — lásd a figyelmeztetést lentebb. |
preload | none / metadata / auto — mennyit töltsön be előre. |
A magától megszólaló hang a web egyik leggyűlöltebb dolga. A böngészők ezért ma már
blokkolják: az autoplay csak akkor működik, ha a hang
néma (muted), vagy ha a felhasználó már interakcióba lépett az
oldallal. Röviden: ne használd.
A <video> ugyanúgy működik, mint az
<audio> — csak van mérete is.
<video src="video/bemutato.mp4"
width="480"
controls
poster="kepek/elonezet.jpg">
A böngésződ nem tudja lejátszani ezt a videót.
<a href="video/bemutato.mp4">Letöltés</a>
</video>
| Attribútum | Mit csinál? |
|---|---|
controls | Lejátszó gombok. Enélkül a videó néma kép marad. |
poster | Az a kép, ami lejátszás előtt látszik. Nélküle a videó első kockája — ami gyakran fekete. |
width / height | Méret képpontban, mint a képnél. |
muted, loop, autoplay | Ugyanaz, mint hangnál. |
Mert egy videófájl sok megabájt lenne, és a tananyagnak ez a része nem videóról szól. A szerkezetet
viszont pontosan látod — ha van egy .mp4 fájlod, a fenti kód működni fog.
Formátum: a weben az .mp4 a biztos választás, minden
böngésző érti.
Egy pár perces videó könnyen 100 MB fölött van. Erre valók a videómegosztók: feltöltöd YouTube-ra
vagy Vimeóra, és onnan beágyazod — ehhez pedig az
<iframe> kell, ami a következő pont.
Az <iframe> egy teljes weboldalt jelenít meg a
te oldalad belsejében, saját kis ablakban. A neve is ezt mondja: inline frame, vagyis
beágyazott keret.
<h3>Ez a befoglaló oldal</h3>
<iframe src="demo/beagyazott-pelda.html"
width="100%" height="190"
title="Beágyazott példaoldal">
</iframe>
<p>És itt folytatódik a befoglaló oldal.</p>
head-je és
saját CSS-e van. A befoglaló oldal stílusa nem hat rá, és fordítva sem.
(Mellesleg: ennek a tananyagnak minden élő előnézete pontosan így működik.)
Ezeknél nem neked kell megírnod a kódot — a szolgáltató adja. YouTube-on:
Megosztás → Beágyazás, és kimásolod a kapott
<iframe>-et. Körülbelül így néz ki:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_AZONOSITO"
title="YouTube videólejátszó"
frameborder="0"
allowfullscreen>
</iframe>
Az <iframe>-nek adj title
attribútumot. Ez ugyanazt a szerepet tölti be, mint a képnél az alt:
a képernyőolvasó ezt mondja be, amikor a keretre ér.
A legtöbb nagy oldal (Google, Facebook, bankok) letiltja a beágyazást biztonsági okokból. Ha ilyet próbálsz, üres vagy hibaüzenetes keretet kapsz. Ez nem a te hibád — az adott oldal tiltja.
A weboldalak lassúságának első számú oka a túl nagy kép. Egy mai telefon 4000×3000 képpontos, 5 MB-os fotót készít. Ha ezt felteszed az oldalra, hogy aztán 300 képpont szélesen megjelenítsd, akkor a látogató 5 MB-ot töltött le feleslegesen.
Ha sok kép van az oldalon, ezzel megmondhatod a böngészőnek, hogy a képernyőn kívül lévőket csak akkor töltse be, amikor odagörgetnek:
<img src="kepek/taj.jpg" alt="Naplemente" width="400" loading="lazy">
Az első képernyőn látszó képekre ne tedd rá — azokat úgyis azonnal látni akarod.
| Hiba | Mi történik, és mi a megoldás? |
|---|---|
Hiányzó alt |
Érvénytelen HTML, és a kép „láthatatlan" a képernyőolvasónak. Mindig írd ki — díszképnél alt="". |
| Törött kép ikon | Rossz útvonal vagy elgépelt fájlnév. F12 → Console megmondja, melyik fájlt nem találta. |
Rossz kis/nagybetű: Taj.JPG |
A saját gépeden működik, a szerveren nem. Kisbetűs fájlnevek. |
Záró tag: </img> |
Nem létezik — az img üres elem. |
| 5 MB-os fotó az oldalon | Lassú betöltés, mobilneten fájdalmas. Méretezd át és tömörítsd. |
| Torzított arány | Ne erőltess nem illő width/height párost. Vágj a képszerkesztőben. |
<audio> controls nélkül |
Semmi nem látszik az oldalon, és nem érted, miért. Tedd ki a controls attribútumot. |
| Más oldaláról hivatkozott kép | Bármikor eltűnhet, és mások sávszélességét fogyasztja. Töltsd le a saját mappádba. |
Előbb válaszolj magadban, csak utána nézd meg a megoldást.
1. Mi a különbség az alt="" és a teljesen hiányzó alt között?
Az alt="" tudatos döntés: „ez a kép csak dísz, nincs mit mondani róla" — a képernyőolvasó átugorja. A hiányzó alt hiba: a program nem tudja, mi van ott, és kénytelen a fájlnevet felolvasni.
2. Átlátszó hátterű logót készítesz. Melyik formátumot választod, és melyiket semmiképp?
SVG-t, ha van vektoros változat (bármekkorán éles), különben PNG-t. A JPG semmiképp: nem tud átlátszóságot, és az éles éleket is elmossa.
3. Miért érdemes kiírni a width és height attribútumot, ha a méretet úgyis CSS-sel állítod?
Hogy a böngésző már a kép betöltése előtt tudja, mekkora helyet kell fenntartania. Enélkül a kép megérkezésekor az egész oldal alatta lejjebb ugrik (layout-ugrás), ami olvasás közben nagyon zavaró.
4. Az oldalak/rolam.html-ben vagy, a kép a kepek/profil.jpg. Mi az src értéke?
src="../kepek/profil.jpg" — először ki kell lépni az oldalak mappából, aztán be a kepek-be.
5. Egy képet linkké alakítasz, ami a kezdőlapra visz. Mit írj az alt attribútumba?
Azt, hogy hova visz a link — például alt="Vissza a kezdőlapra" —, nem azt, hogy mi látszik a képen. Ha a link csak képet tartalmaz, az alt lesz a linkszöveg a képernyőolvasó számára.
6. Beszúrtál egy <audio> elemet, de az oldalon nem látszik semmi. Mi hiányzik?
A controls attribútum. Enélkül a böngésző nem rajzol lejátszót, így a hang ott van, de láthatatlan.
7. A telefonoddal készült 4000×3000-es, 5 MB-os fotót akarod feltenni az oldalra 350 képpont szélességben. Mit csinálsz előtte?
Átméretezem (kb. 700 képpont szélesre — kétszeres méret a nagy felbontású kijelzők miatt), majd JPG-ként vagy WebP-ként tömörítem. Cél: jóval 300 kB alatt. A width attribútummal „lekicsinyíteni" nem megoldás, mert a teljes fájl akkor is letöltődik.
8. Mi az az <iframe>, és mikor használod a gyakorlatban?
Egy teljes weboldal beágyazása a saját oldaladba, önálló kis ablakban. A gyakorlatban leggyakrabban YouTube-videóhoz és térképhez használod — ott a kódot a szolgáltató adja készen.
<img src="..." alt="..."> — üres elem, nincs záró tagja.alt kötelező. Írd le, mi látszik; díszképnél alt="".src ugyanúgy működik, mint a href: relatív útvonal, ../-ral.width és height: a layout-ugrás ellen. Az arányt ne torzítsd.alt ilyenkor a link célját írja le.<audio> és <video>: controls nélkül nem látszik semmi. Az autoplay attribútumot kerüld.<iframe>: oldal az oldalban — YouTube, térkép. Adj neki title attribútumot.