3. Grafikák

Használható formátumok

A honlapok szebbé tételének egyik következő módja grafikai elemek beágyazása. Mielőtt azonban rátérnénk magára a beépítésre, nézzük át, milyen képek is jöhetnek szóba a weben.

Alapvetően a böngészőprogramok kétféle fájlformátumot ismernek és képesek helyesen kezelni, mégpedig a GIF és a JPEG fájlokat. Nos a kettőnek merőben más tulajdonságai vannak, melyekkel nem árt megismerkedni.

A GIF (Graphical Interchange Format) képek maximum 256 szín tárolására alkalmas, ezért főleg kisebb képek, és elsősorban kisméretű rajzok tárolására alkalmas. A 256 szín alapban standard (pl. Windows-os) színskála, azonban a palettát mi is beállíthatjuk, sőt nem is kell maximális számú színt felhasználni, mert ezt is szabályozhatjuk.

A JPEG fájlok különösen fotók és nagyobb rajzok tárolására alkalmas. Ennél a formátumnál már 24 bites tárolás történik, így akár minden RGB szín előfordulhat ugyanabban a képben.

Ha például Paintbrushban, vagy bármi másban készítünk egy rajzot, mentsük el az előbb említett formátumok egyikében, vagy ha azok nem állnak rendelkezésre akkor 24-bites BMP fájlba. Nyissuk meg (ha nincs jobb) a Microsoft Photo Editorban, és mentsük el GIF-ként, illetve JPG-ként. Ha megtehetjük (és miért ne tehetnénk), először BMP-be mentsünk, majd ezt a fájlt mentsük el mind a kétféleképpen, majd amelyik kisebb/jobb minőségű, azt használjuk végül.

Létezik egy harmadik formátum is, melyet a böngészők kezelni tudnak, de kis elterjedtsége miatt erről majd csak a későbbiekben ejtünk szót.

Kész grafika beépítése

Mikor elkészültünk a képpel (vagy szereztünk valahonnan egyet), nincs más hátra, minthogy beágyazzuk az oldalba. E műveletet célozza meg az <IMG> (image) tag, valamint annak SRC (source) attribútuma. Ha például be akarjuk illeszteni az 1.gif file-t, akkor a következőt kell használnunk: <IMG SRC="1.gif"> . Minden képhez ún. alternatív szöveget is rendelhetünk, melyet a böngésző akkor jelenít meg egy kis úszó ablakban, ha az egeret a képre húzzuk. Ennek különösen akkor van jelentősége, ha a kép valamilyen oknál fogva nem töltődik le az olvasó gépére. Éppen ezért szokás, és erősen ajánlom mindenkinek, hogy különösen feliratoknál, illetve irányító gomboknál mindíg használjuk ezt a lehetőséget, melyet az ALT attribútummal hívhatunk életre.

A képek alapesetben akkora helyet foglalnak el, mint amekkora eredeti méretük, azonban ha szükséges, megváltoztathatjuk a méretet. Erre szolgálnak lehetőségül a WIDTH (szélesség) valamint a HEIGHT (magasság) attribútumok. Ha történetesen azt akarjuk, hogy az előbb látott 1.gif ne az eredeti 17×24 pixeles, hanem mondjuk 25×35-ös legyen, akkor a következőt kell használnunk: <IMG SRC="1.gif" WIDTH=25 HEIGHT=35> . Ez a megoldás azonban, mint az látható volt, erősen ronthat a képminőségen, ezért (egyes esetektől eltekintve) kerüljük ezen megoldás használatát.

A képeknek, némileg hasonlóan a bekezdésekhez, megadhatjuk az elhelyezkedését is, miszerint bal, közép, vagy jobboldalt helyezkedjenek-e el. Ezt a <P> taghez hasonlóan itt is az ALIGN attribútummal, valamint azok korábban megismert értékeivel érhetjük el. Ekkor a szöveg a kép mellett helyezkedik el jobbra, vagy balra. Amennyiben a képet középen akarjuk elhelyezni, akkor ezt sajnos csak a <CENTER> tag segítségével tehetjük meg, az ALIGN=center értéket ugyanis sajnos nem definiálták.

Létezik még egy, némileg a grafikákkal összefüggő lehetőség, ez pedig a vízszintes vonal beszúrása. Ennek használatával a böngésző egy, az általunk megadott méretű árnyékolt vízszintes vonalat helyez el. Parancsa a <HR> (horizontal rule) tag, magasságát és szélességét a képekkel megegyező módon szabályozhatjuk, azonban ha nem akarjuk, hogy a vonal árnyékolt legyen, akkor használjuk a NOSHADE attribútumot.

Összefoglalás

Készítsünk gyakorlásképpen egy oldalt az alábbiak szerint:
- Legfelül középrezárva jelenjen meg a html.jpg nevű kép, alternetív szövege "HTML" legyen.
- A címsor alatt egy két pixel magasságú, középre igazított vízszintes vonal húzódjon
- A vonal alatti szöveg iniciálé-szerűen az 1.gif-fel kezdődjön, szövege az alábbi legyen: "16 millió 777 ezer 216 különböző színt tudunk RGB-technikával kódolni, így JPEG-fájloknál összesen ennyi szín közül választhatunk, szemben a GIF-fel, ahol a 8-bites tárolás miatt egyszerre legfeljebb 256 különböző színt használhatunk. A JPEG fájlokat nagyobb rajzok és fényképek esetén, míg a GIF képeket kis rajzok esetén érdemes használni." A kép méretét állítsuk be 17×24 pixelre.

És íme a "megfejtés":

<HTML>
<BODY>
<CENTER><IMG SRC="html.jpg" ALT="HTML"></CENTER>
<P><HR HEIGHT=2 ALIGN=center>
<P><IMG SRC="1.gif" ALT="1" WIDTH=17 HEIGHT=24 ALIGN=left>6 millió 777 ezer 216 különböző színt tudunk RGB-technikával kódolni, így JPEG-fájloknál összesen ennyi szín közül választhatunk, szemben a GIF-fel, ahol a 8-bites tárolás miatt egyszerre legfeljebb 256 különböző színt használhatunk. A JPEG fájlokat nagyobb rajzok és fényképek esetén, míg a GIF képeket kis rajzok esetén érdemes használni.
</BODY>
</HTML>

<HR ALIGN=center HEIGHT=2 WIDTH=80% NOSHADE>
<IMG SRC="kep.gif" ALIGN=left ALT="kép" HEIGHT=20 WIDTH=20>

Előző fejezet
Következő fejezet