Képek

Képet a következő módon szúrhatunk be:

Az attribútumok jelentése:

src

Source, azaz forrás, a kép fájlnevét adja meg. Ezt megadhatjuk relatív és abszolút módon. Most relatívan adtuk meg a kepem.gif fájl elérési útvonalát az aktulális dokumentumhoz képest, eszerint a példabeli kepem.gif ugyanabban a könyvtárban található, mint a rá hivatkozó dokumentum. A linkekről íródott fejezetben arra is látunk megoldást, hogyan kell egy másik könyvtárban található képet beszúrni. Az abszolút érték azt jelenti, hogy egy URL-t adunk meg az src értékének. A két megoldás között az a lényeges különbség, hogy relatív megadás esetén a kép a saját szerverünkön található, míg ha egy külső URL-t adunk meg, akkor az mutathat egy másik szerveren található képre is. Azonban nem tudhatjuk, hogy ez a hivatkozott kép ott van-e még a szerveren, ezért előfordulhat, hogy már letörölték és a mi weboldalunkon emiatt csak az alt attribútumban megadott szöveg fog látszani!

width

Milyen széles a kép képpontokban?

height

Milyen magas a kép képpontokban?

alt

Ez a szöveg fog megjelenni akkor, ha valamilyen oknál fogva a böngésző nem találta meg a képfájlt, vagy ki van kapcsolva a képek megjelenítése. A képernyőfelolvasók ezt a szöveget olvassák fel a kép helyett. Az Internet Explorer hibásan az alt szöveget megjeleníti, ha az egérmutatót a kép fölé visszük.

Ez a négy attribútumot mindenképpen adjuk meg! Az src és azt alt értékét figyelembe veszik a keresők, például a Google képkeresője. Ezért mind a fájnév, mind a kép helyett adott esetben megjelenő szöveg legyen kifejező, kapcsolódjon a kép tartalmához! Az alt értékének megadott szöveget olvassák fel a képernyőfelolvasók is, és a szöveges böngészők (Lynx) ezt jelenítik meg a kép helyett. Azonban csak olyan képhez adjuk meg, ami hordoz tartalmat! Helykitöltő, vagy egyéb, tartalmat nem kifejező képhez így adjuk meg: alt="". Ezt azért kell így írni, mert az alt attribútum megadása kötelező, de ha nincs mit írni a képről, akkor üres értéket kell neki adni.

A title attribútum egy segédszöveget rendel a képhez. Ez akkor lesz látható, ha az egérmutatót kis ideig pihentetjük a kép felett:

Képfájlok típusai

Mindegyik képformátumnak megvan a maga előnye. A weben a három legelterjedtebb képformátum a következő: JPEG, GIF és PNG.

A JPEG (Joint Photographic Experts Group) fényképekhez, sok színt vagy színátmenetet tartalmazó képekhez ideális. Több millió színű lehet. Kiterjesztéseként a .jpeg vagy a .jpg használt. Háttere nem lehet átlátszó.

A GIF (Graphics Interchange Format) csak 256-féle különböző színt tartalmazhat, viszont lehet átlátszó a háttere. Ideális olyan ábrákhoz, ahol elég a 256 szín, és főleg egyszínű területek alkotják. A GIF kép létrehozásakor beállítható, hogy hány színt használjon fel a 256-ból, így a lehető legkisebb méretű fájlt kapjuk, ami gyorsabb letöltődést eredményez. Egy érdekes tulajdonsága, hogy animált képeket is létrehozhatunk vele egyetlen fájllal. Ide beszúrtam egy animált és átlátszó hátterű GIF képet példaként. Az átlátszóság azt jelenti, hogy a kép háttere felveszi az őt tartalmazó elem hátterét. Ennek szemléltetésére ugyanazt a képet először egy szürke, majd egy narancssárga hátterű div-be tettem bele.

A PNG (Portable Network Graphics) hasonlóan sok millió színt képes kezelni, mint a JPEG. A GIF-et hivatott leváltani, ugyanis a legtöbb esetben a PNG kisebb fájlméretet eredményez a GIF-nél. Támogatja továbbá a fokozatos átlátszóságot is. Azonban az Internet Explorer 6 nem támogatja ez utóbbi képességet. A képek fényességét függetleníteni tudja a megjelenítéstől, így a színek ugyanúgy néznek ki nyomtatásban, és eltérő képességű kijelzőkön.

Akkor érdemes PNG-t használni GIF helyett, ha nincs szükségünk animációra, és a képnek nincsen átlátszó háttere, vagy ha van, akkor nem probléma, hogy az IE6 nem kezeli ezt.

Egy kiterjesztése az APNG (animált PNG), amelyet azonban jelenleg csak az Opera 9.5+ és a Firefox 3+ tud megjeleníteni. A bekezdés alatt látható egy animált PNG. Ha állóképet lát, akkor a böngészője nem támogatja az APNG-t.

Színek definiálása a weboldalakon

