logó INFORMATIKA
Ingyenes elektronikus tananyag
visszaVISSZA   
menüMENÜ   

Háttérkép és képek beillesztése

Természetes igény a dokumentumokban képek elhelyezése. Ez általában vagy háttérképnek a szöveg mögé tesszük, vagy a szöveg mellé illesztjük be. Háttérképként való beillesztésnél az oldal tartalma körül mindenhol megjelenik. Ha egy képet háttérképnek illesztünk be és az nem tölti ki az egész böngészőt, akkor csempeszerűen ismétlődik. A háttérkép beillesztése a „body” címke és a „background” tulajdonság segítségével lehetséges. A „background” értéke egy kép útvonallal együtt. A kép útvonala nem kötelező, és nem is szoktuk megadni, ha az a HTML állománnyal egyező könyvtárban van. A beillesztett képeket mindig mellékelnünk kell a HTML állomány mellé, mivel azok azt sosem épülnek be magába a html állományba. A html állományban csak hivatkozunk rá. Ha adott például a hatter.jpg nevű képfájl, azt a következő módon illeszthetjük be háttérnek:
<body background=”hatter.jpg”>
A háttérképek beillesztésénél ügyeljünk arra, hogy a szöveg színétől jelentősen eltérjenek a képe színei, másként az szöveg olvashatatlan lesz. Megjegyzés: CSS segítségével ennél finomabb formázási lehetőségek is rendelkezésünkre állnak. A háttérkép mellett a szövegbe is ágyazhatunk képeket az „img” címke segítségével, amely az angol „image” szóból származik. Működéshez egy, szabvány betartásához minimum két tulajdonságot kell megadni. Az egyik az „src”, ami az angol „source” szóból származik. Itt adjuk meg a kép nevét és útvonalát, tehát nélkülözhetetlen. A másik tulajdonság az „alt” címke, az angol „alternate” szóból. Itt a kép tartalmának szöveges leírását adjuk meg, aminek akkor van jelentősége, ha a böngészőben nem jelenik meg a kép. A kép helyett alternatívaként a szöveg jelenik meg. A kép több oknál foga nem jelenhet meg: nincs meg a kép, ki van kapcsolva a böngészőben vagy a böngésző karakteres. Egy paprika.jpg nevű kép beillesztése a következő módon tehető meg:
<img src=”paprika.jpg” alt=”paprika”>
A kép szövegbe ágyazása esetén a paprikáról szóló HTML állományunk törzs része így nézhet ki:
A ma termesztett paprikák messze állnak a vadpaprikától. A nemesítők azonban ma is felhasználják a vadpaprikát alapanyagként. <img src="paprika.jpg" alt="paprika"> Melegigényessége miatt termesztése Magyarországonak csak a déli részén ideális. A fagyra nagyon érzékeny, ezért az első hidegek megjelenésekor fagyási sérüléseket szenvedhet. A szárazságot igen jól tűri.
A paprika a szövegben nem a legideálisabb. A szöveg nem folyik körbe. Az „img” címke „align” tulajdonságával megadhatjuk a szöveg igazítását balra vagy jobbra a „left” vagy a „right” értékkel. A tulajdonság használata esetén a szöveg körbefolyik a kép körül. A példában a parprika.jpg képet igazítsuk balra, hogy a szöveg jobbról körbe folyjon.
A ma termesztett paprikák messze állnak a vadpaprikától. A nemesítők azonban ma is felhasználják a vadpaprikát alapanyagként. <img src="paprika.jpg" alt="paprika" align=”left”> Meleg igényessége miatt termesztése Magyarországonak csak a déli részén ideális. A fagyra nagyon érzékeny, ezért az első hidegek megjelenésekor fagyási sérüléseket szenvedhet. A szárazságot igen jól tűri.
A rendelkezésre álló kép megjelenítési mérete megváltoztatható az „img” címke „width” és „height” tulajdonságával. A „width” tulajdonsággal a kép szélességét, a „height” tulajdonsággal annak magasságát állíthatjuk be. A kép eredeti méretének megváltoztatásakor vigyáznunk kell az arányokra. Ha aránytalanul méretezzük át a képet az torzulni fog. A nagyítás pedig nem rossz képminőséget ad. A példában szereplő paprika.jpg kép eredeti mérete 70x70. Ha szeretnénk kisebb méretet, például 50x50, akkor a html kód a következő lehet:

<img src=”paprika” alt=”paprika” align=”left” width=”50” height=”50”>
Kérdés, hogy milyen képet illeszthetünk be html dokumentumunkba. Minden böngésző ismeri a következő három képtípust:

• JPEG – kiterjesztése jpeg vagy jpg
• PNG – kiterjesztése png
• GIF – kiterjesztése .gif
A böngészők más képfájlokat is ismerhetnek, azonban azok használata egyáltalán nem javasolt. Más képtípusok vagy nem jelennek meg más böngészőkben, vagy túl nagyok ahhoz, hogy az Interneten használhassuk.
JPEG fájlokat használunk ha fényképeket szeretnénk megjeleníteni. A JPEG formátumot úgy alkották meg, hogy minél több szín tárolhasson, minél kisebbre tömörített méretben. A GIF típus kevesebb színt képes megjeleníteni, grafikák megjelenítésére ajánlott. A GIF formátumban létrehozhatunk mozgóképeket is, amit böngészők helyesen jelenítenek meg. A PNG formátumot a két típus kiváltására hozták létre. A mozgókép lehetőséget azonban nem tették bele, mondván, hogy annak külön formátumban kell lennie. Ez az MNG. Az MNG használata viszont egyáltalán nem terjedt el (ezen dokumentum írásának pillanatáig). Nem ajánlott a BMP képek használat html odalak esetén. Ezek ugyani nem jelennek meg minden böngészőben és hatalmas a méretük. A méretre még a fenti három kép esetében is figyelnünk kell. Ha nagyon nagy képeket illesztünk a weblapunkba, a látogatok nem fogják megvárni amíg letöltődik, ott hagyják az weblapunkat.
Képek elhelyezésénél vigyáznunk kell a kis és nagybetűkre. Ha weboldalunkon az „img” címke „src” tulajdonságánál kisbetűvel adtuk meg a kép fájl neve pedig valójában nagy, egy Windows operációs rendszeren ez működhet. Azonban a weblap webkiszolgáló helyre való feltöltése után ezek nem működnek.


Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.