HTML5 + CSS3 logó
  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