Általában az oldalakat az teszi hangulatossá, hogy egyszerû kicsi képek alkotják, vagy egy szép kidolgozott képet látható, stb. Elhelyezhetünk bárhol az oldalon képet, viszont nem mindegy, hogy hogy helyezkedik el mellette a szöveg, vagy hogy a kép hova legyen igazítva. A kép beillesztésére az <img> TAG szolgál ( img = image = kép). Ezen TAG különlegessége, hogy nem kell bezárni (!!!), hiszen itt csak egy objektumot helyezünk el, ami nem vonatkozik semmire, így csak beillesztésrõl beszélünk, nem vonatkozásról.

        Ellentétben a hivatkozásokkal, ahol a célt kell megneveznünk, itt a képeknél a forrást kell megadni, hogy honnan töltse be a képet. Viszont itt is ugyanaz a szabály alkalmazandó, mint a hiperlinknél: vagy internetcímet, vagy fájlnevet, esetleg útvonalat adunk, ha alkönyvtárban, vagy külsõben helyezkedik el a kép-fájl. Erre a funkcióra szolgál az src paraméter ( src = source = forrás).

<img src="alma.jpg">

A kép kerete:
A képeknek meg lehet adni keretet is. Ennek paramétere a border ( border = keret), amelynek számok az értékei. Ezek a számok a keret vastagságát fejezik ki, tehát értékük 0-tól mehet felfele, a vastagság mértékegysége a pixel ( pixel = képpont). Általában nagyon szép, ha egy képnek 1, 2 vagy 3. pixelnyi vastagságú kerete van, mert akkor a hangsúly a képre irányul. A keret színe megegyezikaz alap-betûszínnel. Tehát jelen esetben fekete.

<img src="alma.jpg" border="0">
<img src="alma.jpg" border="2">
<img src="alma.jpg" border="15">

A kép mérete:
Ha csak egyszerûen teszünk be egy képet: forrás megadása, akkor a kép eredeti méretében fog megjelenni az oldalon. Viszont a kép magasságát és szélességét arányosan, vagy aránytalanul is tudjuk tetszés szerint változtatni. A magasság paramétere a height, a szélességé pedig a width ( height = magasság; width = szélesség). Ezeknek értéke ugyancsak pixelben adandó meg.

<img src="alma.jpg" width="121" height="122">

vagy

<img src="alma.jpg">
<img src="alma.jpg" width="150" height="152"> {arányos nagyítás}
<img src="alma.jpg" width="55" height="150"> {nyújtott aránytalan kép}

A kép igazítása:
A kép igazításának paramétere az align ( align = igazítás). Két fajta igazítás létezik. Az elsõ kategoriába tartozik az az igazítás-forma, mikor a képet igazítjuk a szöveghez. Ilyenkor a paraméter értéke lehet left, right, vagyis a képet balra vagy jobbra igazítjuk a szöveghez viszonyítva. Tehát pl. ha balra igazított képrõl a szó, akkor a szöveg mellette jobb oldalt "körülfutja" a képet. A második kategoriába azon igazítás tartozik, amelyik a kép mellet szereplõ rövidebb szöveg a képhez függõleges síkban való igazítását irányítja. Így az align értéke lehet top, middle, bottom, vagyis fel, középre (függõlegesen), és le igazítja a szöveget a kép mellett.

<img src="lepke.jpg" align="left">A hernyók kékeszöldek fekete pontokkal, hátukon és oldalaikon sárga hosszcsíkokkal. Igen felánkok, a káposztalevelek összerágása által gyakran nagy károkat okoznak. Fákon vagy kerítéseken bábozzák be magukat.

A hernyók kékeszöldek fekete pontokkal, hátukon és oldalaikon sárga hosszcsíkokkal. Igen felánkok, a káposztalevelek összerágása által gyakran nagy károkat okoznak. Fákon vagy kerítéseken bábozzák be magukat.
<img src="lepke.jpg" align="right">A hernyók kékeszöldek fekete pontokkal, hátukon és oldalaikon sárga hosszcsíkokkal. Igen felánkok, a káposztalevelek összerágása által gyakran nagy károkat okoznak. Fákon vagy kerítéseken bábozzák be magukat.
A hernyók kékeszöldek fekete pontokkal, hátukon és oldalaikon sárga hosszcsíkokkal. Igen felánkok, a káposztalevelek összerágása által gyakran nagy károkat okoznak. Fákon vagy kerítéseken bábozzák be magukat.
<img src="lepke.jpg" align="top"> bábozzák be magukat.
bábozzák be magukat.
<img src="lepke.jpg" align="middle"> bábozzák be magukat.
bábozzák be magukat.
<img src="lepke.jpg" align="bottom"> bábozzák be magukat.
bábozzák be magukat.

"Sugó" szöveg:
Meg tudjuk azt is valósítani, hogy ha egy képre rámegyünk, akkor akkor valami sugó szöveg jelenik meg az egér mellett. Ennek paramétere az alt.

<img src="alma.jpg" alt="Ez egy alma">
Ez egy alma

 

Egyéb felhasználás:
Az internetes böngészés közben szebbnél szebb képeket találhatunk illusztrációként. Ha az eddig tárgyalt dolgokat tudod, akkor már ezt meg tudod csinálni, csak egy jó képet kell keresned vagy készítened. Azonban olyan dolgokat is láthatunk, hogy a képek gomb funkciót is betöltenek. Ha az elõzõ leckét és a mostanit összevetjük, akkor neked is sikerül ilyen gombokat aktiválni. Ha már van egy gombnak való kép, akkor csak azt kell tennünk, hogy a hiperlink szövege helyett a képet tegyünk be - tehát a kép egy link lesz. Azonban ezt lehet keverni: egy link, amire kattintunk, egyben szöveg és kép. Vigyáznunk kell, hogy a képnek ne legyen kerete, mert ha egy képet beállítunk linknek, annak autómatikusan kerete lesz, így a border paramétert 0-ra kell állítani.

<a href="alma.html"><img src="gomb.gif" border="0"></a>
<a href="alma.html">Gomb: <img src="gomb.gif" border="0"></a>

Példák:
  6. Képek

Gyakorlatok:
  6. Képek

Elõzõ lecke  Következõ lecke