Ez az oktatóanyag bemutatja, hogyan lehet egy weboldalt grafika hozzáadásával díszíteni. Megismerkedünk a legelterjedtebb képformátumokkal, megtudjuk, milyen címkével illesztjük a képeket az oldalra, megértjük az alternatív címkéket és a szövegek és grafikák igazítását. Megismerkedünk a képek alapvető attribútumaival és megtanuljuk a kép szélességének és magasságának beállítását. Ezután néhány szót a képek hivatkozásként való használatáról, és arról, hogy mi a képek miniatűrje. Végezetül itt van néhány általános tipp a grafikák weboldalon való használatához.

Képek hozzáadása egy weboldalhoz
Ha egy weboldal szöveges információn kívül mást nem tartalmaz, akkor a rajta szereplő információk miatt érdekesnek találhatja valaki, de nem valószínű, hogy valaki vonzónak merné nevezni. Képek hozzáadása egy weboldalhoz nagyon egyszerű. Az oldal professzionális megjelenését biztosító grafikák hozzáadása bizonyos ismereteket igényel. Erről szól a mai lecke.

Az interneten a két leggyakrabban használt képformátum a GIF és a JPEG. A JPEG (Joint Photographic Experts Group) csoport által kifejlesztett és elnevezett formátumot jellemzően egyenletes színátmenetű képek, például fényképek mentésére használják.

Szinte az összes többi grafikai elem GIF formátumban (Graphics Interchange Format) van mentve - ez egy grafikus csereformátum. Jelenleg van egy másik új grafikai formátum, amely egyre népszerűbb: a PNG (Portable Network Graphics). Várhatóan végül felváltja a GIF formátumot. Azonban ne rohanjon el menteni az összes grafikus fájlt ebben a formátumban, mivel még nem támogatja minden böngésző.

Minden kép ugyanazzal a címkével, az úgynevezett képforrás címkével kerül hozzáadásra a weboldalhoz . Valószínűleg most már maga is megállapíthatja, hogy ez a bejegyzés a tényleges címkéből áll , attribútuma (scr) és ennek az attribútumnak az értéke (location). Mivel azonban az scr attribútum használata kötelező, kényelmesebb, ha erről a bejegyzésről egyetlen általános címkeként beszélünk. Azt is észrevehette, hogy a képforrás címkéjének nincs megfelelő záró címkéje. Ez egy különálló, önálló címke, ezért ne felejtsen el beírni egy perjelet a végére: .

#1058;D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DТD/xhtml1/transitional.dtd"> Első képek e> Ezt a képet az első weboldalamra adtuk.r >

Alternatív feliratok hozzáadása
Az interneten való utazás során valószínűleg többször is észrevett már különféle feliratokat, amelyek akkor jelennek meg, amikor az egeret egy weboldal valamely grafikus eleme fölé viszi. Ezek a címkék általában további információkat nyújtanak magáról a képről vagy az oldal azon területéről, amelyet elfoglal.

Az alábbi példa HTML-kód bemutatja, hogyan kerül az alt attribútum a címkébe . Az src attribútumhoz hasonlóan az alt attribútum további információkat közöl a webböngészővel a képről, és mindig használható egy címkével együtt .

Az alt attribútum alternatív szöveget ad meg egy weboldalhoz hozzáadott grafikus elemhez. Ezt a szöveget alternatív szövegnek nevezik, mert megjelenhet a képernyőn magának a képnek az alternatívájaként. Az alt attribútumnak van egy másik nagyon fontos célja is. Sok internetes látogató, aki alacsony adatátviteli sebességet használ, utasíthatja böngészőjét, hogy ne töltsön be vagy jelenítsen meg grafikus információkat. Ez lehetővé teszi számukra, hogy gyorsabban töltsék be a weboldalakat a számítógépükre.

Ne feledje továbbá, hogy nem minden böngésző képes grafikát megjeleníteni az ablakaiban. Például a Lynx böngésző egyáltalán nem támogatja ezt a funkciót. Így az alt attribútum lehetővé teszi a webdesigner számára, hogy megbizonyosodjon arról, hogy ha a weboldalának látogatója nem lát képet a képernyőjén, akkor legalább láthatja a képhez hozzáadott szöveges információkat.

Bár az alt attribútum minden címkéhez definiálható , ügyeljen arra, hogy egyes grafikai elemekhez ne rendeljen nem megfelelő szöveges üzeneteket. Például nincs értelme alternatív szöveges címkéket hozzáadni egy weboldal megjelenésének különböző elemeihez. Az ilyen hibák elkerülése érdekében az ilyen elemek alt attribútuma üres értékhez (alt="") rendelhető. Ha nem ad meg más attribútumértékeket, a böngésző az eredeti méretben jeleníti meg a képet, és a kép felső szélét a szomszédos szöveglánc felső széléhez igazítja. Mindkét beállítás módosítható stíluslapcímkék használatával.

Képtulajdonságok
Címkéhez Olyan attribútumok állnak rendelkezésre, amelyek lehetővé teszik a kép átméretezését. Ezen attribútumok közül néhányat az alábbiakban sorolunk fel.
magasság— Képpontban vagy százalékban megadva — Meghatározza a kép magasságát
szélesség— Képpontban vagy százalékban megadva — Meghatározza a kép szélességét.

A kép magasságának és szélességének beállítása
A weboldalon elhelyezett kép méreteit a magasság és szélesség attribútumokkal lehet megadni. Ezen attribútumok értéke vagy rögzített pixelszámként, vagy az oldalmérethez viszonyított százalékban van megadva. Vessen egy pillantást az alábbi HTML-kódra. Az első címkében az eredeti kép méretei, amelyeket a lecke előző rajzain már láthattunk, függőlegesen 60 képpontra, vízszintesen pedig 60 képpontra vannak beállítva. A második címkében ugyanannak a képnek a szélessége az oldal szélességének 6%-a, magassága pedig az oldal magasságának 10%-a. A képen látható, hogyan néz ki mindkét kép a böngészőablakban.

Amikor egy képet megjelenít az ablakában, a böngésző egyformán jól tudja feldolgozni a pixelben és százalékban megadott értékeket. Ügyeljen azonban arra, hogy a weboldal látogatóinak számítógépe a telepítetttől eltérő képernyőfelbontásra állítható a monitorodhoz. Mi következik ebből? Például a monitor felbontása 800x600-ra van állítva. Az előző példában a weboldalhoz hozzáadott grafika szélessége az oldal szélességének 6%-ára volt beállítva, ami ennél a felbontásnál 48 pixel lenne. Ha ugyanazt a képet 1024x800-as felbontású monitoron tekinti meg, az oldalszélesség megadott 6%-a 61 pixeles szélességnek felel meg.

