Ebben a leckében megtanuljuk, hogy hogyan lehet képet hozzáadni egy weboldalhoz. Hivatkozást adunk képekhez: egyet vagy akár többet is. Néhány műveletet megnézzük a Paint programban, hiszen minimális képszerkesztési ismeretekkel rendelkezni kell egy weboldal létrehozásához. Végül feliratot is adunk a képekhez.

Új címkék ebben a leckében:
<img> - ezt a címkét használjuk, ha képet szeretnénk beszúrni a weboldalunkba. Nincs lezáró része a címkének.
<map> </map> - ezt a címkét használjuk, ha egy képre több hivatkozást szeretnénk beilleszteni.
<area> - címkéhez tartozik, ezzel a címkével jelölhetjük meg a „térkép” egy részét és rendelhetünk hozzá egy megnyitandó oldalt.
<map> </map> - ezt a címkét használjuk, ha egy képre több hivatkozást szeretnénk beilleszteni.
<figure> </figure> - ez a címke alkalmas egy kép és egy felirat egységbe foglalására.
<figcaption></figcaption> - a <figure> címkén belül a képhez egy feliratot is társíthatunk ezzel a címkével.

Az <img> címkének több tulajdonságát fogjuk használni:
src – ez a tulajdonság a legfontosabb, ehhez rendeljük a megjelenítendő kép útvonalát.
alt – ehhez a tulajdonsághoz rendelhetünk egy szöveget, amely akkor jelenik meg, ha az src-ben megadott kép nem elérhető.
width – bár nem ez az ajánlott módszer, de az img címkén belül megadhatunk szélességet, amellyel a képet szeretnénk megjeleníteni.
height – az előzőhöz hasonlóan, magasságot is adhatunk meg a képhez.

A <map> címkének egy tulajdonságát fogjuk használni:
name – a térkép azonosítóját/nevét kell megadni ehhez a tulajdonsághoz. Mivel a képet külön beszúrjuk és utólag adunk meg rá egy linkcsoportot, így tudjuk „összekötni” a térképet egy képpel.

Az <area> címkének több tulajdonságát fogjuk használni:
shape – a tulajdonságnak megadhatjuk a hivatkozás alakját. Lehetséges értékei: rect (téglalap), circle (kör), poly (sokszög), default (a másképp meg nem jelölt részre utal).
coords – ehhez a tulajdonsághoz rendeljük a shape tulajdonságnál megadott alakzat koordinátáit.

Egy téglalap esetén a négy sarok koordinátáit adjuk meg: ez 8 értéket jelent.
Egy kör esetén a középpontra és sugárra van szükség: ez három érték.
A poligon tetszőleges számú pont koordinátáit jelenti: páros szám kell legyen – minden ponthoz két érték.

• A képeket még beszúrás előtt másoljuk a végleges helyére a weboldal mappáján belül és nevezzük a végleges nevére. Bármilyen utólagos mozgatás vagy átnevezés szükségessé teszi a html fájlok átírását.
• A fájl neve legyen beszédes, de lehetőleg rövid, mert be kell írjuk a neveket a Notepad++ programba és sok képünk lehet.
• A képek méretét megadhatjuk az eredeti mérethez képest százalékos értékben vagy pixelben.
  • Ha csak egyik méretet (width vagy height) adjuk meg az <img> címkében, arányosan alakul a másik méretet. Ha mindkét méretet megadjuk, megtörténhet, hogy a kép torzultan jelenik meg.
  • Bár a méretet megadhatjuk, mégis ajánlott az eredeti képet lehetőleg, képszerkesztő programmal, akkora méretre alakítani, amekkorában a kép meg kell jelenjen, hiszen a weboldalunkat (képekkel együtt) az Interneten keresztül kell szállítani a felhasználó számítógépéig. Minél nagyobb mennyiségű adatról van szó, a szállítás annál lassabban történik.

Példák <img>:

A kv.jpg a HTML dokumentum mellett található kép, ezért elég csak a nevét leírni. A mérethez először a 100 pixel szélesség van megadva. A másodiknál megadtuk mindkét méretet, de nem arányosan, ezért a kép torzult. A harmadik esetben egy nem létező képre hivatkozunk, ezért az alternatívaként megadott szöveg jelenik meg.

• A koordinátákat egy képszerkesztőben megállapíthatjuk meg. Utólag kódból ne állítsuk át a kép méretét, mert elcsúsznak a hivatkozások.

A beszúrt kép a kv.jpg, amelynek az eredeti méretét nem módosítottuk. Alkalmaztuk rá az im nevű hivatkozás térképet.

A térkép a kép után következik és három különböző formájú hivatkozás:

Az első egy sokszög alakú rész, négy ponttal megadva. Ide kattintva a könyvről szóló Wikipedia oldalt nyitjuk meg.
A második egy kör alakú rész, a középpont koordinátáit és a sugarat adtuk meg. Ha rákattintunk, a kávéról szóló Wikipedia oldat nyitjuk meg.
A harmadik weboldalat akkor nyitjuk meg, ha bárhova máshová kattintunk, a web fejlesztésről szóló cikket olvashatjuk.

Képek átméretezése

Ha egy képet át szeretnénk méretezni, mivel túl nagy használhatjuk a Paint programot.

Home szalag/Resize

A képet megnyitjuk, a Resize gombot választjuk. Mértezhetünk pixelben vagy százalékban. A Mantain aspect ratio opció a méretarány megtartását jelenti, azaz elég az egyik méretet beírni, a másik kitöltődik az arány megtartásával.

Amennyiben nincs Paint program a gépeden, használhatsz akár online képszerkesztőt (https://pixlr.com/editor/) vagy az ingyenes GIMP programot.

Koordináták keresése
Ha térképet szeretnénk létrehozni és koordinátákra van szükségünk, kereshetünk koordinátákat Paintben megnyitva a képet. A kurzort a kép fölött mozgatva a koordináták leolvashatóak az ablak bal alsó sarkában (itt 290, 181). A kép méretét ugyanabban a sorban lehet leolvasni (400, 300).