VISSZA
MENÜ
TOVÁBBKé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.) |
|
| alt | szöveg | A képet helyettesítő szöveg, ami akkor jelenik meg, ha a kép nem elérhető. |
|
| width | szám | Meghatározza a kép szélességét a weboldalon. |
|
| height | szám | Meghatározza a kép magasságát a weboldalon. |
|
| usemap | usemap neve | Képtérképet illeszt az állóképhez. |
|
| A következő böngészők támogatják: |
|
|---|
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