logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.
menüMENÜ   

Állókép beillesztése



Képek beillesztése HTML dokumentumba



Név Angol eredete Hatás Jellemzők
<img> Image Állókép elhelyezése a weboldalon páratlan címke. Általános ; Események

A következő böngészők támogatják: Chrome logó Firefox logó Safari logó Opera logó IE logó

Kötelező jellemzője a src (source), ami megadja a kép forrásának URL-jét.

Használható képformátumok: JPEG, GIF, PNG

A kép Inline elem: a sorban előtte állót követi, a sor mögötte tovább folytatódik. Blokkszintű elemmé a stíluslap segítségével tehető.

Az alt jellemzővel kell megadni a képet helyettesítő szöveget, ami akkor jelenik meg, ha a kép nem elérhető. A látássérült emberek által használt felolvasó szoftverek az alt attribútum szövegét olvassák fel, így használata az oldal akadálymentesítéséhez is elengedhetetlen.


Példa:

Forráskód



A kép Inline elem: <img src="akku.png" alt="akkumulátor" /> a 
sorban előtte állót  követi,<br>   a sor mögötte tovább folytatódik. 
<br> <br>   
Blokkszintű elemmé a stíluslap segítségével tehető.
<img src="akku.png" alt="akkumulátor" style="display:block; float:left"/>
<br>
Érdemes megadni a kép méretét.<br>   
Hibás méretmegadásnál azonban<br>   
a böngésző a képümket torzíthatja.<br><br>     
<img src="akku.png" alt="akkumulátor" height="40" width="300" />
 

Eredmény*


* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: html5_kepek_1.html


Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.