Képek beillesztése
Különböző képekkel, GIF animációkkal, grafikákkal szebbé, elegánsabbá tehetjük HTML oldalunkat. Ezeket igazán egyszerű beilleszteni a dokumentum szöveges
részei közé. A beszúráshoz az <IMG> tagot használjuk. Ennek kötelező tulajdonsága az SRC="elérési út/képnév.kiterjesztés", mely
az adott grafika, illetve animáció helyét adja meg. Ez természetesen nem elhagyható. Képünket formázzák az alábbi opciók is, melyek azonban nem kötelezők:
WIDTH="szélesség" - A keret szélességét adja meg pixelben, ahová a kép a böngészőben kerülni fog.
HEIGHT="magasság" - A fent említett keret magasságát adja meg pixelben.
BORDER="határvonal vastagsága" - A képet magába foglaló keret határvonalának vastagságát állítja be.
ALT="megjelenő szöveg" - Az Alternate Text adható meg vele, melyet a felhasználó akkor lát, ha az egérrel a kép fölött
áll meg, illetve ha a kép valami miatt nem jelenik meg.
ALIGN="vízszintes elhelyezés" - A kép elhelyezkedését adhatjuk meg vele: szövegbe illesztett kép esetén a szöveghez, önállóan
álló kép esetén a böngészőablakhoz viszonyítva. Értékei lehetnek: left, right, center.
HSPACE="távolság vízszintesen" - A szövegbe illesztett kép viűízszintes távolságát adja meg a szövegtől pixelben.
VSPACE="távolság függőlegesen" - Ugyanazon kép függőleges távolságát adja a szövegtől, szintén pixelben.
USEMAP="#azonosító" - Képünkhöz több hivatkozás kapcsolása esetén használhatjuk. Megadja azt az azonosítót, mellyel egy Image Map a képünket felismeri. Ez a Map forrás ugyanabban a dokumentumban van, ahol maga a kép. (Lásd a Linkek fejezetet!)
NAME="névazonosító" - A kép azonosító nevét adja meg, mellyel a JavaScript program hivatkozni tud rá. Erről a
lehetőségről később még szó lesz.
A felsoroltak közül igen célszerű a WIDTH és a HEIGHT opciók alkalmazása. Ha ugyanis a böngésző valamilyen oknál fogva ( sérült
állomány, rossz elérési út ) nem képes az oldalba szúrt képet megjeleníteni, akkor szövegbe illesztés esetén a szépen felépített külalak összeomlik. A
keret megadásával elkerülhetjük ezt: ilyenkor a böngészőben megjelenik az üres keret, anélkül, hogy a szöveg és a kép elrendezésbeli viszonya
változott volna.
Honlapunkon elhelyezhetünk úgynevezett multimédiás fájlokat is. Ilyenek például a videók ( AVI, MPEG, MOV stb. fájlok ).
Ezek beszúrásáról a későbbiekben még szó esik. A fent leírt módszerrel az egyszerű grafikus objektumok illeszthetők a HTML oldalba. A képek formátumára
viszont ügyelni kell, mert a legtöbb böngésző csak a JPG és a GIF kiterjesztésű állományokat hajlandó beszúrni.
<html>
<head>
<title>Képek beillesztése - Példa</title>
</head>
<body bgcolor="black" text="lightyellow" link="lightblue" vlink="lightgreen" alink="red">
<b>Kép a szövegben</b>
<br>
<p align="justify">
"A felsoroltak közül igen célszerű a WIDTH és a HEIGHT opciók alkalmazása. Ha ugyanis a böngésző
valamilyen oknál fogva ( sérült állomány, rossz elérési út ) nem képes az oldalba szúrt képet megjeleníteni,
<img src="kep.jpg" align="right" width="80" height="80" alt="Alternate Text - Egér hatására megjelenik" name="kep" border="0" hspace="18" vspace="4" units="pixel">
akkor szövegbe illesztés esetén a szépen felépített külalak összeomlik. A keret megadásával elkerülhetjük ezt:
ilyenkor a böngészőben megjelenik az üres keret, anélkül, hogy a szöveg és a kép elrendezésbeli viszonya
változott volna."
</p>
<br>
<b>A WIDTH és HEIGHT opciók előnyei</b>
<br>
<p align="justify">
"A felsoroltak közül igen célszerű a WIDTH és a HEIGHT opciók alkalmazása. Ha ugyanis a böngésző
valamilyen oknál fogva ( sérült állomány, rossz elérési út ) nem képes az oldalba szúrt képet megjeleníteni,
<img src=".jpg" align="right" width="80" height="80" alt="Alternate Text - Egér hatására megjelenik" name="kep" border="0" hspace="18" vspace="4" units="pixel">
akkor szövegbe illesztés esetén a szépen felépített külalak összeomlik. A keret megadásával elkerülhetjük ezt:
ilyenkor a böngészőben megjelenik az üres keret, anélkül, hogy a szöveg és a kép elrendezésbeli viszonya
változott volna."
</p>
</body>
</html>