Egy kép átméretezésekor ügyeljen arra, hogy mindkét értéket a magasságának és szélességének megfelelően állítsa be. Ha ezen értékek közül csak az egyiket módosítja, maga a kép függőlegesen vagy vízszintesen megfeszítve jelenik meg a képernyőn. Egy másik lehetőség a képméret beállítása grafikus szerkesztővel.

Azt az illúziót keltheti, hogy a kép gyorsabban töltődik be. Függetlenül attól, hogy a kép átméretezett-e vagy sem, mindig adja meg a magasság és szélesség attribútumok értékeit, mivel ezek fontos információkat közölnek a böngészővel arról, hogy mennyi helyet kell lefoglalni az oldalon a kép elhelyezéséhez. Ebben az esetben a böngésző kijelölheti a képhez szükséges helyet, és folytathatja az oldal többi elemének építését anélkül, hogy leállítaná magának a képnek a betöltését. Ily módon úgy tűnik, hogy az oldal gyorsabban töltődik be, mivel a látogatóknak nem kell megvárniuk a kép teljes betöltődését, mielőtt végre más információkat is láthatnak az oldalon.

Ha valóban arra van szüksége, hogy a kép meghatározott mennyiségű helyet foglaljon el az oldal szélességében, használjon százalékos értékeket. Ebben az esetben bármely monitor képernyőjén a kép az oldal ugyanazt a részét fogja elfoglalni, mint az Ön képernyőjén. Ha azt szeretné, hogy magának a képnek a felbontása (mérete pixelben) állandó maradjon, használja a pixelben kifejezett értékeket.

Szöveg és grafika összehangolása
Címke igazítási attribútum lehetővé teszi a kép igazítását a szövegsor jobb (jobb érték) vagy bal (bal érték) széléhez. Az attribútum használatának példái az ábrán láthatók.

Ugyanez az attribútum használható egy kép függőleges igazítására is (ismét a szöveghez képest). Három másik értéket vehet fel: felső, alsó és középső. Ha az igazítás attribútum a tetejére van állítva, a kép felső széle a környező szöveg felső széléhez igazodik. Ha az igazítás attribútum alsó értékre van állítva, a kép alsó széle a környező szöveg alsó széléhez igazodik. Ha az igazítás attribútum középre van állítva, a kép közepe a szövegsor közepéhez igazodik.

Képek használata linkként
A képek nem csak weboldaltervezésre alkalmasak. Sikeresen használhatók hiperhivatkozásként más dokumentumokhoz. A HTML könnyen megoldja ezt a problémát, mert a képek pontosan ugyanúgy hiperhivatkozásokká alakulnak, mint a feliratok. Ehhez egy címkét is fel kell helyeznie, amely egy weboldal elemet tartalmaz, amely egy másik dokumentumra mutató hivatkozás lesz. Így, ha egy hiperhivatkozást kell követni egy képre kattintás után, a címkének tartalmaznia kell az adott kép címkéjét.

Ebben az esetben, miután egy weboldal látogatója a kép fölé viszi az egeret, a kurzor mellett megjelenik az „Ez az én önarcképem!” szöveges üzenet. A képre kattintva megnyílik a DOC2.htm dokumentum, amelyre a hiperhivatkozás mutat.

Miniatűr képek
A HTML hiperhivatkozások létrehozására szolgáló képességének egy másik gyakori módja az, hogy egyes képeket másokhoz kapcsolnak. Miért van erre szükség? Az a tény, hogy gyakran túl nagy a weboldalon közzétenni kívánt képek mérete, és nincs garancia arra, hogy a látogatóknak lesz türelmük megvárni a betöltés befejezését. Ilyenkor az eredeti képről egy kisebb másolat készül, úgynevezett miniatűr, amit a böngésző sokkal gyorsabban tud betölteni. Ha a látogatót érdekli a kép, és le akarja tölteni annak teljes példányát, csak erre a miniatűrre kell kattintania. Így néznek ki a megfelelő HTML-kódok.

Mint látható, a thumbnail.jpg képre kattintva egy másik képfájl (image.jpg) nyílik meg. Az alt attribútum értékeként megadott szöveges karakterlánc megmondja a látogatónak, hogyan nyissa meg a fő képet.

A képek sikeres használatának titkai
A képek érdekesek és tetszetősek, sok vizuális információt adnak, és nagyon könnyen felvehetők a weboldalakra, de akkor is tartsa be az alábbi szabályokat, ha valóban olyan oldalt szeretne létrehozni, amely népszerűvé válik az internetezők körében.

Minél nagyobb a képfájl mérete, annál tovább tart a letöltés a felhasználó számítógépére. Mivel a legtöbb internetes látogató továbbra is alacsony sávszélességű kapcsolatot használ az internet eléréséhez, a fájlok letöltési mérete továbbra is kritikus fontosságú számukra. Ezt mindenképpen vegye figyelembe, és próbáljon meg minél kisebb képeket elhelyezni weboldalain.

Nemcsak az egyes képek fájlmérete fontos, hanem a teljes HTML-dokumentum teljes fájlmérete is. Minél több képet ad hozzá egy weboldalhoz, akár kicsiket is, annál nagyobb lesz a végleges dokumentum fájlmérete. Tekintse meg az oldal előnézetét különböző böngészőkben, és becsülje meg, mennyi ideig tart az egyes böngészők betöltése.

