10. A képek
Oldalunk szépítésére, mondanivalónk illusztrálására oldalunkra képeket is helyezhetünk. Általában kétféle képformátumot szokás használni: a JPEG (.jpg) elsősorban fényképekhez, a GIF (.gif) inkább egyszerűbb ábrákhoz megfelelő. GIF formátumban akár mozgóképeket is készíthetünk. Ebben a segédletben nem foglalkozunk a képek elkészítésével, csupán a kész képek felhasználásával.
A kép beszúrása
A kép beszúrására az <img> elem szolgál. (</img> nincs!) Ennek az elemnek rengeteg paramétere lehet, de csak egy kötelező, a src. (Vigyázat! Gyakori hiba, hogy ezt a paramétert scr-nek írják, és így a kép beszúrása nem sikerül. Az src az angol source 'forrás' szó rövidítése, jegyezzük meg erről a betűk sorrendjét!) Az src paraméter a href-hez hasonlóan működik, de nem egy másik oldalra, hanem a képet tartalmazó fájlra mutat. Ha a kép nem ugyanabban a könyvtárban van, mint az oldal forrása, akkor ugyanúgy kell lépegetnünk a könyvtárak között, mint a href esetében, sőt, akár mások honlapjáról is betölthetünk képeket, ha ismerjük elérési útvonalukat. (Természetesen ha a kép más fájlrendszerben van, akkor előtt elengedhetetlen a http:// és a teljes elérési útvonal. Mások honalpjáról képet hívni azért kockázatos, mert ha a képet eltávolítják, a mi lapunkon is csak a helye jelenik meg.) Példák a kép beszúrására:
<img src="kep.jpg">
<img src="../kepek/kep.jpg">
<img src="http://www.gnu.org/graphics/gnu-head-sm.jpg">
A kép elhelyezése
Ha egy képet helyezünk el oldalunk szövegébe, a kép alsó széle a szövegsor alsó széléhez fog igazodni, és ha sokkal magasabb a betűknél (ami nem ritka), akkor ki fog lógni a sorból. A kép két oldalán pedig üres hely marad. (Ha a kép szélessége nagy, előfordulhat, hogy a kép a következő sorba, a bal oldalra kerül.) A böngésző tehát alapesetben úgy kezeli a képet, mint egy betűt (még ha a kép sokkal nagyobb is a betűnél). Ha ez nem tetszik nekünk (és általában nem tetszik), használhatjuk az align paramétert, mely megmondja a böngészőnek, hova helyezze a képet. Az align paraméternek a következő értékei lehetnek:
- left: a képet a böngészőablak bal oldalára helyezi, a szöveg a kép mellett jobbra fut le;
- right: a képet a böngészőablak jobb oldalára helyezi, a szöveg a kép mellett balra fut le;
- middle: hasonló az alapértékhez, de a kép közepéhez, és nem az aljához igazítja a szövegsor alját;
- top: hasonló az alapértékhez, de a kép tetejéhez igazítja a szövegsor tetejét;
- bottom: ugyanaz, mint az alapérték.
Ezek közül az értékek közül elsősorban a jobbra, ill. balra igazítást szoktuk használni. Ha egymás után két képet szúrunk be, és az egyiket jobbra, másikat balra igazítjuk, akkor az utánnuk következő szöveg a két kép között fog lefolyni.
A kép mérete
Ha a képek méretét nem adjuk meg, akkor a böngésző akkorában fogja őket megjeleníteni, amekkorák valójában. Ettől nem is célszerű eltérni, hiszen a nagyítás elcsfíthatja a képet, ha pedig kicsinyítjük, akkor sokkal nagyobb képet tölt le a látogató, mint amekkorára szükség van. Ez feleslegesen lassítja az oldal letöltését. (Ha úgy látjuk, hogy a képre nincs szükségünk akkora nagyságban, mint amekkorábvan éppen rendelkezésünkre áll, akkor méretét kicsinyítsük egy képszerkesztővel.)
Miért célszerű megadnunk a kép méretét, ha a böngésző amúgy is akkorában jelenítené meg, amekkorát mi megadunk neki? Azért mert a legtöbb böngésző előbb letölti a HTML-forrást, megjeleníti a szöveget, és utána kezdi el letölteni a képeket. Ha nem tudja, mekkora képekről van szó, akkor először egy előre meghatározott képhelyet jelöl ki, és amikor letöltötte a képeket, akkor a valódi méretükben szúrja be őket. Mivel az előzetesen kijelölt hely csak a legritkább esetben esik egybe a kép valódi méretével, a böngészőnek a kép letöltése után át kell rendeznie a teljes dokumentum képét. Ha több kép van az oldalon, ez többszöri átrendezést is jelent. Nagyon kellemetlen, ha a látogató a képek letöltésének befejeztéig nem tudja olvasni a szöveget, mert a böngésző állandóan átrendezi. Ha a böngészőnek előre megadjuk a kép méretét, akkor megfelelő nagyságú helyet fog kijelölni neki, és nem kell átrendeznie a megjelenítést a kép letöltése után. A kép méretét a width és a height paraméterekben adhatjuk meg: az előbbiben a kép szélességét, az utóbbiban a hosszúságát. A kép nagyságát képpontban (pixelben) kell megadni. Ez minden képszerkesztő vagy -nézegető programmal megállapítható. Példa:
<img src="kep.jpg" align=left width=120 height=150>
Ez a sor egy 120 képpont széles és 150 képpont magas képet helyez el az oldal bal oldalán.
A kép kerete
A böngészők általában keretet rajzolnak a képek köré. Mégis, ha biztosak akarunk lenni benne, hogy a böngésző keretet rajzol (vagy nem rajzol) a képünk köré, vagy ha mi szeretnénk meghatározni a keret vastagságát, akkor megadhatjuk a border paraméterben, hogy megkora keretet szeretnénk. A keret vastagságát képpontban kell megadni. Ha nem szeretnénk keretet, adjunk meg nullát!
A kép körüli térköz
A kép megjelenítésekor a böngésző egy kis helyet üresen hagy a kép körül. Ez azért is jó, mert így a szöveg nem fut ki a kép széléig, és nem olvad össze vele. Előfordulhat, hogy úgy gondoljuk, hogy ez a hely kevés: ilyenkor a hspace paraméterben megadhatjuk, mennyi helyet hagyjon a böngésző a kép két oldalán, a vspace paraméterben pedig azt, mennyi helyet hagyjon a kép alatt és fölött. Az értéket itt is képpontban kell megadni.
Ha oldalunkon nagy képet szeretnénk elhelyezni, akkor célszerű a képet több kisebb képre vágni, és így betölteni. Alapesetben természetesen a kis képek között is rés maradna, és így nem állna össze szépen a nagy kép. Éppen ezért ha ezzel a technikával élünk, a hspace és a vspace paraméternek minden kis képnél szerepelnie kell, és mindenhol nulla értéket kell neki adnunk.
A kép felirata
Az <img> elemnek van még egy paramétere, az alt. A HTML-szabvány szerint kötelező elem, de gyakran nem használják. Ebben a paraméterben szöveges kommentárt fűzhetünk a képhez. Míg a kép meg nem jelenik, ez a szöveg fog látszani. Ha a böngészőben le van tiltva a képek letöltése, akkor a felirat alapján a látogató eldöntheti, hogy meg akarja-e nézni a képet. (A szöveges böngészőkben ez a felirat jelenik meg a kép helyett.) Amikor a kép letöltődött, a legtöbb böngésző egy szöveges ablakban jeleníti meg a feliratot, ha az egérmutatót a kép felett megállítjuk. Ez a paraméter tehát nagyon hasznos, ha egy képhez kommentárt szeretnénk fűzni.
A képek felhasználása
Ha képeket használunk, tisztában kell lennünk azzal, hogy a képek általában jóval nagyobbhelyet foglalnak el a memóriában, mint a szövegek: éppen ezért sokkal lassabban is töltődnek le. Éppen ezért ne használjunk sok, nagy képet! Ha a képeket hosszú szöveg illusztrálására használjuk, akkor nem baj, ha a képek lassan töltődnek le, mert addig van mit olvasnia a látogatónak. Kevés szöveg mellé viszont ne rakjunk nagy képet! Ne használjunk nagy képeket kezdőoldalunkon, mert a látogató még azelőtt elmegy, hogy lapunkba belenézett volna!
Ha lapunk célja elsősorban képek bemutatása, használhatjuk azt a népszerű módszert, hogy a bemutatandó képekből készítünk kicsinyítet változatokat (angolul thumbnail, hüvelykköröm), és ezeket elhelyezzük egy oldalra. A képekre kattintva a látogató kiválaszthatja, hogy melyik képet szeretné látni, és csak ezt a képet kell nagyban letöltenie. (Erről a módszerről a következő fejezetben bővebben lesz szó.)
Ne felejtsük el, hogy nem csak a nagyméretű képek letöltése lehet lassú, hanem a sok képből álló animációké is. Éppen ezért GIF-animációk készítésekor ellenőrizzük, hogy mekkora a fájl mérete. Általában azt szokták tanácsolni, hogy egy oldal mérete az összes képpel együtt ne legyen több 80-120 kilobájtnál. Pontos határt természetesen nem lehet mondani, hiszen ha egy hosszú szöveg alján helyezünk el egy nagy képet, az nyilván bőven letöltődik, mire az olvasó a szöveg végére ér: talán észre sem veszi, hogy a böngésző még soká dolgozott. Semmiképpen sem tanácsos azonban 400-500 képpontnál magasabb vagy szélesebb képeket használnunk, ezek ugyanis kisebb képernyőkön el sem férnek a böngésző ablakában, és hatásuk nem érvényesül.
A háttérkép
Oldalunk díszítésére háttérképet is használhatunk. Ehhez a <body> elemben kell elhelyezni a background paramétert, melyben a képfájl nevét és elérési útvonalát adjuk meg ugyanazzal a módszerrel, mint az <img> elem src paraméterében. A böngésző a háttérképpel mozaikszerűen kitapétázza az oldalt. Célszerű olyan képet választani, amelynek szélei illeszkednek, különben bántóan feltűnő lesz, hogy a háttérképkis darabokból áll össze. Célszerű a teljes képernyőt kitöltő szélességű (800, de inkább 1024 képpont széles), de csak néhány képpont magasságú háttérképet választani. Ilyen képnél csak a kép aljának és tetjének illeszkedését kell figyelni. A háttérkép sose legyen túl kontrasztos, hogy vagy világos, vagy sötét betűkkel mindenképpen jól olvashatóan írhassunk rá. Háttérképet használni nem feltétlenül szükséges, és ne felejtsük el, hogy egy rosszul megválasztott vagy alkalmazott háttérkép el is csúfíthatja az oldalt.
Hogyan szerezzünk képeket?
Természetesen mi sem egyszerűbb, mint mások honlapjáról képeket leszedni, és a sajátunkra felrakni. Nincs más dolgunk, mint az egérrel a kép fölé menni, és lenyomni a jobb gombot. Ekkor egy kis menü jelenik meg, amelyben szerepel a Kép mentése másként (Save as) vagy hasonló felirat. Ha ez a módszer valamiért nem működik, akkor keressük meg a képet abban a könyvtérban, ahol a böngésző az ideiglenes képeket tárolja (Temporary Internet Files vagy hasonló néven.) A képet innen könnyen kimásolhatjuk a tetszőleges könyvtárba.
Ez azonban nem illendő, mi több, jogi problémákba is ütközhet. Ehhez a módszerhez csak a legvégső esetben forduljunk. Ha például találunk valahol egy képet, amely nagyon jól illik mondanivalónkhoz, használjuk nyugodtan. Ilyen esetekben azonban illik, sőt, erősen ajánlott engedélyt kérni az oldal tulajdonosától, esetleg a kép készítőjétől. Hasonlóképpen illendő az oldalunkon megemlíteni, hogy honnan szedtük a képet, esetleg helyezzünk el hivatkozást is az adott oldalra.
Más a helyzet az olyan képekkel, amelyek nem illusztrációként szolgálnak, hanem csak az oldalt díszítik. Ilyeneket egyáltalán nem etikus „kölcsönvenni”. Kivételt képeznek természetesen az olyan oldalak, ahol ilyen díszítő elemeket kínálnak letöltésre. Azonban ezeket sem célszerű igénybe venni. Az innen letöltöt képek ugyanis nem csak a mi oldalunkon bukkanhatnak fel, hanem máshol is. Semmi nem zárja ki, hogy az, aki a mi oldalunkat meglátogatja, már látta ezeket a képeket. Ebben az esetben oldalunk éppen az arcát veszti el, holott a képek éppen arra szolgálnának, hogy arcot adjanak neki. Ennél még az is jobb, ha nem használunk képeket.
Szólnunk kell még egy kérdésről: azokról a lapokról, melyek direkt képek bemutatására készültek. Ilyenek pl. a karikatúragyűjtemények. (Hasonlóak a pornóoldalak is, de ezekről most nem szólunk. A rengeteg profi pornóoldal miatt egy amatőrnek esélye sem lehet ezen a területen.) Sokan, akik hasonló gyűjteményt szerkesztenek, egyszerűen ellopják a képeket más oldalakról. Ez etikátlan, és az oldal készítőjét minősíti. Kivételként csak az olyan eseteket említhetjük, ahol a gyűjtemények nagyon specifikusak. Ilyen lehet például, ha valaki olyan karikaztúrákat gyűjt, melyen mondjuk madarak vannak. Ilyen esetekben érthető, ha kiemelünk egy képet a gyűjteményünkbe egy olyan helyről, ahol sok karikatúra van, de csak azon az egyen (de legalábbis nagyon kevésen) szerepel madár. Természetesen ilyenkor is elengedhetetlen, hogy engedélyt kérjünk a másik lap tulajdonosától, különösen, ha az ő alkotásáról van szó. Ebben az esetben is tűntessük fel a forrást, és helyezzünk el hivatkozást is az adott oldalra!
Leghelyesebb azonban, ha saját képeinket használjuk fel. Ezek leginkább saját magunk (ismerőseink, barátaink) által készített képek, fényképek. A fényképeket szkennerrel (lapolvasóval) juttathatjuk a gépünkbe. A fényképeket módosíthatjuk (torzíthatjuk, belefírkálhatunk, eltűntethetjük pattanásainkat stb) a megfelelő képfeldolgozó programokkal. Az ilyen programokkal rajzolhatunk is.
Grafikai segédprogramok
A következő bekezdésekben néhány programot mutatunk be, melyekkel képeket készíthetünk oldalainkra.
Egyszerű, de nagyon sokoldalú képnézegetű program az IrfanView. Ez a program ingyenesen letölthető a www.irfanview.com címről. A program nagyon sok képformátumot ismer, könnyen lapozgathatunk az egy könyvtárban található képek között (ez jól jöhet, ha egy képet keresünk egy nagy könyvtárban), és könnyen át is méretezhetjük a képeket. A program rendkívül gyors, és minden alapvető funkciót el tud látni.
Egy sokkal nagyobb tudású, de szintén igyenes program a GIMP. Ezt eredetileg Linuxra fejlesztették ki, de van Windows-os változata is. Letölthető a user.sgic.fi/~tml/gimp/win32/downloads.html címről. (A GIMP eredeti címe www.gimp.org) Rendkívül sokoldalú, mind fényképek módosítására, mind saját rajzok készításáre kiválóan alkalmas. Használatához magyar nyelven a gimp.rulez.org címen kaphatunk segítséget.
A Windows-on népszerű képszerkesztő a Paint Shop Pro, ez azonban nem ingyenes. Használatához magyarul többek között a w3.arg.c3.hu/~boobaa/egyeb/psp/pspind.htm vagy a www.freeweb.hu/kesro/psp/index.html címen kaphatunk tippeket. A próbaverzió letölthető a www.jasc.com/download_4.asp címről. A programhoz tartozik az Animation Shop, melynek segítségével GIF formátumú mozgóképeket készíthetünk.
A Corel cég két jelentős grafikai alkalmazást is kínál, az egyik a CorelDraw, a másik a Painter. Ez utóbbi különösen a hagyományos festészeti és grafikai technikák utánzására alkalmalmas. Mindkettőt a www3.corel.com címen találjuk meg, de természetesen csak a próbaverziót, mert ezek a programok is pénzbe kerülnek.
Természetesen sokféle más grafikai alkalmazás van még, érdemes körülnézni az olyan népszerű letöltési oldalakon, mint a
Prim Online letöltési oldala vagy az Origó szoftverbázisa. Itt remélhetőleg mindenki talál magának megfelelő programot.
Feladat
Ebben a fejezetben szintén nem adunk feladatokat, mert a képek beszúrásán nincs mit gyakorolni. Ne higgyük azonban, hogy a képekkel könnyű dolgunk lesz, amikor az oldalunkat elkészítjük. Éppen ezért javasoljuk, hogy különösen az első képes oldalak készítésénél ne kapkodjuk el a képek elhelyezését, hanem lehetőleg próbáljunk ki több kombinációt is. Ügyeljünk az illusztrációk egyenletes elosztására. A képek letöltési sebességét úgy ellenőrizhetjük, ha oldalunkat és a képeket egy hajlékonylemezre (floppyra) mentjük, és böngészönkkel onnan nyitjuk meg. Ha a kép megjelenését túl lassúnak találjuk, próbáljuk meg kicsinyíteni.