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

Állóképek jellemzői



Képek beillesztése HTML dokumentumba


Név Érték Leírás Böngészők
src URL Meghatározza a kép forrásának URL-jét. (Név és útvonal.) Chrome logó Firefox logó Safari logó Opera logó IE logó
alt szöveg A képet helyettesítő szöveg, ami akkor jelenik meg, ha a kép nem elérhető. Chrome logó Firefox logó Safari logó Opera logó IE logó
width szám Meghatározza a kép szélességét a weboldalon. Chrome logó Firefox logó Safari logó Opera logó IE logó
height szám Meghatározza a kép magasságát a weboldalon. Chrome logó Firefox logó Safari logó Opera logó IE logó
usemap usemap neve Képtérképet illeszt az állóképhez. Chrome logó Firefox logó Safari logó Opera logó IE logó


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.


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.


Érdemes megadni a kép méretét. Széllességét a width, a magasságát a height jellemzővel. Ekkor ugyanis a böngészők a kép letöltése előtt is tudják folytatni az oldal megjelenítését, és nem ugrál az oldal egy-egy kép letöltésének befejezésekor. Fontos, hogy a valós méretet adjuk meg! Hibás méretnél a böngésző torzíthatja (nagyításnál, egy irányú nyújtásnál) a képet, és a számolgatás miatt lassul a megjelenítés.

A title általános jellemző segítségével plusz információt adhatunk a képhez, amelyet a felhasználó akkor lát, ha az egérkurzort a kép fölé mozgatja. Ez a funkció hasznos lehet képes nyomógombok esetében is.

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.