Mivel az alt attribútum nagyon fontos (ajánlott minden címkéhez megadni , legyen óvatos, amikor használja. Ügyeljen arra, hogy a szöveges üzenet tartalma mindig megegyezzen magával a képpel, ellenkező esetben félrevezethetik az oldal látogatóit. Ugyanez fordítva is érvényes: győződjön meg arról, hogy a képek megegyeznek a weboldalon megjelenő szöveges információkkal. Repülőgépről készült fénykép megfelelő lenne egy légi utazással foglalkozó weboldalon, de teljesen helytelen a vadon élő állatokkal foglalkozó weboldalon.

Sok érdekes képet találhat az interneten, és könnyen mentheti őket számítógépére. Sok ilyen kép azonban szerzői jogvédelem alatt áll. Ha egy kereskedelmi oldalon talál egy Önnek tetsző képet, ellenőrizze, hogy ott vannak-e szerzői jogi megjegyzések, és hogy a kép ingyenesen használható-e.

Ha a weboldalon megjelenő képet nem védi szerzői jog, átmásolhatja számítógépe memóriájába. Ehhez egyszerűen kattintson a jobb gombbal erre a képre, és válassza a Kép mentése másként lehetőséget a megnyíló menüből. Miután elmentette a képet a számítógépére, tovább használhatja, mint bármely más képet.

1. definíció

A weblap egy HTML-ben létrehozott szövegfájl, amelyet a World Wide Web (WWW) tárol. A szövegen kívül egy weboldal tartalmazhat hipertext hivatkozásokat, amelyeken keresztül más weboldalakra navigálhat és megtekinthet, valamint beszúrásokat grafikák, animációk, videoklipek és zene formájában.

A HTML használatával:

1. Weboldalak létrehozása és szerkesztése.
2. Szerkesszen HTML dokumentumokat az internetről, figyelembe véve a dokumentumba ágyazott összes objektum (képek, animációk stb.) működését.
3. Hipertext hivatkozások, valamint rajzok, diagramok, animációk, videoklipek, zene és beszéd, speciális effektusok HTML-dokumentumba ágyazásának képessége, multimédiás prezentációk, diavetítések és demonstrációs projektek létrehozása.

1. megjegyzés

A grafikus képeket általában külön fájlokban tárolják. A HTML nyelv speciális címkékkel rendelkezik, amelyekkel hivatkozásokat írnak a weboldalak kódjaiba, amelyek ezeknek a fájloknak a tényleges címei az interneten. Amikor ilyen címkékkel találkozik, a webböngésző kérést küld a webszervernek a megfelelő képet, hangot vagy videót tartalmazó fájlra, és megjeleníti azt a címke helyén található weboldalon. A weboldaltól különálló fájlokban tárolt minden adatot (képek, hangok és videók stb.) a weboldalak beágyazott elemeinek nevezünk. Nézzük meg közelebbről a kép weboldalhoz való hozzáadásának folyamatát.

Képek hozzáadása weboldalhoz

A weboldalak vonzereje éppen a rajtuk használt grafikákban és egyéb különféle objektumokban rejlik. Kép hozzáadása az oldalhoz nem nehéz. De olyan grafikák hozzáadása, amelyek a weboldalt reprezentatívabbá és professzionálisabbá tehetik, sokkal nehezebb és speciális ismereteket igényel.

Hozzáadhat egy képet az oldalhoz a képforrás címkével, amely így néz ki:

hol van maga a címke, és az scr az attribútuma. Mivel az scr attribútum kötelező, elmondhatjuk, hogy ez az egész bejegyzés egyetlen közös címke. A képforráscímke nem használ megfelelő záró címkét, mert a forráscímke önálló, ezért használatkor záró perjelre van szükség a végén: .

Alternatív feliratok hozzáadása

Az interneten gyakran találkozhatunk különféle feliratokkal, amelyek akkor jelennek meg, ha az egeret a weboldalon lévő bármely grafikus objektum fölé viszi. Ezek a feliratok általában további információkat tartalmaznak magáról a képről vagy az oldal azon területéről, amelyen az található.

Alább látható a HTML-kód a címkén belül hozzáadott alt attribútummal. Ez az attribútum, hasonlóan az src attribútumhoz, további információkat közöl a böngészővel a képről, és mindig használható egy címkével együtt.

alt="Ez egy kép!" />!}

Az alt attribútum feladata, hogy alternatív szöveget definiáljon egy weboldalhoz hozzáadott grafikus elemhez. Azért nevezik alternatívának, mert a kép alternatívájaként jelenik meg a képernyőn. Az alt attribútum egy másik fontos funkciót is ellát. Ez lehetővé teszi a webdesigner számára, hogy biztos legyen abban, hogy ha az oldal látogatója nem lát képet a képernyőjén, akkor legalább láthatja a képhez hozzáadott szöveges információkat.

Amikor az alt attribútumot minden címkéhez használja, ügyeljen arra, hogy ne rendeljen nem megfelelő szöveges üzeneteket a grafikus elemekhez. Például nincs értelme alternatív szövegcímkéket hozzáadni az oldalterv elemeihez. Az ilyen hibák elkerülése érdekében ezeknek az elemeknek az alt attribútuma üres értékre állítható (alt=" "). Ha nem állít be más attribútumot, a böngésző az eredeti méretben jeleníti meg a képet, de a kép felső szélét a szomszédos szöveglánc felső széléhez igazítja. A stíluslapcímkék használatával azonban mindkét beállítást módosíthatja.

Képtulajdonságok

A címke olyan attribútumokkal rendelkezik, amelyek lehetővé teszik a képek átméretezését. Itt van néhány közülük:

• magasság – a kép magasságának meghatározására szolgál pixelben vagy százalékban;
• szélesség – a kép szélességének pixelben vagy százalékban történő meghatározására szolgál.

A kép magasságának és szélességének beállítása

A weboldalakon elhelyezett képek mérete a fenti attribútumokkal állítható be. Ezen túlmenően, ezek értékeit vagy rögzített pixelszámként, vagy az oldalmérethez viszonyított százalékban állítják be. Az alábbi HTML kódban az első címke az eredeti kép méreteit tartalmazza pixelben (60 pixel függőlegesen és 60 pixel vízszintesen), a második címke ugyanazon kép szélességét az oldal szélességének 6%-ára, a magasságát pedig az oldal magasságának 10%-a.

alt="Ez egy kép!" height="60" width="60" />

alt="Ez egy kép!" height="10%" width="6%" />

Jegyzet 2

Amikor a képeket saját ablakban jeleníti meg, a böngésző egyformán jó munkát végez mindkét értéktípus feldolgozásakor. Ne feledje azonban, hogy a weboldalakat látogatók számítógépük képernyőfelbontása eltérő lehet, mint az Öné. Ezért a kép átméretezésekor meg kell adnia mindkét képértéket (magasságot és szélességet). Ha ezen értékek közül csak az egyiket módosítja, a képernyőn megjelenő kép függőlegesen vagy vízszintesen megnyúlva jelenhet meg.

Használható a képek gyorsabb betöltésének illúziójának megteremtésére. Ehhez mindig meg kell adnia a magasság és szélesség attribútumok értékeit, függetlenül attól, hogy a képet átméretezték-e vagy sem. Mert fontos információkat közölnek a böngészővel arról, hogy mennyi hely szükséges egy kép elhelyezéséhez az oldalon. Válaszul a böngésző lefoglalja a képhez szükséges helyet, és tovább építi az oldal többi elemét anélkül, hogy leállítaná magának a képnek a betöltését. Ez azt eredményezi, hogy az oldal gyorsabban töltődik be, mivel a látogatóknak nem kell megvárniuk a kép teljes betöltődését, mielőtt más információkat látnának az oldalon.

