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.
Tartalomjegyzék
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.
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.
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
<imgsrc="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
<imgsrc="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
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.
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.
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.
