HTML képek használata (HTML img)

Ebből a cikkből mindent megtanulhatsz a HTML képekről. Továbbá a hozzá kapcsolódó leggyakoribb attribútumokról, illetve a támogatott képformátumokról.

HTML képek használata (HTML img)

A weboldalunkat kellőképpen feltudjuk dobni pár kép használatával. Megtöri a szöveg monotonitását, plusz nagyszerű lehet, ha valamit szemléltetnünk, magyaráznunk kell vele. Szerencsére a HTML nyelvben könnyűszerrel helyezhetünk el képeket a weboldalunkon az “img” taggel.

Szintaktika

<img src="KEP.ELERESI.UTVONALA">

Ennek a HTML tag-nek nincs zárópárja. Az “src=” után a képünk elérési útvonalát kell megadni, ami háromféleképpen történhet:

  • URL megadásával (például: https://webiskola.hu/kep.jpg)
  • relatív útvonal (például: kep.jpg)
  • abszolút útvonal (például: C:\Weboldal\kep.jpg)

Technikailag a kép nincs beillesztve a weboldalba, csak megadunk egy elérési útvonalat, ahol a kép megtalálható és a böngésző onnan tölti be a képet. Ezért nagyon fontos, hogy a kép mindig megtalálható legyen a linkelt elérési útvonalon, mert ha eltávolítjuk onnan a képet, akkor a fotó már nem fog megjelenni a weboldalon.

Példa

HTML kód

<img src="https://webiskola.hu/kep.jpg">

Eredmény

kep

Alt tuldajdonság

Magyarul szokás súgó szövegnek is használni. Eredetileg arra találták ki, hogy ha ráhúzzuk az egeret a képre, akkor információk jelenjenek meg. Manapság már nagyon kevés böngésző támogatja, de ennek ellenére nagyon fontos kitöltenünk, hiszen ebből tudják a keresőmotorok beazonosítani, hogy miről szól a kép.

Szintaktika

<img src="KEP.ELERESI.UTVONALA" alt="Ide jön a magyarázat.">

Az “alt” rész után adjuk meg a kép magyarázatát.

Példa

HTML kód

<img src="https://webiskola.hu/kep.jpg" alt="Itt magyarázom el, hogy miről szól a kép.">

Eredmény

Itt magyarázom el, hogy miről szól a kép.

Ha jobb klikkel rákattintasz a képre, és megnyomod a Vizsgálat gombot, akkor láthatod a HTML kódban, hogy valóban ki van töltve az alt tag.

Kép méret

Feltöltheted a képet konkrétan abban a méretben is, amelyben használni szeretnéd, de ha van egy olyan képed, amelyet különböző oldalakon különböző méretekben szeretnél megjeleníteni, akkor muszáj lesz meghatároznod a méretét az img tagen belül.

Szintaktika

<img src="KEP.ELERESI.UTVONALA" width=MÉRET height=MÉRET>

A kép méretének meghatározása két értékkel történik, az egyik a “width”, a másik a “height”. A “width” az angol szélesség szót takarja, míg a “height” a magasságot. Mindkét tulajdonság után azt az értéket kell megadnunk, amekkora méretben szeretnénk megjelentetni a képet a weboldalunkon.

Példa

HTML kód

<img src="https://webiskola.hu/kep.jpg" width=200px height=200px>

Eredmény

kep

Link elhelyezése egy képen

Ez sem akadály a HTML nyelvben, a képekre is nyugodtan helyezhetünk el linkeket.

Szintaktika

<a href="LINK.ELÉRÉSI.ÚTVONALA"><img src="KEP.ELERESI.UTVONALA"></a>

Az “img” taget körbezárjuk az “a” elem nyitó és záró tagjeivel és a nyitó elemében elhelyezzük a “href” után a link elérési útvonalát.

Példa

HTML kód

<a href="https://webiskola.hu/kep.jpg"><img src="https://webiskola.hu/kep.jpg"></a>

Eredmény

kep

Elhelyeztünk a képre egy linket, amely megnyitja a WEBiskola főoldalát.

Kép keretezése

Egy képnek adhatunk akár keretet is.

Szintaktika

<img src="KEP.ELERESI.UTVONALA" border="VASTAGSÁG">

A “border” után adjuk meg a keret vastagságát.

Példa

HTML kód

<img src="https://webiskola.hu/kep.jpg" border="0px">

<img src="https://webiskola.hu/kep.jpg" border="5px">

<img src="https://webiskola.hu/kep.jpg" border="25px">

Eredmény

kep kep kep

Fentebb három példán keresztül ismertettem a keretek használatát. Az első képnél nem adtam meg keretet (border-t), a másodiknál 5 pixeleset adtam meg, míg a harmadiknál 25 pixeleset.

Kép igazítása

A weboldalon elhelyezett képet igazíthatjuk is akár. Elhelyezhetjük a weboldal bal, illetve jobb oldalán.

Szintaktika

<img src="KEP.ELERESI.UTVONALA" align="IGAZÍTÁS.HELYE">

Példa

HTML kód

<img src="https://webiskola.hu/kep.jpg" align="left">

<img src="https://webiskola.hu/kep.jpg" align="right">

Eredmény

kep




kep

Támogatott képformátumok

Az, hogy milyen képformátumok támogatottak az nem a HTML nyelven múlik, hanem a böngészőn, amelyiken keresztül nézik a weboldalt.

Vegyül például a ma nagyon népszerű .webp képeket. Egy modern, friss Google Chrome-ban megfog jelenni a kép, míg egy régi Internet Explorer-ben nem.

Azok a formátumok, amelyekkel mindegyik böngésző megbirkózik:

  • .png
  • .jpg
  • .ico
  • .gif
  • .bmp
  • .svg