Annak érdekében, hogy a kép bármely képernyőn, felbontásától függetlenül, pontosan egy bizonyos mennyiségű helyet foglaljon el az oldal szélességében, százalékos értékeket kell használni. Ha azt szeretné, hogy magának a képnek a felbontása állandó legyen (mérete pixelben), akkor pixelben kell megadni az értékeket.

Szöveg és grafika összehangolása

Ha egy képet a szövegsor jobb vagy bal széléhez szeretne igazítani, használja a címke igazítási attribútját. Például:

alt="Ez egy kép!" height="60" width="60" align="right" />

A kép szöveges karakterlánchoz viszonyított függőleges igazításához használhatja ezt az attribútumot is, amely a felső, alsó és középső értékeket veheti fel. A top érték azt határozza meg, hogy a kép felső szélét a környező szöveg felső széléhez kell igazítani. Az alsó érték azt határozza meg, hogy a kép alsó szélét a környező szöveg alsó széléhez kell igazítani. Az értékközpont megadja, hogy a kép közepét a szövegsor közepéhez kell igazítani.

Képek használata linkként

A képeket más dokumentumokra mutató hivatkozások létrehozására is használják. A HTML-ben a kép ugyanúgy hiperhivatkozássá válik, mint egy szövegdoboz. Ehhez egy címkét használnak, amely egy oldalelemet (esetünkben egy képet) zár be, aminek hivatkozássá kell válnia. A linket erre a képre kattintva követi.

Miniatűr képek

A fenti módszeren kívül, amelyben egy kép hiperhivatkozásként működik, használható hiperhivatkozásként is, amely egyik képről a másikra vált át. Erre olyan esetekben van szükség, amikor a weboldalon közzétenni kívánt kép mérete meglehetősen nagy, és a betöltése nagyon hosszú ideig tart, ami sok látogató számára elfogadhatatlan. Ezért létrehozzák ennek a képnek a kicsinyített másolatát (bélyegképét), és egy hiperhivatkozással ábrázolják. Ha az oldal látogatóját érdekli ez a kép, a miniatűrre kattintva megtekintheti a teljes képet. Íme egy kódpélda:

alt="Kattintson a normál kép megtekintéséhez."

height="60" width="60" />

A képek sikeres használatának titkai

A képek sok vizuális információt nyújtanak a látogatók számára, és ez vonzóvá teszi őket, ráadásul meglehetősen egyszerű hozzáfűzni egy weboldalhoz, de vannak bizonyos szabályok az oldal létrehozásánál, amelyeket be kell tartani, ha azt szeretnénk, hogy népszerűvé váljon az oldalon. az internet.

Az oldalak létrehozásakor igyekezzünk kisméretű képeket elhelyezni, mivel a nagy képek betöltése sokáig tart, és egyes felhasználók továbbra is alacsony sávszélességű kapcsolatokat használnak a hálózathoz való hozzáféréshez, ezért a letöltési fájlok mérete korlátozott számukra.

3. megjegyzés

A teljes HTML-dokumentum teljes fájlmérete is fontos, ami viszont nemcsak a benne lévő képek méretétől, hanem azok számától is függ. Az alt attribútum használatakor óvatosnak kell lennie, hogy a szöveges üzenet tartalma mindig megegyezzen magával a képpel. És ellenkező esetben: gondoskodni kell arról, hogy a kép megfeleljen az oldalon megjelenő szöveges információnak.

Ha az internetről kölcsönzött képeket használ a létrehozandó oldalon, ellenőriznie kell, hogy ezek a képek szerzői jogi védelem alatt állnak-e.

A weboldalak grafikájának köszönhető, hogy a WWW a legnépszerűbb internetes szolgáltatássá vált, és ennek köszönhetjük az oldalak sokféleségét.

A weboldalakon használt grafikák sajátossága, hogy megvannak a maga bizonyos korlátai, amelyeket figyelembe kell vennünk, és hasznot kell húznunk.

A webhelyeken két fő fájlformátumot használnak: GIF és JPG. A webes grafika új formátumát, a PNG-t (ejtsd: "ping") népszerűsítik, de még nem használják széles körben, és nem minden böngésző érti, ezért ezzel a formátummal egyelőre nem foglalkozunk.

Tehát kezdjük el elemezni a GIF és JPG formátumokat, írjuk le fő tulajdonságaikat és jellemzőiket.

GIF formátum

Legfeljebb 256 színt támogat (kevesebb lehetséges és gyakran szükséges);

Színpalettát használ;

Veszteségmentes tömörítést használ az LZW módszerrel (ami hasonló a PKZIP archiválóban használthoz, ezért a GIF-fájlok gyakorlatilag nincsenek tömörítve);

Támogatja a sorváltásos szkennelést;

Ez egy streaming formátum, pl. a kép megjelenítése a szivattyúzás közben elindul;

Lehetővé teszi az átlátszó attribútum hozzárendelését a paletta egyik színéhez, amelyet az úgynevezett átlátszó GIF-ek létrehozásakor használnak;

Lehetősége van több kép elmentésére egy fájlba, amelyet animált GIF-ek készítéséhez használnak;

Támogatja a vezérlőblokkok fájlba történő beillesztését, amelyek lehetővé teszik megjegyzések beszúrását a fájlba (például szerzői jogokról:), késleltetést a képek megjelenítése között stb.

És most egy kis pontosítás - mire vezethetnek ezek a tulajdonságok. A GIF maximum 256 színt támogat, ami azt jelenti, hogy minden GIF formátumban mentett kép explicit vagy implicit módon csökkenti a színek számát, hogy megfeleljen ennek a határnak (különböző programok változó sikerrel). És innen a következtetés - ha egy gyönyörű fényképet kell elhelyeznie sima átmenetekkel és finom színárnyalatokkal, akkor az átalakítás után minden sokkal rosszabb lesz - az árnyalatok többé nem lesznek finomak, és az egész fénykép természetellenes lesz, irreális megjelenés. Ezért, ha továbbra is el kell mentenie a fényképet GIF formátumban, és át kell adnia az összes árnyalatot, akkor trükkökhöz kell folyamodnia. Például alkalmazhat valamilyen művészi szűrőt egy fényképre, és rajzot készíthet belőle, vagy tonizálhat. De nincs probléma a képek és rajzok ebben a formátumban történő mentésével, általában jól tömörítettek és nem tartalmaznak sok színt. Most nézzük meg az internet második legnépszerűbb formátumának tulajdonságait és jellemzőit.

JPEG formátum

