8. fejezet: Kép beszúrása

Valamirevaló weblap semmit sem ér képek és látványosabbnál látványosabb animációk, esetleg videók nélkül. A kép beszúrása is ugyanolyan egyszerű, mint az eddigi legtöbb parancs: <IMG SRC="képnév.kit">, ahol IMG = image = kép/látvány; SRC = source = forrás. Záróelem nincs, akárcsak a <BR> tagnél. Ha a forrásfájl azonos könyvtárban van a weblappal, akkor simán be lehet írni a file nevét. Ha az adott weblap környezetéből kell vennünk egy forrásfájlt, akkor a jól ismert DOS-struktúra szerint utalhatunk rá; ellenben ha teljes hivatkozás kell URL-lel, akkor a hiperhivatkozásoknál megismert módszert kell alkalmaznunk.
Fontos, hogy ha jól működő weblapot szeretnénk feltölteni, akkor soha ne használjunk abszolút URL-t (pl.: ami a helyi merevlemezről szedi a forrást), hanem kizárólag relatívot (pl.: \kepek\hatter.jpg) Mivel a weblapok egy nagy részét Linux-szervereken tárolják és ott gond lehet a fájlnevekkel, ezért kerülni kell a magyar ékezetek és az üres helyek használatát a fájlnevekben.
A jelenleg támogatott fájlkiterjesztések (ezek változhatnak!):
.jpg, .jpeg — Joint Photographic Experts Group (JPEG)
.gif — Graphics Interchange Format (GIF)
.bmp — Windows Bitmap (BMP)
.png — Portable Network Graphics (PNG)
A fontosabb paraméterek kép beszúrása esetén:
-    ALT = helyettesítő szöveg (amit a böngésző a kép előtt betölt)
-    ALIGN = top/middle/bottom/left/right : rendezés a szöveg tetejére/közepére/aljára/balra/jobbra
-    BORDER = szám : kép kerete képpontban (HTML5 nem támogatja)
-    HEIGHT = szám: a kép magassága képpontban.
-    WIDTH = szám: a kép szélessége képpontban.
Megjegyzés: érdemes megadni a beszúrt kép méreteit, mivel így a böngésző kihagyja a kép helyét még a lassan betöltő honlapokon is.
-    HSPACE = szám: a kép bal és jobb oldalán hagyott üres hely képpontban. (HTML5 nem támogatja)
-    VSPACE = szám: a kép alsó és felső részén hagyott üres hely képpontban. (HTML5 nem támogatja)
-    SRC = source (forrás): a kép forrása relatív vagy abszolút módon.
Íme egy egyszerű példa (htmlpelda21.html):

<HTML>
<img src="http://tferi.hu/cikkek/htmlpelda1.jpg" width="718" height="190" alt="helyette" align="absmiddle" border="2">
</HTML>

Megjegyzés: sokszor érdemes a képeket letölteni, majd átméretezni egy kisebb, de gyorsabban letöltődő verzióba. Erre kiválóan lehet alkalmazni pl. az IrfanView nevű programot.
Gyakori az a megoldás is, hogy magára a weblapra egy kis méretű képet rakunk fel, de kattintásra előjön a teljes méretű kép.

16. feladat: Keressen három fényképet az interneten az Ön által szeretett zenészekről és szúrja be egy weblapra!
17. feladat: Keressen 12 fényképet az Ön által kedvelt városról, töltse le, majd méretezze át valamennyit és rendezze egy táblázatba!