Képeinket / ábráinkat két igen eltérő formátumban tárolhatjuk. A bittérképes vagy raszteres formátumban az adott kép minden egyes képpontjának színinformációja eltárolásra kerül, míg a vektorgrafikus formátumban a képet alkotó objektumok, vagy rajzelemek tulajdonságai szerepelnek az állományban.
A weblapokon leggyakrabban GIF, JPG, PNG formátumú bittérképes képekkel találkozhatunk, ezek mindegyike tömörített formátum.
A sok színátmenetet tartalmazó, színes képeket (vagyis általában a fényképeket) érdemes JPG formátumban elmenteni, mert így nagyon kedvező méretű állományokat kapunk, így azok letöltési ideje is rövidebb, mint a többi formátum esetén A grafikai programok többségében mi magunk is beállíthatjuk a kép tömörítésének mértékét. Vigyázzunk, ha túl nagy tömörítési szintet állítunk be, akkor már jelentősen romlik a kép minősége. A JPG formátum veszteséges tömörítési eljárást használ.
A homogén foltokat, vonalas ábrákat GIF, vagy PNG formátumban érdemes elmenteni.
A GIF formátum további előnye, hogy támogatja az átlátszó hátterű (transparent) képek és animációk (animált gif) készítését is. Veszteségmentes tömörítési eljárást használ. Hátránya viszont, hogy a képek 256 színű palettát használnak.
A bal oldali képet egy grafikai programmal úgy módosítottuk, hogy a fekete szín legyen az átlátszó (transparent) szín. Az eredmény a jobb oldali képen látható.
A PNG szintén veszteségmentes eljárást használó formátum. Ez is támogatja az átlátszó hátterű képek készítését, sőt itt 256 fokozatú átlátszósági szinttel dolgozhatunk, a baj az, hogy ezt például a jelenleg legelterjedtebb böngészőprogram (Internet Explorer 6.0) alapesetben nem jeleníti meg helyesen. Kis buherálással viszont rávehetjük erre. Töltsük le a pngfix.js állományt és a dokumentumunk head részében helyezzük el a következő kódot:
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
Természetesen az src paraméterben a tényeleges elérési útat írjuk be.
Forrás: http://homepage.ntlworld.com/bobosola/index.htm
Az alábbiakban 3 képet találsz. Az 1-es számú képet úgy készítettük el, hogy az átlátszóság kb. 40% legyen. A 2-es számú képnél csak a háttér átlátszó. A 3-as számú képnél pedig a háttér sem átlátszó.
A weben használatos vektorgrafikus formátumok közül az egyik legnépszerűbb az SVG formátum. Az SVG (Scalable Vector Graphics) egy XML-alapú, kétdimenziós vektorgrafikák leírására szolgáló nyelv, amelynek használatához nem feltétlenül kell SVG rajzoló program. Ha ismerjük az SVG nyelvet, egy egyszerű szöveges állomány létrehozásával is tudunk ábrákat előállítani, hasonlóan ahhoz, ahogy weblapokat is létrehozhatunk egyszerű szöveges állományok készítésével.
Ez azért is jó, mert például egy adatbázisban tárolt adatok alapján tudunk grafikákat, diagramokat, sőt animációkat generálni. Például egy piros fekete körvonalú piros kört az alábbi kóddal tudunk megrajzolni:
Példa egy SVG állományra | |
Kód | Eredmény |
| <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/></svg> |  |
Az XML és DTD deklaráció után az <svg> és </svg> tagek közé írhatjuk a konkrét objektumok leírását.
Az svg tag paramétereként adhatjuk meg a grafika méretét (width - szélesség, height - magasság). A <circle> tag segítségével egy kört jeleníthetünk meg, a szükséges paraméterek megadásával.
A <circle> paraméterei:
- cx,cy: a kör középpontjának koordinátái
- r: sugár
- stroke: körvonal színe
- stroke-width: körvonal szélessége
- fill: a kitöltés színe
Ajánlott link
Ajánlott cikk: Bevezetés a képformátumok témakörébe (Sulinet)
Az SVG állományok megtekintéséhez a böngészőprogramhoz telepíteni kell egy SVG megjelenítőt is. Az SVG nyelvet az érdeklődők részletesebben is megismerhetik a http://www.w3schools.com/svg/default.asp webcímen (angol nyelven)
A képek beillesztése a weboldalra
Ajánlott cikk: Bevezetés a képformátumok témakörébe (Sulinet)
Az SVG állományok megtekintéséhez a böngészőprogramhoz telepíteni kell egy SVG megjelenítőt is. Az SVG nyelvet az érdeklődők részletesebben is megismerhetik a http://www.w3schools.com/svg/default.asp webcímen (angol nyelven)
A képek beillesztése a weboldalra
Képet az <img> tag segítségével helyezhetünk el az oldalon.
Az <img> tag fontosabb paraméterei | |||
Paraméter | Érték | Leírás | Megj. |
| src | uri | Itt adhatjuk meg a kép webcímét. | |
| alt | szöveg | Ide írhatjuk a kép leírását. Minden esetben töltsük ki, hiszen ezzel is segítünk azoknak, akik kikapcsolják a képek megjelenítését a böngészőprogramban, vagy eleve nem grafikus böngészőprogramot használnak, hanem például szövegfelolvasó programot. A vakok ilyen módszerrel böngésznek a weben, számukra alapvetően fontos, hogy a képek esetén legyen egy rövid szöveges leírás is. | |
| title | szöveg | Információt helyezhetünk el a képpel kapcsolatban. Ez a szöveg általában buboréksúgóként (tool tip) jelenik meg a böngészőprogramokban. | |
| width | méret [képpont] | A kép szélessége képpontokban. Akkor is érdemes beállítani, ha a tényleges méretében szeretnénk felhasználni a képet. | |
| height | méret [képpont] | A kép magassága képpontokban. Akkor is érdemes beállítani, ha a tényleges méretében szeretnénk felhasználni a képet. | |
| align | bottom | middle | top | left | right | Ezzel adhatjuk meg a kép igazítását, vagyis a kép és az azt körülfolyó szöveg viszonyát. bottom:a kép alját a szöveg alapvonalához illeszti (ez az alapértelmezett). middle: a kép közepét illeszti a szöveg alapvonalára. top:a kép teteje a mellette lévő szöveg tetejével lesz egy vonalban. left:a képet a bal margóhoz igazítja, így a szöveg tőle jobbra kerül. right:a képet jobb margóhoz igazítja, így a szöveg tőle balra kerül. |   |
| CSS alternatíva float vertical-align | float esetén: left | right | none vertical-align esetén: baseline | middle | top | bottom | A float paraméterrel a körbefuttatás irányát adhatjuk meg. none: ez az alapértelmezett. Ilyenkor nincs körbefuttatás. left:az elem bal oldalra kerül, a szöveg pedig jobbról folyja körbe. right:az elem jobb oldalra kerül, a szöveg pedig balról folyja körbe. A vertical-align paraméterrel a függőleges igazítást állíthatjuk be. baseline: az elem alapvonalához igazít. middle:a függőleges középponthoz igazít. top: az elem tetejéhez igazít bottom: az elem aljához igazít |  |
| hspace | méret [képpont] | a kép körül vízszintesen hagyandó térköz szélessége képpontokban | |
| CSS alternatíva margin-left margin-right | méret [képpont] | A margin-left paraméterrel az elem bal oldali margóját állíthatjuk be, a margin-right, pedig a jobb oldali margó beállítására jó. Példa: <img src="kep.png" style= "margin-left:10px"> | |
| vspace | méret [képpont] | a kép körül függőlegesen hagyandó térköz szélessége képpontokban | |
| CSS alternatíva margin-top margin-bottom | méret [képpont] | A margin-top paraméterrel az elem felső margóját állíthatjuk be, a margin-bottom pedig az alsó margó beállítására jó. | |
| border | méret [képpont] | a képet körülvevő szegély vastagsága képpontokban. | |
| CSS alternatíva border-width border-style | border-width esetén: méret [képpont] border-style esetén: none | dotted | dashed | solid | double | groove | ridge | inset | outset | A border-width paraméter az elem szegélyének beállítására szolgál. Példa: <img src="kep.png" style="border-width:2px"> Azonban a szegély fajtáját is meg kell adnunk, a border-style paraméter segítségével. none: nincs szegély dotted: pontvonalas dashed: szaggatott solid: folytonos double: dupla groove: bevágott ridge: kiálló inset: bemélyített outset: kidomborodó | |
Példa | |
| Kód | <img border="0" src="oldal_logo.png" width="200" height="121" alt="Web-fejlesztés logó"> szöveg |
Eredmény |  Az oldal azoknak készült akik innen szeretnék elsajátítani a honlapszerkesztés technikáját. |
| Kód | <img border="0" src="kepek/kep_temakor/webfejl_logo.png" width="200" height="121" alt="Web-fejlesztés logó" align="left"> szöveg |
Eredmény | Az oldal azoknak készült akik innen szeretnék elsajátítani a honlapszerkesztés technikáját. |
| Kód | <img border="0" src="oldal_logo.png" width="200" height="121" alt="Web-fejlesztés logó" align="right"> |
Eredmény | Az oldal azoknak készült akik innen szeretnék elsajátítani a honlapszerkesztés technikáját. |
| Kód | <img border="0" src="oldal_logo.png" width="107" height="65" align="right" alt="Web-fejlesztés logó"> |
Eredmény |  Az oldal azoknak készült akik innen szeretnék elsajátítani a honlapszerkesztés technikáját. |
Példa | |
| Kód | <img src="oldal_logo.png" width="200" height="121" alt="oldal logó" style="float: left"> szöveg |
Eredmény | Az oldal azoknak készült akik innen szeretnék elsajátítani a honlapszerkesztés technikáját. Reméljök nagy segítségükre lesz ez a kis kivonat. |
| Kód | <img src="kepek/kep_temakor/webfejl_logo.png" width="200" height="121" alt="Web-fejlesztés logó" style="float: right"> szöveg |
Eredmény | Az oldal azoknak készült akik innen szeretnék elsajátítani a honlapszerkesztés technikáját. Reméljök nagy segítségükre lesz ez a kis kivonat. |
| Kód | <img src="oldal_logo.png" width="200" height="121" alt="oldal logó" style="border-style:solid; border-width:1px; vertical-align: top; margin-left:5px; margin-right:20px"> szöveg |
Eredmény | Az oldal logó |
Vissza
Körülfolyatás megszüntetése
Sokszor előfordul, hogy például egy balra (vagy jobbra) igazított kép melletti szöveg esetén be szeretnénk állítani, hogy a szöveg következő sora már ne a kép mellé kerüljön, hanem a bal (vagy jobb) margóhoz igazítva. Hogyan érhetjük ezt el?
Egyszerű. A korábban bemutatott <br> taget (sortörés) használhatjuk, csak meg kell ismerkednünk a clear paraméterével.
Körülfolyatás megszüntetése
Sokszor előfordul, hogy például egy balra (vagy jobbra) igazított kép melletti szöveg esetén be szeretnénk állítani, hogy a szöveg következő sora már ne a kép mellé kerüljön, hanem a bal (vagy jobb) margóhoz igazítva. Hogyan érhetjük ezt el?
Egyszerű. A korábban bemutatott <br> taget (sortörés) használhatjuk, csak meg kell ismerkednünk a clear paraméterével.
A <br> tag fontosabb paraméterei | |||
Paraméter | Érték | Leírás | Megj. |
| clear | left | all | right | none | none: normál sortörés left: a sortörés utáni elem a bal margóhoz kerül right: a sortörés utáni elem a jobb margóhoz kerül all: a sortörés utáni elem oda kerül, ahol mindkét margó üres | |
| CSS alternatíva clear | left | both | right | none | A fenti paraméterekkel megegyező hatású, de itt az all helyett a both értéket kell használni. | |
| Példa (a br tag clear paraméterének használata) | |
| Kód | <img border="0" src="oldal_logo.png" width="200" height="121" align="left"> Web-fejlesztés logó <br clear="left"> Ez a szöveg a kép alá kerül. |
Eredmény | Az oldal logó Ez a szöveg a kép alá kerül. |
| Kód | <img border="0" src="lodal_logo.png" width="200" height="121" align="left"> <img border="0" src="oldal_logo.png" width="89" height="56" align="right">1.sor <br clear="right"> 2.sor<br clear="all"> 3.sor |
Eredmény |  1.sor 2.sor 3.sor |
| Példa (a clear paraméter használata) | |
| Kód | <img border="0" src="oldal_logo.png" width="200" height="121" align="left"> Web-fejlesztés logó <span style="clear: left">Ez a szöveg a kép alá kerül.</span> |
Eredmény | Az oldal logó Ez a szöveg a kép alá kerül. |
| Kód | <img border="0" src="oldal_logo.png" width="200" height="121" align="left"> <img border="0" src="oldal_logo.png" width="89" height="56" align="right">1.sor <span style="clear:right"> 2.sor</span><span style="clear:both"> 3.sor</span> |
Eredmény | 1.sor 2.sor 3.sor |