Lehetővé teszi 16,7 millió szín (vagy 24 bpp) színes képek mentését, és ha a kép kevesebb színt tartalmaz, akkor a fájl mentése előtt a rendszer még mindig színes képpé konvertálja; Veszteséges tömörítést használ, aminek köszönhetően a fájltömörítés vad szintjét éri el; Támogatja a progresszív letapogatást, pl. A kép eleinte rossz minőségben jelenik meg, majd a betöltési folyamat során fokozatosan javul. Talán ezek mind a JPG formátum előnyei, és fő célja a fényképes minőségű képek tárolása.

Grafikus optimalizálás

Minden grafikai feldolgozási munka köztes formátumban történik

Nézzük meg a grafikával való munka néhány jellemzőjét. Annak ellenére, hogy a képeket 256 színt támogató GIF fájlba vagy 16,7 millió színt támogató JPG fájlba mentjük, a képpel valamilyen köztes formátumban kell dolgoznunk, amely lehetővé teszi a kép torzítás és veszteség nélküli mentését. mélységi színek (például TIFF és a szerkesztők belső formátumai, mint például a PSD). A helyzet az, hogy a munka során sokszor meg kell változtatnia vagy torzítania kell a képet, ami végül a fájl ismételt átírásához vezet. A GIF formátumban történő ismételt rögzítés a kép árnyalatainak elvesztéséhez vezet, JPG formátumban pedig a fájl minden új felülírása új torzításokat vezet be, és egy idő után a fénykép szörnyűnek tűnik. Ezért a grafikus feldolgozással kapcsolatos minden munka köztes formátumban történik (bár nagy fájlméretekkel rendelkezik), és csak a legutolsó szakaszban konvertálják át a képet a kívánt formátumba (gyakran a fájlméret optimalizálásával egyidejűleg).

A weboldalak esetében nagyon fontos a fénykép méretének kérdése. Milyen méretben készítsem őket? Túl sokáig tart a betöltésük? Optimalizáláskor csökkenthetjük a fájlméretet, de aligha érdemes olyan fotót optimalizálni, aminek nincs értelme. Az optimalizálás legelső szakasza a legfontosabb dolog kiemelése a fényképen (minden más elvetése), és az illusztrált elemre való összpontosítás. Ezt a kivágás műveletével érik el, és megtalálják a legkifejezőbb részt, amely közvetíti a fénykép jelentését. Ezt a műveletet követően már lehet optimalizálni a képet, és ebben az esetben valójában a legkisebb méretű lesz.

A fényképek méretével kapcsolatban pedig egy bizonyos kompromisszumot be kell tartani – ne legyen túl kicsi, hogy még nagyító alatt sem látsz semmit, és ne legyen túl nagy, hogy ne az időt az örökkévalóságba nyújtani. Bár természetesen vannak kivételek: egy megfelelően optimalizált nagy fénykép átviteli ideje megegyezik egy normál fénykép átviteli idejével, és fordítva, egy rosszul optimalizált kis kép betöltése napok végéig tart. Normál fényképnek tekinthető az a fotó, amely körülbelül 250x300 pixel méretű, és körülbelül 6-10 kilobájtot foglal el. Ez nem jelenti azt, hogy minden fényképnek ekkora méretűnek kell lennie, de a fénykép területének ezzel egyenértékűnek kell lennie. Ezek az ajánlások a szöveget „illusztráló” fényképekre vonatkoznak, és nem vonatkoznak a navigációs elemként szolgáló rajzokra.

A weboldalak kitöltésének második legfontosabb összetevője a szöveg után kétségtelenül a grafikai tervezés lesz. Ezek különféle rajzok, fényképek és esetleg videoklipek. Hangot is használhatunk weboldalak megjelenítésére.
Kezdjük grafikus képek elhelyezésével. A böngészők csak háromféle grafikus fájl megjelenítésére képesek. Ezek GIF, JPEG és PNG fájlok. A GIF fájlok lehetővé teszik animált képek létrehozását. A JPEG fájlokat általában fényképek mentésére használják. A nemrégiben bevezetett PNG formátum lehetővé teszi a jó képminőség és a kis grafikus fájlméret kombinálását. De miután a képet grafikus fájlba csomagolták, valahogyan be kell ágyazni a weboldalba.

A címkét erre használják sok paraméterrel. Ennek a címkének nincs záró párja, mert nem hoz létre hatókört a megjelenítési szabály számára, csak egy grafikus képet ágyaz be a weboldal tartalmába. Valójában egy grafikus kép lehet hiperhivatkozás is, vagy akár több hiperhivatkozást is elrejthet mögötte, de a hiperhivatkozásokról a fejezet következő részében lesz szó, de egyelőre megértjük a címke használatának szabályait. .

A címke fő és kötelező attribútuma az src attribútum. Ennek az attribútumnak az értéke a beillesztett grafikus fájl címe, pontosabban az URL címe. Ha a grafikus fájl ugyanazon a webszerveren található, akkor elegendő felírni a fájl teljes nevét, beleértve az elérési utat az alkönyvtárakba, azaz ha az images könyvtár képekkel, akkor a grafikus kép beillesztési címkéje a következő űrlapot:

Ebben a példában egy pictl.gif nevű fájlban található GIF-képet használunk, amely viszont az images nevű könyvtárban található. Meg kell jegyezni, hogy a perjelek - perjelek - más irányba hajlanak, mint a DOS és Windows család operációs rendszereinek fájlútvonalaiban. A helyzet az, hogy kezdetben a webszerverek Unix operációs rendszeren alapultak, amely hasonló perjelekkel rendelkező fájlrendszert támogat. Most már teljesen mindegy, hogy a webhellyel rendelkező kiszolgáló milyen operációs rendszert támogat, minden elérési út azonos módon van megírva, és a szerverszoftver megfelelően feldolgozza.

A WWW fejlesztésének hajnalán a böngészők csak szöveges információkat jelenítettek meg, grafikát nem támogattak. Manapság gyakorlatilag nem fordulnak elő, de minden böngésző képes letiltani a grafika betöltését. Ezért mindig használja a kép alternatív szöveges megjelenítését. Egyszerűen el kell készítenie egy szöveget, amely akkor jelenik meg kép helyett, ha valamilyen okból nem tudja betölteni a böngésző. Ez a szöveg hozzáadódik a címkéhez az ait paramétert használva, melynek értéke a kívánt szöveges karakterlánc, azaz megközelítőleg a következő konstrukciót kapjuk:

