HTML képek beszúrása, 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.

Mi az a HTML? A HTML bemutatása című cikk és a HTML szerkesztő programok nyitóképe

HTML képek beszúrása, 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.

Kép HTML-elem: Kép beszúrása HTML-ben

Ahogy a bevezetőben is említésre került, a HTML-nyelvben az „img” elem használata szükséges ahhoz, hogy a böngészőkbe egy képet jelenítsünk meg a felhasználó számára.

Szintaktika

<img src="KEP.ELERESI.UTVONALA">
Code language: HTML, XML (xml)

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">
Code language: HTML, XML (xml)

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.">
Code language: HTML, XML (xml)

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.">
Code language: HTML, XML (xml)

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épmé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>
Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

Eredmény

kep

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>
Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

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">
Code language: HTML, XML (xml)

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">
Code language: HTML, XML (xml)

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">
Code language: HTML, XML (xml)

Példa

HTML kód

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

<img src="https://webiskola.hu/kep.jpg" align="right">
Code language: HTML, XML (xml)

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ük 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

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!