A weboldal megjelenítésére képes eszközök (pl. monitor, nyomtató) a színeket három alapszínből, a piros-zöld-kék kombinációból keveri ki. Mintha lenne három festékes vödrünk, és ezeket kellene összeöntenünk egy bizonyos arányban ahhoz, hogy a kívánt színt kapjuk meg. Ezeknek az alapszíneknek az angol nevei rendre red, green, blue, ezért az ilyen színeket az angol neveikből rövidítve RGB-színeknek nevezzük.

Azt, hogy melyik színből mennyit akarunk felhasználni, háromféleképpen adhatjuk meg:

1. Hexadecimális, azaz 16-os számrendszerbeli számokkal, pl. #1E0EE2 -ez egy sötétkék szín, #F0F2AC -ez pedig egy világossárga. Az érték előtt kettőskeresztet használunk, majd az első kettő szám a piros, a középső kettő a zöld, az utolsó kettő pedig a kék mennyiségét jelzi 16-os számrendszerben. Szerencsére ezeket a számokkal nem kell vesződnünk, mert a kódszerkesztő programunk fel fog ajánlani egy színpalettát, és a kiválasztott szín kódját be fogja szúrni helyettünk.
2. A második módszer az RGB értékek százalékos formában történő megadása. Ekkor azt mondjuk meg, hogy a három alapszínből százalékosan milyen arányban forduljon elő a színünkben. Pl. color: rgb(30%,20%,50%);
3. Hasonló módszer a harmdik, csak most nem százalékosan, hanem egy 0 és 255 közti tízes számrendszerbeli számmal adjuk meg az RGB színek arányát. Pl. color: rgb(34,55,201);
4. Használhatunk előre definiált angol színneveket is. Ezeket a W3C határozta meg a szabványban, ezek nevei alább láthatóak.

Mivel weboldalunkat nagyon sokféle operációs rendszerrel, monitorral, grafikus kártyával stb. nézhetik meg a látogatók, ezért nem lehetünk 100%-ig biztosak benne, hogy az általunk kikevert színárnyalatot minden monitor képes lesz megjeleníteni. Van viszont 216 darab színárnyalat, amelyeket még az olyan monitorok is megjelenítek, amelyek csak 256-féle színt képesek. Ezeket webtűrő színeknek nevezzük (browser-safe colors).

Azonban összesen 256*256*256 = 16,7 millió színt tudunk kikeverni, és általában nem kell aggódnunk amiatt, hogy a kikevert színünket nem fogja látni a látogató, ezért nem kell magunkat csak 216 színre korlátozni.

A továbbiakban a hexadecimális írásmódot fogom használni, mert ez a legrövidebb írásmód.

Az alábbi példák mindegyike a fehér színt állítja elő a h1-es címsorra: (Persze valós példáknál csak egyszer adjunk meg a color értékét!)

Weboldal hátterének beállítása

Tulajdonság	Leírás	Lehetséges értékek
background-color	Egy elem háttérszínét adja meg	color-rgb color-hex color-name transparent
Body elemnek, és a rajta lévő szövegek háttérszínének megadása.
background-image	Háttérképet állít be.	url(URL) none
Kép beállítása háttérképnek. Alapértelmezettként a teljes hátteret kirakja a képpel, mozaikszerűen.
background-repeat	Beállítja, hogy a háttérkép vízszintesen, függőlegesen, mindkét módon, vagy sehogy se ismétlődjön.	repeat repeat-x repeat-y no-repeat
Háttérkép ismétlődésének letiltása. Háttérkép ismétlése csak vízszintesen. Háttérkép ismétlése csak függőlegesen.
background-position	A háttérkép pozícióját állítja be.	top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos
A háttérkép pozícionálása a tartalomhoz képest. Először beállítjuk, hogy ne ismétlődjön a kép, majd középre és jobbra (center right) rendezzük a látható felülethez képest. A további lehetséges kombinációkat kiolvashatjuk a táblázatból.
background-attachment	Beállítja, hogy a háttérkép fixen maradjon-e az oldal görgetésekor, vagy sem.	scroll fixed
Oldal görgetésekor is egy helyben maradó háttérkép.
background	Rövidítő tulajdonság az összes eddigi tulajdonság egyidejű megadásához.	background-color background-image background-repeat background-attachment background-position
Az összes tulajdonság egy meghatározásban. A background rövidítő tulajdonsággal az összes eddigi tulajdonságot egyszerre be tudjuk állítani, a táblázatban megadott és a példában is látott sorrendben. Néhány tulajdonság egy meghatározásban. Azonban nem kötelező az összes tulajdonságot használnunk, ebben a példában csak néhányat állítottunk be, a többi érték az alapértelmezett értéket veszi fel ilyenkor.

Ajánlott linkek

Háttérképek: http://www.hatterkepek.hu/

A Google képkeresője: http://www.google.com/imghp

Photoshop képszerkesztő program: http://www.adobe.com/products/photoshop/

CSS színek, hátterek - hivatalos specifikáció magyarul: http://htmlinfo.polyhistor.hu/css2ref/colors.htm

CSS színek, hátterek - hivatalos specifikáció angolul: http://www.w3.org/TR/CSS21/colors.html