Abban az esetben, ha a grafikus képet továbbra is megjeleníti a böngésző, az alternatív szöveges megjelenítés szövege „tipp”-ként, rövid szöveges utalásként jelenik meg, amikor a felhasználó az egérmutatót a kívánt grafikus kép fölé viszi.

Van azonban egy részletesebb lehetőség az ilyen szöveges promptok létrehozására. A longdesс paraméter segítségével meg kell adni az internetes erőforrás címét, amely tartalmazza ennek a grafikus képnek a teljes leírását. Ennek a paraméternek az értéke természetesen az erőforrás URL-je a kép leírásával.

A név paraméter lehetővé teszi egy egyedi képnév megadását, amely azonosítja ezt a weboldal tervezési elemet. Ez a beállítás megmarad a visszamenőleges kompatibilitás érdekében; megmarad a HTML szabvány korábbi verzióiból. Jelenleg minden címke az id paramétert használja erre a célra.

Alapértelmezés szerint a grafikus kép pontosan úgy jelenik meg, ahogyan létrehozta, megtartva függőleges és vízszintes méretét. Lehetőségünk van azonban a kép méreteit saját belátásunk szerint kifejezetten beállítani. Ehhez a magasság és szélesség paraméterek szolgálnak. Már tudjuk, hogyan állítsuk be a méreteket pixelben vagy százalékban. Csak annyit kell megjegyezni, hogy a böngészők törekednek a kép arányainak megtartására, így az arányokat megváltoztató méretek kifejezetten beállítását a böngésző figyelmen kívül hagyhatja, és olyan méreteket választ, amelyek a lehető legközelebb állnak a képarányokhoz. használja az arányok megsértése nélkül. Ezért a weblapok részeként való megjelenítéskor használt méretű grafikus képeket általában a weboldalakhoz készítik elő. És ha egy képet többször is meg kell jeleníteni különböző méretben, akkor könnyebb több grafikus fájlt előkészíteni, mint a rajzokat átadni a böngészőnek illetéktelen megjelenítésre, ami megzavarhatja a weboldalak teljes elrendezését.

A paraméterek segítségével megadhatjuk azt a szabad területet, amely elválasztja a grafikus képet az azt körülvevő weboldal többi dizájnelemétől, vagyis beállítja a kép behúzását. Ehhez a hspace és a vspace paramétereket használjuk. A hspace paraméter a vízszintes térközt pixelben, a vspace paraméter pedig a függőleges térközt állítja be. Kérjük, vegye figyelembe, hogy ezekhez a paraméterekhez csak a távolságot pixelben jelző numerikus értékek használhatók. Ezekhez a paraméterekhez nincs előírva null érték, de általában minden böngésző egy kis, nullától eltérő értéket használ.

A border paraméter segítségével pedig beállíthatjuk a képet körülvevő szegély vastagságát. Szokás szerint a paraméter értéke egy szám, amely a vastagságot pixelben jelzi. Az alapértelmezett érték nulla, így a szegély láthatatlan.

Meg kell említeni a grafikus objektumnak a körülötte körbefutó szöveghez viszonyított igazítását is. Ehhez az igazítás paramétert használjuk. Egy kulcsszó egy előre meghatározott halmazból használható értékként. Az alsó, középső és felső értékek a szöveg első sorának elhelyezésére szolgálnak, amely függőlegesen folyik a kép körül. A felső érték felfelé, az alsó érték lefelé, a közép pedig lehetővé teszi a vonal függőleges középre állítását. A bal és jobb értékek a grafikus kép vízszintes igazítására szolgálnak. Az első érték, balra, ahogy sejthető, eltolja a képet a blokk bal szélére, amelyben megjelenik, és jobbra - jobbra.

Itt az ideje, hogy példákkal lássuk, hogyan helyezhetünk el egy rajzot, és kombinálhatjuk olyan szöveggel, amelynek körbe kell áramolnia a kívánt grafikus képet.

Felsorolás 1.11

"http://www.w3.org/TR/htm!4/strict.dtd">




<р>
Ez az a szöveg, amely körülveszi a képet.
Ez az a szöveg, amely körülveszi a képet.

Ennek a HTML-dokumentumnak a megjelenése böngészővel való megjelenítéskor az ábrán látható. 1.11.

Rizs. 1.11. Böngésző ablak, amely az 1.11-es listában látható fájl megjelenítésének eredményét mutatja

Ebben a példában tiszta képbeillesztési címkét használtunk további paraméterek nélkül. Amint látjuk, a kép közvetlenül az első mondat után kerül be, ahol a címkét helyeztük el . Ugyanakkor, ha vízszintesen csökkentjük a böngésző megtekintő ablakának méretét úgy, hogy az első mondat és a rajz ne férjen el egy sorba, akkor először a mondat jelenne meg, majd az alatta lévő rajz, rányomva a a nézőablak bal széle. Ettől jobbra az utána következő szöveg kezdene megjelenni úgy, hogy a vonal alapvonala egybeessen a rajz alsó szélével.

Most adjunk hozzá egy vízszintes igazítási paramétert a képmegjelenítési címkéhez. Az eredményül kapott kód az 1.12-es listában látható.

Felsorolás 1.12

"http://www.w3.org/TR/html4/strict.dtd">


<р>Ez az a szöveg, amely körülveszi a képet. align="ieft">
Ez az a szöveg, amely körülveszi a képet. Ez az a szöveg, amely körülveszi a képet.
Ez az a szöveg, amely körülveszi a képet.

Amint látható, ebben az esetben is először a szöveg jelenik meg, majd az igazítási paraméterrel megadott direktíva szerint a bal szélre nyomott grafika, a szöveg többi része pedig a a képtől jobbra (1.12. ábra), vagyis a kép nem foglalhatja el az első sort, mivel a szöveg előtte kezdődik. Ugyanez történik, ha az igazítás paramétert jobb értékkel használjuk, de a kép csak a nézetablak jobb széléhez lesz nyomva, és a szöveg körbefolyik a bal oldalon. Ennyi a változás.

Most nézzük meg, hogyan működik a függőleges igazítás. Bár az igazítási beállítás be van illesztve a képcímkébe, a legnagyobb változások a képet körülvevő szövegben láthatók. Nézzük meg egy példa segítségével a függőleges igazítási paraméter hatását.

Rizs. 1.12. Böngésző ablak, amely az 1.12-es listában látható fájl eredményét mutatja

Felsorolás 1.13

"http://www.w3.org/TR/html4/striqt.dtd">




<р>Ez az a szöveg, amely körülveszi a képet. align="middle">
Ez az a szöveg, amely körülveszi a képet. Ez a szöveg
ami körbefolyik a rajzon.
Ez az a szöveg, amely körülveszi a képet.

