WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Á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