A HTML-dokumentum megjelenítésének eredménye az ábrán látható. 1.13.

Rizs. 1.13. Böngésző ablak, amely az 1.13-as listában látható fájl eredményét mutatja

Ebben a példában a függőleges igazítást középre állítjuk, ami azt jelenti, hogy a képbeszúrási címke utáni első szövegsor függőlegesen középen jelenik meg a kép jobb oldalán lévő fehér területen. A szöveg többi része a kép alatt látható. Ha az igazítás paramétert a tetejére állítanánk, akkor az első sor a kép felső szegélye mellett jelenne meg. Az alsó érték használatakor pedig az első szövegsor jelenik meg a kép alsó szegélye mellett. Ne feledje, hogy a böngésző csak egy igazítási paramétert ismer fel, vagyis függőleges vagy vízszintes igazítást is megadhatunk. Ha a beépített eszközök a kép pozicionálásához és igazításához nem elegendőek, akkor a táblázatok segítségével áttérhet az elrendezési folyamatra. A táblázatok használatát ennek a fejezetnek az egyik következő szakaszában tekintjük át.

Lehetőségünk van a videók felhasználására weblapok tervezésében. Használatuk során nagyon óvatosnak kell lennie, mivel az ezeket a videoforrásokat tartalmazó fájlok általában meglehetősen nagyok. És ahhoz, hogy egy távoli felhasználó meg tudja nézni őket a böngészőjében, teljesen le kell töltenie ezt a fájlt a gépére. A legtöbb internetfelhasználó számára elérhető csatornák használatával egy ilyen eljárás meglehetősen hosszú ideig tarthat. De egyikünk sem szereti megvárni, amíg egy weboldal betöltődik.

A böngészők általában képesek AVI, Real Video és Windows Media videofájlok lejátszására. És ezek implementálása a weboldalra ugyanazzal a címkével történik . A dunscr paraméter azonban a videofájl helyének meghatározására szolgál. Alapértelmezés szerint a weblapba beágyazott videoklipet egyszer, közvetlenül az oldal teljes betöltése után játssza le. De van néhány lehetőségünk arra, hogy szabályozzuk a klip lejátszásának folyamatát, vagy lehetőséget adjunk a felhasználónak a lejátszás vezérlésére.

Ha benne van a címkében Ha engedélyezzük a start paramétert, akkor kifejezetten megadhatunk egy eseményt, amely után a böngészőnek le kell játszania a letöltött videoklipet. Az egérmutató és a fájl megnyitása kulcsszavak használhatók ehhez a paraméterhez. Az első azt határozza meg, hogy a klipet azután kell lejátszani, hogy a felhasználó az egérkurzort a videó beillesztésre szánt helyre helyezi, a második pedig azt, hogy a lejátszás közvetlenül a HTML-fájl teljes betöltése után kezdődik. Ezt a két lehetőséget azonban kombinálhatjuk. Ebben az esetben a videó beágyazási címke így fog kinézni:

Az erre a célra szolgáló loop paraméterrel megadhatjuk, hogy hányszor játsszuk le a videót. Ennek a paraméternek az értéke egy szám, amely megadja, hogy a videoklip hányszor ismétlődik. Ha azonban azt szeretnénk, hogy a videó folyamatosan, fix ismétlésszám nélkül játsszon le, akkor a végtelen értéket használjuk. A loopdelay paraméter segítségével pedig beállíthatunk egy késleltetést a videoklip ismétlődései között. Ennek a paraméternek az értéke egy szám, amely az időtartamot jelzi ezredmásodpercben. Nézzük meg ezeknek a paramétereknek a használatát a következő kódrészlettel példaként:

Itt kifejezetten megadjuk, hogy a videoklip kétszer kerül lejátszásra közvetlenül a weboldal betöltése után, öt másodperces késleltetéssel a lejátszások között.

Ebben az esetben mi magunk irányítjuk a videofájl megjelenítését. De ezt az előjogot átruházhatjuk egy távoli felhasználóra, aki betölti a weboldalt. Ehhez be kell írnia a címkét érték nélkül vezérli a paramétert. A paraméter jelenléte a címkében egyértelműen azt jelzi, hogy a lejátszásvezérlők a videoklippel együtt megjelennek a weboldalon.

Az általunk figyelembe vett paraméterek elégségesek ahhoz, hogy a videofájlokat megfelelően integráljuk egy weboldal tartalmába. Nézzünk egy részletes példát (1.14. ábra).

Felsorolás 1.14

"http://www.w3.org/TR/html4/strict.dtd">
.

<р>Egyszerű szöveg.

Rizs. 1.14. Böngésző ablak, amely az 1.14-es listában látható fájl eredményét mutatja

Természetesen, mivel a videó töredék weblap törzsébe történő beillesztésének eljárása a grafika beszúrásának speciális esete, a címkére vonatkozó összes többi paraméter a videórészlet beillesztési címkéjére vonatkozik. , mint például az igazítási paraméterek, az explicit méretjelzés és mások.

A multimédiás képességek közé tartozik a weblapok hangosítása is. A hangot azonban csak háttérformátumként használhatjuk, vagyis egy bizonyos hangfájlt a távoli felhasználó számítógépén játszik le, miután betölti a weboldalt. Ha természetesen a számítógépén hangkártya van telepítve, azaz kezdetben egy HTML-fájlt töltenek le a távoli felhasználó számítógépére egy weblappal, majd az összes többi, a weboldal kialakításához használt fájlt, például grafikus fájlokat, videók, letöltések – és hangklipek.

Tehát ahhoz, hogy egy weboldal megtekintését hanglejátszás kísérje, be kell illesztenie a címkét az oldal kódjába . A címke nem a weblap törzsében, hanem a címében, azaz a címkék között kerül elhelyezésre És. Ennek a címkének van egy kötelező src paramétere, amelynek értéke a mellékelt hangfájl URL-je. Megjegyzendő, hogy a böngészők garantáltan felismerik és lejátszják a MIDI és WAV hangfájlokat. Más formátumok, például MP3 és Real Audio lejátszása csak akkor lehetséges, ha további modulok csatlakoznak a böngészőhöz.

A videoklipekhez hasonlóan a hurok paraméterrel beállíthatjuk, hogy egy hangfájlt hányszor játsszon le. Ennek a paraméternek az értéke az ismétlések száma. Ha folyamatosan le kell játszania egy hangrészletet, akkor használja a "-1" értéket, azaz ha azt szeretnénk, hogy egy adott hangfájl folyamatosan lejátsszon egy weboldal betöltésekor, akkor a következő konstrukciót használjuk:

Ezzel befejezzük a multimédiás és grafikus objektumok weblapok tervezésében való felhasználásának mérlegelését, és továbblépünk az első fejezet következő részére.

A WWW egyik legvonzóbb tulajdonsága, hogy képes olyan grafikákra és multimédiás fájlokra mutató hivatkozásokat beilleszteni, amelyek vonzóbbá és érdekesebbé teszik a weboldalt. Ez magában foglalhat ikonokat, rajzokat, fényképeket, képtérképeket, valamint audio-, video- és animációs adatok használatát.

2.2.1. Grafika beillesztése html dokumentumba

A grafikai képek jelentőségét az elektronikus dokumentumok készítése szempontjából nem lehet túlbecsülni, a dokumentumok kifejezőbbek, élénkebbek, könnyebben és természetesebben érzékelhetők. Azonban mindig emlékezni kell az arányérzékre mindenben. A dokumentum szemléltető anyagokkal való túltelítettsége indokolatlanul elvonja a felhasználók figyelmét az oldal valódi tartalmáról, és a nagyszámú kép miatt az oldal lassabb betöltődését is eredményezi.

A weboldal grafikai összetevői céljuk szerint három nagy kategóriába sorolhatók:

– szemléltető grafika, beleértve a kísérő szöveges fényképeket, magyarázó rajzokat , rajzok, diagramok;

– funkcionális grafika, amely vezérlőket (navigációs gombokat, számlálókat és interaktív űrlapelemeket) jelent;

– dekoratív grafika - oldaldizájn elemek, amelyeket a szépség kedvéért tartalmaznak, és nem hordoznak információterhelést (háttérképek, grafikus fájlok formájában készült elválasztók, fejlécek és még sok más).

Grafikus formátumok. Az internet használatának köszönhetően a grafikák letöltése eltart egy bizonyos ideig. És minél rövidebb ez az idő, annál kényelmesebb a felhasználó számára. Ezért a grafikus képekhez jelenleg használt három legnépszerűbb formátum a GIF, a JPEG és a PNG. Különféle veszteséges képtömörítési algoritmusokat tartalmaznak, amelyek jelentősen csökkenthetik a célfájl méretét.

GIF-formátum. 1978-ban Jacob Ziv és Abraham Lempel izraeli kutatók új adattömörítési algoritmust fejlesztettek ki erre az időre adatvesztés nélkül (LZ78 a projekt neve). Néhány évvel később Terry Welch amerikai programozó továbbfejlesztette (LZW), és mindenki számára bemutatta fejlesztését.

1987-ben Bob Berry megalkotta az LZW algoritmuson alapuló, alapvetően új grafikus formátumot, a GIF-et. A tömörítési algoritmus lényege: a grafikus fájl méretének csökkentése hasonló árnyalatok keverésével érhető el, a GIF fájlban a képről soronként rögzítik az információkat, vagyis egy pixel magas sorok leírásának tömbje. Tulajdonságok: hasonló árnyalatok keverése egybe, fix 256 színpalettával operálva.

A GIF formátumot a HTML-dokumentumokban csak üzleti grafikák megjelenítésére használják: diagramok, logók, gombok, egyéb oldaltervezési elemek - és 256-os színpalettával rendelkező képek.

A GIF másik tulajdonsága az átlapolás, vagyis a kép nem teljesen, hanem részenként töltődik be (az 1., 5., 10. sor beolvasásra kerül, majd a 2., 6., 11. stb. ), vagyis megnyilvánulni látszik.

1989-ben a CompuServe kiadta a GIF89a új verzióját, amely az úgynevezett „alfa csatornát” használja - amely a kép átlátszóságának maszkja -, hogy átlátszó hátterű képet készítsen a fájllal együtt mentve. Az átlátszóként telített színek láthatatlanná válnak a böngészőben.

A GIF89a másik jellemzője, hogy ez a formátum lehetővé teszi több különböző kép tárolását egy képletben egy fizikai címmel, egymás után megjelenítve azokat a képernyőn.

JPEG-formátum. A JPEG szabványt fényképek, festmények reprodukciói és nagyszámú színt és színátmenetet tartalmazó képek közzétételére használják. JPEG formátum, amely egyirányú képtömörítési algoritmus alapján készült minőségromlás mellett, nem azonos elemeket kódol, mint az LZW algoritmusok, hanem pixelközi intervallumokat.

A tömörítési mechanizmus három szakaszból áll.

A kép LAB színes képpé alakul, amely három független csatornára bontja a képet: L – a színintenzitás megőrzése, A és B – a színinformációk tárolására.

Tömörítés: A színinformációk hozzávetőleg háromnegyede eltávolításra kerül a kapott színmodellből, majd a képet 8x8 pixeles részekre osztja, és numerikus adattömbbé alakítja. Az egyes blokkok címe a terület domináns színét írja le, a többi információ kevésbé észrevehető árnyalatokat ír le.

A tömörítés harmadik szakaszában a másodlagos árnyalatokat leíró információk egy része kikerül az adattömbből, és az eltávolított adatok mennyisége a felhasználó által kiválasztott kép minőségétől függ. Végül pedig a kész fájlt a Hoffman-algoritmus szerint tömörítik, ami magában foglalja az adattömb leggyakrabban előforduló karaktereinek lecserélését egy kompaktabb kétbites kódolással.

A JPEG kitömörítés fordított sorrendben történik.

Egy JPEG-kép maximálisan 16 millió színt tartalmazhat.

PNG-formátum. Ezt a formátumot 1995-ben fejlesztették ki, hogy felváltsa a GIF formátumot, miután a Unisys szerzői jog alá helyezte LZW tömörítési algoritmusát. Ezzel egyidejűleg néhány műszaki jellemzőt fejlesztettek ki, különösen a minőség javítását és a támogatott színek számának növelését.

Grafika engedélyezéseweb-oldal. A grafikák HTML dokumentumba integrálása egyetlen címke használatával történik < IMG >.

Az SRC (source) attribútum adja meg a kép URL-jét (2.3. ábra).

Rizs. 2.3. Példa megjelenítési példa címkével < IMG >

Ez az attribútum kötelező a címkében < IMG > (2.2. táblázat).

2.2. táblázat

Címke attribútumok< IMG>

A táblázat vége. 2.2

HEIGHT="215" BORDER="5" ALT="liliom">!}

Ebben a példában egy címke használatával elhelyezhet egy képet egy fájlból a böngészőablak jobb oldalán, beállíthatja a kép méretét, és egy keretbe helyezheti (lásd: 2.3. ábra).