Väčšina webových stránok obsahuje grafiku. Umožňuje vám prezentovať informácie farebným a vizuálnym spôsobom. V mnohých prípadoch je lepšie ukázať obrázok ako dávať dlhý textový popis.

Existujú dva spôsoby umiestnenia grafiky na stránku:

• vložiť jednotlivé obrázky;
• vyplnenie pozadia obrázkom.

V každom prípade je grafický obrázok prevzatý zo súboru.

Vkladanie grafiky

Vloženie grafického obrázka zo súboru grafického formátu na stránku sa vykonáva pomocou značky (z angličtiny, image - image) s uvedením adresy súboru ako argumentu atribútu SRC:

< IMG SRC = "адрес_графического_файла" >

Adresa grafického súboru je buď URL alebo názov súboru, voliteľne s cestou. Ak chcete napríklad zobraziť grafický súbor logotip.jpg, napíšte značku:

< IMG SRC = "logotip.jpg" >

Na zvýšenie bitovej rýchlosti grafického obrázka v značke môžete použiť atribút (doplnkový parameter) LOWSRC, ktorý berie ako argument adresu grafického súboru. Môžete vytvoriť dva súbory obrázkov: jeden (napríklad, povedzme, že je to logotip.jpg) obsahuje obrázok získaný z s vysokým rozlíšením a druhý (napríklad logotip.gif) je obrázok s nízkym rozlíšením. Potom značka:

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

...dá pokyn prehliadaču, aby si najprv stiahol súbor logotip.gif a potom ho po prijatí nahradil súborom logotip.jpg.

Ďalším spôsobom, ako urýchliť načítanie grafiky, je nastavenie rozmerov obdĺžnikovej plochy, do ktorej bude grafický obrázok umiestnený pomocou atribútov WIDTH(šírka) a VÝŠKA(výška), meraná v pixeloch. Ak zadáte tieto atribúty, prehliadač najskôr pridelí priestor pre grafiku, pripraví rozloženie dokumentu, zobrazí text a až potom načíta grafiku. Všimnite si, že prehliadač skomprimuje alebo roztiahne obrázok tak, aby sa zmestil do rámca zadanej veľkosti. Príklad zadania rozmerov obrázka:

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

Grafika sa zvyčajne používa v spojení s textom, takže vzniká úloha zarovnať text a grafický obrázok. Tento problém je vyriešený pomocou atribútu ZAROVNAŤ tag pomocou rôznych argumentov. Môžeme napríklad chcieť, aby sa text zalomil okolo obrázka doprava alebo doľava. Zvyčajne je obrázok vložený blízko textu, čo môže byť škaredé. Aby ste tomu zabránili, môžete okolo obrázka nastaviť prázdne okraje. Polia sa vytvárajú pomocou atribútov VSPACE pre horný a dolný okraj a HSPACE pre bočné okraje v značke . Argumenty týchto atribútov sú špecifikované ako čísla, ktoré určujú veľkosť okrajov v pixeloch. Ak chcete zrušiť obtekanie textu okolo grafiky, použite značku
.

Nasledujúca značka nastavuje zalomenie grafiky zo súboru logotip.jpg doprava (obrázok bude umiestnený naľavo od textu):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

Ak chcete umiestniť obrázok napravo od textu, potom potrebujete atribút ZAROVNAŤ priradiť argument SPRÁVNY:

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

Ak chcete nastaviť okraje okolo obrázka, musíte napísať značku formulára:

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

Tu čísla 20 a 10 určujú veľkosť okrajov.

Zvážte príklad zdieľania grafiky a textov. Otvorte Poznámkový blok ( textový editor Poznámkový blok) Windows. Napíšte do neho HTML kód pomocou vyššie uvedených značiek. Nasleduje program, ktorý zobrazuje text a grafiku. Ako grafický súbor môžete použiť ktorýkoľvek zo súborov, ktoré máte. Používa sa tu súbor logotip.gif.

< HTML >

< HEAD >

< TITLE >Cvičenie 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 >Text sa obtáča okolo grafiky vpravo< / H1 >

Ryža. 657. Text sa zalomí okolo obrázka vpravo

Široké možnosti presného umiestnenia obrázkov (ale aj iných prvkov) na stránke poskytujú tabuľky A štýlov. Títo HTML prvky budú zvážené neskôr. Môžete napríklad definovať tabuľku bez viditeľných rámov a umiestniť obrázky, texty a ďalšie prvky do buniek tejto tabuľky.

Tento tutoriál sa zaoberá tým, ako ozdobiť webovú stránku pridaním grafiky. Zoznámime sa s najbežnejšími formátmi obrázkov, zistíme, aký tag sa používa na pridávanie obrázkov na stránku, poradíme si s alternatívnymi popiskami a zarovnávaním textu a grafiky. Zoznámime sa tiež s hlavnými atribútmi obrázkov a naučíme sa, ako upraviť šírku a výšku obrázka. Ďalej niekoľko slov o používaní obrázkov ako odkazov a o tom, čo sú miniatúry obrázkov. Na záver uvádzame niekoľko všeobecných tipov na používanie grafiky na webovej stránke.

Pridávanie obrázkov na webovú stránku
Ak webová stránka neobsahuje nič iné ako textové informácie, môže sa niekomu zdať zaujímavá vzhľadom na informácie, ktoré sú na nej uvedené, ale je nepravdepodobné, že by ju niekto nazval atraktívnou. Pridávanie obrázkov na webovú stránku je veľmi jednoduché. Pridanie grafiky, ktorá môže dať stránke profesionálny vzhľad, si vyžaduje určité znalosti. Čo je v skutočnosti predmetom dnešnej lekcie.

Dva najpoužívanejšie obrazové formáty na internete sú GIF a JPEG. Vyvinutý a pomenovaný skupinou JPEG (Joint Photographic Experts Group) sa vo všeobecnosti používa na ukladanie obrázkov s plynulými prechodmi farieb, ako sú fotografie.

Takmer všetky ostatné grafické prvky sú uložené vo formáte GIF (Graphics Interchange Format), teda vo formáte na výmenu grafických údajov. Teraz je tu ďalší nový grafický formát, ktorý si získava na popularite: PNG (Portable Network Graphics). Očakáva sa, že časom nahradí formát GIF. Neponáhľajte sa však s opätovným ukladaním všetkých grafických súborov v tomto formáte, hoci ho stále nepodporujú všetky prehliadače.

Všetky obrázky sa pridávajú na webovú stránku pomocou rovnakej značky, ktorá sa nazýva značka zdroja obrázka . Pravdepodobne už viete určiť, čo tento záznam pozostáva zo skutočného štítku , jeho atribút (scr) a hodnotu tohto atribútu (location). Keďže sa však vyžaduje použitie atribútu scr, je vhodnejšie odkazovať na tento záznam ako na jednu generickú značku. Pravdepodobne ste si tiež všimli, že pre značku zdroja obrázka neexistuje žiadna zodpovedajúca koncová značka. Toto je samostatná samostatná značka, takže nezabudnite na jej koniec pridať koncovú lomku: .

#1058;D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1/transitional.dtd"> Prvé obrázky e> Táto grafika bola pridaná na moju prvú webovú stránku. p >

Pridávanie alternatívnych štítkov
Pri surfovaní po internete ste si už určite neraz všimli rôzne nápisy, ktoré sa zobrazujú pri prejdení kurzorom myši nad nejaký grafický prvok webovej stránky. Tieto nápisy zvyčajne komunikujú niektoré Ďalšie informácie o samotnom obrázku alebo o oblasti stránky, ktorú zaberá.

Nasledujúci príklad kódu HTML ukazuje, ako sa atribút alt pridáva do značky . Podobne ako atribút src, aj atribút alt informuje webový prehliadač o niektorých dodatočných informáciách o obrázku a môže sa tiež vždy použiť v spojení so značkou. .

Atribút alt definuje alternatívny text pre grafiku pridanú na webovú stránku. Tento text sa nazýva alternatívny text, pretože ho možno zobraziť na obrazovke ako alternatívu k samotnému obrázku. Atribút alt má ešte jeden veľmi dôležitý účel. Mnoho internetových návštevníkov, ktorí používajú kanály s nízkou rýchlosťou prenosu dát, môže dať pokyn svojim prehliadačom, aby nesťahovali ani nezobrazovali grafické informácie. To im umožňuje urýchliť načítanie webových stránok na ich počítačoch.

Pamätajte tiež, že nie všetky prehliadače dokážu vo svojich oknách zobraziť grafiku. Napríklad prehliadač Lynx túto funkciu vôbec nepodporuje. Atribút alt teda umožňuje webdizajnérovi mať istotu, že ak návštevník jeho webovej stránky neuvidí na svojej obrazovke obrázok, bude si môcť aspoň prečítať textovú informáciu pridanú k tomuto obrázku.

Aj keď atribút alt môže byť definovaný pre každú značku , dávajte pozor, aby ste k niektorým grafickým prvkom nepriradili nevhodné textové správy. Napríklad nemá zmysel pridávať alternatívne textové označenia k rôznym prvkom externého dizajnu webovej stránky. Aby ste predišli takýmto chybám, môžete nastaviť atribút alt takýchto prvkov na prázdnu hodnotu (alt=” ”). Ak nenastavíte žiadne ďalšie hodnoty atribútov, prehliadač vykreslí obrázok v pôvodnej veľkosti, pričom zarovná horný okraj obrázka s horným okrajom susedného textového reťazca. Obe tieto nastavenia môžete zmeniť pomocou značiek šablóny štýlov.

Atribúty obrázka
Pre Tag K dispozícii sú atribúty, ktoré vám umožňujú zmeniť veľkosť obrázka. Niektoré z týchto atribútov sú uvedené nižšie.
výška- Určené v pixeloch alebo percentách - Určuje výšku obrázka
šírka— Určené v pixeloch alebo percentách — Určuje šírku obrázka.

Úprava výšky a šírky obrazu
Rozmery obrázka umiestneného na webovej stránke je možné určiť pomocou atribútov výška a šírka. 3 hodnoty týchto atribútov sú špecifikované buď ako pevný počet pixelov, alebo ako percento rozmerov stránky. Pozrite si HTML kód nižšie. V prvej značke sú rozmery pôvodného obrázka, ktoré ste už videli v predchádzajúcich obrázkoch tejto lekcie, nastavené na 60 pixelov vertikálne a 60 pixelov horizontálne. V druhej značke je šírka rovnakého obrázka nastavená na 6 % šírky stránky a výška na 10 % výšky stránky. Obrázok ukazuje, ako oba tieto obrázky vyzerajú v okne prehliadača.

Pri zobrazovaní obrázka vo svojom okne prehliadač zvláda rovnako dobre pixelové aj percentuálne hodnoty. Nezabúdajte však, že počítače návštevníkov vašej webovej stránky môžu byť nastavené na iné rozlíšenie obrazovky, než aké máte nastavené pre váš monitor. Čo z toho vyplýva? Napríklad rozlíšenie monitora je nastavené na 800 x 600. V predchádzajúcom príklade bola grafika pridaná na webovú stránku nastavená na šírku 6 % šírky stránky, čo by pri tomto rozlíšení bolo 48 pixelov. Ak si rovnaký obrázok prezeráte na monitore s rozlíšením 1024x800, zadaných 6% šírky stránky už bude zodpovedať šírke 61 pixelov.

Pri zmene veľkosti obrázka nezabudnite nastaviť obe hodnoty tak, aby zodpovedali jeho výške a šírke. Ak zmeníte iba jednu z týchto hodnôt, samotný obraz sa na obrazovke roztiahne vertikálne alebo horizontálne. Alternatívna možnosť spočíva v úprave veľkosti obrázka pomocou grafického editora.

Môžete vytvoriť ilúziu viac rýchle načítanie Snímky. Bez ohľadu na to, či sa veľkosť obrázka zmení alebo nie, vždy zadajte hodnoty atribútov výška a šírka, pretože prehliadaču povedia dôležité informácie o tom, koľko miesta by malo byť na stránke vyhradené pre daný obrázok. V takom prípade bude prehliadač schopný označiť priestor potrebný pre obrázok a pokračovať v budovaní ďalších prvkov stránky bez toho, aby prestal načítavať samotný obrázok. Týmto spôsobom sa zdá, že sa stránka načítava rýchlejšie, pretože jej návštevníci nemusia čakať na úplné načítanie obrázka, aby konečne videli ďalšie informácie uvedené na stránke.

Ak naozaj chcete, aby obrázok zaberal určitý priestor po celej šírke stránky, použite percentuálne hodnoty. V tomto prípade na obrazovke akéhokoľvek monitora bude obraz zaberať rovnakú časť stránky ako na vašej obrazovke. Ak chcete zachovať rozlíšenie samotného obrázka (jeho veľkosť v pixeloch) konštantné, použite hodnoty vyjadrené v pixeloch.

Zarovnanie textu a grafiky
Atribút align značky umožňuje zarovnať obrázok k pravému (pravá hodnota) alebo ľavému (ľavá hodnota) okraju textového reťazca. Príklady použitia tohto atribútu sú znázornené na obrázku.

Rovnaký atribút možno použiť aj na vertikálne zarovnanie obrázka (opäť vzhľadom na riadok textu). Môže nadobudnúť tri ďalšie hodnoty: hore, dole a v strede. Ak zarovnať atribút nastavená hore, horná časť obrázka je zarovnaná s hornou časťou akéhokoľvek okolitého textu. Ak je atribút zarovnania nastavený na spodok, spodný okraj obrázka sa zarovná so spodným okrajom okolitého textu. Ak je atribút zarovnania nastavený na stred, stred obrázka sa zarovná na stred textového reťazca.

Používanie obrázkov ako odkazov
Obrázky sú dobré nielen na dizajn webovej stránky. Môžu byť úspešne použité ako hypertextové odkazy na iné dokumenty. V HTML je táto úloha jednoduchá, pretože obrázky sa konvertujú na hypertextové odkazy presne rovnakým spôsobom ako štítky. Ak to chcete urobiť, musíte tiež použiť značku a ohraničiť v nej prvok webovej stránky, ktorý by sa mal stať odkazom na iný dokument. Ak sa teda po kliknutí na nejaký obrázok má nasledovať hypertextový odkaz, tag musí byť vložený do tagu tohto obrázku.

a>

IN tento prípad, keď návštevník webovej stránky umiestni kurzor myši na tento obrázok, vedľa kurzora sa zobrazí textová správa „Toto je môj autoportrét!“. Kliknutím na obrázok sa otvorí dokument DOC2.htm, na ktorý odkazuje hypertextový odkaz.

Miniatúry obrázkov
Ďalším bežným spôsobom využitia možnosti hypertextového prepojenia HTML je použitie jedného obrázka na prechod na iný. Načo to je? Faktom je, že často je veľkosť obrázkov, ktoré chcete zverejniť na webovej stránke, príliš veľká a nie je zaručené, že návštevníci budú mať trpezlivosť čakať, kým dokončia sťahovanie. V takýchto prípadoch sa vytvorí menšia kópia pôvodného obrázka, nazývaná miniatúra, ktorú prehliadač dokáže načítať oveľa rýchlejšie. Ak návštevníka obrázok zaujme a chce si stiahnuť jeho celú kópiu, stačí mu kliknúť na túto miniatúru. Takto vyzerajú zodpovedajúce HTML kódy.

a>

Ako vidíte, kliknutím na obrázok miniatúra.jpg sa otvorí ďalší súbor obrázka (obrázok.jpg). Textový reťazec uvedený ako hodnota atribútu alt informuje návštevníka o tom, ako otvoriť hlavný obrázok.

Tajomstvo úspešného používania obrázkov
Obrázky sú zaujímavé a atraktívne, obsahujú množstvo vizuálnych informácií a je veľmi jednoduché ich pridávať na webové stránky, ale stále existujú určité pravidlá, ktoré je potrebné dodržiavať, ak chcete skutočne vytvoriť stránku, ktorá sa stane populárnou medzi používateľmi internetu .

Ako viac veľkostí obrázkový súbor, tým dlhšie bude trvať jeho stiahnutie do počítača používateľa. Pretože väčšina používateľov internetu stále používa nízkonapäťové komunikačné kanály na prístup k sieti priepustnosť, veľkosť nahrávaných súborov má pre nich stále zásadný význam. Určite s tým počítajte a snažte sa umiestniť obrázky na svoje webové stránky čo najmenšie.

Dôležité sú nielen veľkosti súboru jednotlivých obrázkov, ale aj celková veľkosť súboru celého HTML dokumentu. Čím viac obrázkov sa pridá na webovú stránku, aj keď sú malé, tým väčšia bude veľkosť súboru konečného dokumentu. Dokončiť Náhľad vaša stránka v rôzne prehliadače a odhadnite, ako dlho každému prehliadaču trvá jeho stiahnutie.

Keďže atribút alt je taký dôležitý (pretože sa odporúča definovať ho pre každú značku , pri používaní buďte opatrní. Uistite sa, že obsah textová správa vždy sa zhodujú so samotným obrázkom, inak môžu byť návštevníci vašej stránky zavádzaní. Rovnaká poznámka platí aj pre opačný smer: Uistite sa, že obrázky zodpovedajú textovým informáciám poskytnutým na webovej stránke. Fotografia lietadla by bola vhodná na stránke leteckej dopravy, ale úplne nadbytočná na stránke s voľne žijúcimi zvieratami.

Na internete môžete nájsť veľa zaujímavých obrázkov a jednoducho si ich uložiť do počítača. Mnohé z týchto obrázkov sú však chránené autorským právom. Ak na komerčnej stránke nájdete obrázok, ktorý sa vám páči, skontrolujte, či sa tam nenachádzajú upozornenia o autorských právach a či je obrázok k dispozícii na bezplatné použitie.

Ak obrázok zobrazený na webovej stránke nie je chránený autorským právom, môžete ho skopírovať do pamäte počítača. Ak to chcete urobiť, jednoducho kliknite pravým tlačidlom myši na tento obrázok a z ponuky, ktorá sa otvorí, vyberte príkaz Uložiť obrázok ako. Po uložení obrázku do počítača ho môžete ďalej používať ako akúkoľvek inú kresbu.

Praktická práca č.2

Vkladanie obrázkov do HTML dokumentu

Cieľ. Oboznámenie sa so základnými značkami na vkladanie obrázkov do dokumentu HTML, zoznámenie sa s atribútmi pre transformáciu obrázkov v dokumente.

Literatúra. Poznámky k prednáške.

3. Príprava na prácu. Preštudujte si poznámky k prednáške na tému „Grafika“.

Zoznam vybavenia. Počítač.

Úloha.

5.1. Oboznámte sa so základnými značkami na vkladanie obrázkov do HTML dokumentu.

5.2. Naučte sa základné atribúty pre transformáciu obrazu.

5.4. Zistite, ako formátovať obrázky na webových stránkach.

Poradie práce.

6.1. Vkladanie obrázkov na webovú stránku.

1. otvorené Maľovací program a vytvorte v ňom tri výkresy podľa predlohy: každý výkres je v samostatnom súbore.

Obr.1 Obr.2 Obr.3

Uložte tieto súbory ako blok1.gif, blok2.gif, blok3.gif vo vašom priečinku.

2. Otvorte textový editor Poznámkový blok a vytvorte webovú stránku podľa vzoru:

Kód webovej stránky:

algorithm.html.

6.2. Tvorba vodorovné čiary a iné predmety.

1. Otvorte textový editor Poznámkový blok a vytvorte 2 webové stránky podľa vzoru:

Útržok kódu webovej stránky:

3. Uložte výsledný dokument do svojho priečinka a súbor pomenujte linii.html.

4. Spustite prehliadač internet Explorer. Zobrazte si v ňom výslednú webovú stránku.

5. Vytvorte druhú webovú stránku.

Útržok kódu webovej stránky:

6. Uložte výsledný dokument do svojho priečinka a súbor pomenujte zoznam.html.

7. Behajte internetový prehliadač prieskumník. Zobrazte si v ňom výslednú webovú stránku.

Vytvorenie obrázkovej mapy a vloženie tickeru.

1. Vytvorte webovú stránku pomocou nasledujúceho obrázka. Nachádza sa na pracovnej ploche v priečinku Praktická práca pomocou HTML.

2. Vytvorte obrazovú mapu takým spôsobom, že keď prejdete myšou na konkrétne zariadenie počítača, zobrazí sa jeho názov.

3. Na tej istej stránke vytvorte bežiaci riadok:

Rád sa hráš počítačové hry, rád sa programujem!

4. Uložte výsledný dokument do svojho priečinka a súbor pomenujte carta.html.

5. Spustite prehliadač Internet Explorer. Zobrazte si v ňom výslednú webovú stránku.

7.1. Súbory algorithm.html, linii.html, list.html, carta.html vo vašom priečinku.

8. Kontrolné otázky.

8.1. Ktorá značka sa používa na vkladanie obrázkov do dokumentu HTML?

8.2. Ktorý atribút vám umožňuje zadať názov súboru obrázka?

8.3. Aké atribúty vám umožňujú nastaviť veľkosť obrázka?

8.4. Ktorý atribút vám umožňuje nastaviť polohu obrázka vzhľadom na okolitý text?

8.5. Aký atribút vám umožňuje nastaviť hrúbku rámu okolo obrázka?

8.6. . Aké atribúty určujú množstvo voľného miesta vľavo, vpravo, nad a pod obrázkom?

8.7. Aký tag sa používa na vytváranie obrázkových máp? Aké atribúty sa používajú?

8.8. Aký tag je určený na vytvorenie bežiacej čiary?

Dodatok.

Grafika

Umiestnenie grafiky na webovú stránku. Formáty grafických súborov

Dva najpopulárnejšie grafické formáty na internete sú GIF a JPEG.

Zvyčajne sa používa:

JPEG - pre fotografie a veľmi zložité kresby farebných schém s plynulými prechodmi farieb (v rozšírení je napísaný ako JPG).

GIF - pre logá, nápisy, nadpisy, kresby s jasným farebným okrajom.

vo formáte GIF

Obrázky v tomto formáte podporujú 256 farieb. Formát GIF má tri pridané vlastnosti:

Animácia. Pomocou editora animovaných obrázkov GIF je ľahké zostaviť jednoduchú „karikatúru“: nakreslite jednotlivé snímky, upravte čas oneskorenia v sekvencii relácie, „prehrávajte film v slučke“ alebo ukážte snímky iba raz. Keď je animácia pripravená, zapíše sa na disk ako normálny súbor GIF. Tento súbor však neobsahuje jeden, ale celú zbierku súborov GIF a rôzne konfiguračné informácie.

V HTML nie je rozdiel medzi nastavením jednoduchého GIF na obrazovku alebo animovaného.

Priehľadná grafika. Formát GIF umožňuje, aby bola jedna alebo viacero farieb v obrázku vyhlásené za transparentné. To pomáha zbaviť sa striktne pravouhlých ilustrácií a umiestniť kresbu do dokumentu atraktívnejšie:

Prekladané skenovanie. Vzťahuje sa na veľké súbory GIF. Ilustrácia je rozdelená na štyri časti vo veľkosti pôvodného obrázku. Prvá časť obsahuje 1., 5., 9. atď. riadky pôvodného obrázka. Druhý - 2, 6, 10 atď. Tretí - 3., 7., 11. atď. Štvrtý - 4., 8., 12. atď.

Prehliadač vytvorí na obrazovke najprv prvú časť obrázka, potom tú, potom tretiu a štvrtú. Ukazuje sa efekt postupného vývoja obrazu.

formát JPEG

Tento formát bol vyvinutý špeciálne na prenos fotografií. Podporuje milióny farieb a vytvára veľmi kvalitné obrázky.

určite, vysoká kvalita ovplyvňuje veľkosť súboru. ale formát jpeg má jednu vlastnosť: v editore JPG môžete pri zápise na disk špecifikovať stupeň kvality, ktorý potrebujete, a tak dosiahnuť potrebný kompromis pri vyvážení na lište „kvalita-veľkosť súboru“. V skutočnosti, ak z milióna farieb naskenovanej fotografie zostane len 10 000, pričom zostávajúce farby nahradíte blízkymi, bude takmer nemožné takúto náhradu okom rozpoznať a veľkosť súboru sa výrazne zníži.

Formát JPEG podporuje režim podobný prekladania GIF. Na rozdiel od GIF sa však rozdelenie na časti nevyskytuje pozdĺž čiar, ale podľa algoritmu na extrahovanie častí v plnej dĺžke z obrázka. Navyše, každá ďalšia časť je kvalitnejšia ako predchádzajúca. JPEG s touto vlastnosťou sa nazýva progresívny.

Prvok

Prvok slúži na vloženie grafického obrázku do tela dokumentu.

Syntax:

Okrem toho prvok podporuje rôzne atribúty, ktoré určujú polohu obrázka vo vzťahu k okolitému textu a obsahu web stránku ako celok. Obrázok môže byť zarovnaný vľavo, vpravo, hore alebo dole od riadku alebo môže byť umiestnený v strede okna.

Vlastnosti:

src(ukazuje na grafický súbor zadaním jeho URL).
Syntax:
alt(namiesto obrázku zobrazuje alternatívny text typu, akým je nakreslené logo spoločnosti).
Syntax:
zarovnať(nastavuje polohu obrázka v okne a jeho zarovnanie, môže nadobudnúť nasledujúce hodnoty: top- pozdĺž horného okraja, dno- na spodnom okraji stredná- v centre správny-napravo, vľavo- vľavo).

Syntax:

šírka(nastavuje šírku oblasti v pixeloch pridelených v okne pre obrázok).

Syntax:

výška(nastavuje výšku oblasti v pixeloch pridelených v okne pre obrázok).

Syntax:

hspace(určuje biely priestor v pixeloch napravo a naľavo od obrázka).
Syntax:
hranica(nastavuje hrúbku rámu okolo obrázka v pixeloch).
Syntax:
vspace(určuje biely priestor v pixeloch nad a pod obrázkom).
Syntax:
ismap(umožňuje použitie obrázkov, ktorých niektoré časti sú prepojené a umožňujú navigáciu. Takéto obrázky sa nazývajú mapa MAP, používajú sa v spojení s prvkom . V tomto prípade odozvu na kliknutie na mapu spracuje server).
Syntax:

usemap( umožňuje použitie obrázkov, ktorých niektoré časti sú spojené s kartami, používajú sa v spojení s prvkom

Obrázkové karty.

Prvok

Prvok

Syntax:

Prvok

Prvok definuje aktívne body na mape, na ktoré je možné kliknúť a odkazovať. Prvok nemá koncovú značku. Je pohodlné pracovať s obrázkami mapy v štandardná aplikácia pre Windows - editor Paint, pre to musí byť obrázok transformovaný do formátu BMP. Pomocou mriežky v režimoch priblíženia stlačením Ctrl+G a výberom nástroja Výber, keď sa ukazovateľ myši zmení na tenký krížik, možno súradnice kurzora určiť s presnosťou na jeden pixel. Takáto presnosť môže byť veľmi užitočná pri nastavovaní súradníc aktívnych oblastí mapy. Prvok podporuje rôzne atribúty:

Syntax: URL ">

alt(nastaví alternatívny text pre prehliadače, ktoré nepodporujú tento prvok).
Syntax:

titul(nastaví alternatívny text pre prehliadače, ktorý sa zobrazí, keď umiestnite kurzor myši na tento prvok).

Syntax:

tvary(nastavuje tvar aktívnej oblasti na mape a jej súradnice, môže nadobudnúť nasledovné hodnoty: "kruh" coords=X,Y,R, kde X,Y,R - súradnice stredu kruhu a jeho polomer , "poly" coords=X1,Y1, X2,Y2,X3,Y3..., kde X1,Y1,X2,Y2,X3,Y3... - súradnice vrcholov polygónu, ak je polygón obdĺžnik, potom stačí špecifikovať jeho ľavý horný a pravý dolný vrchol „rect“ súradnice= X1,Y1,X3,Y3).
Syntax: kruh"súradnice= X,Y,R >

Príklad obrázka - mapy:

Druhá najdôležitejšia obsahová zložka webových stránok po texte, samozrejme, bude grafický dizajn. Sú to rôzne druhy kresieb, fotografií a možno aj videoklipov. Zvukovú stopu môžeme použiť aj na zobrazenie webových stránok.
Začneme umiestnením grafických obrázkov. Prehliadače dokážu zobraziť iba tri druhy grafických súborov. Ide o súbory GIF, JPEG a PNG. Súbory GIF vám umožňujú vytvárať animované obrázky. Súbory JPEG sa bežne používajú na ukladanie fotografických obrázkov. Novo sa objavil formát PNG umožňuje kombinovať dobrá kvalita obrázky a malé množstvo grafických súborov. Ale akonáhle je obrázok zabalený do grafického súboru, stále musí byť nejakým spôsobom vložený do webovej stránky.

Na to slúži značka. s mnohými možnosťami. Táto značka nemá uzatvárací pár, pretože nevytvára žiadny rozsah pre pravidlo zobrazenia, iba vkladá grafiku do obsahu webovej stránky. V skutočnosti môže byť grafickým obrázkom aj hypertextový odkaz alebo dokonca za ním skrývať niekoľko hypertextových odkazov, o hypertextových odkazoch si však povieme v ďalšej časti tejto kapitoly, zatiaľ sa však budeme zaoberať pravidlami používania značky .

Hlavný a povinný atribút značky je atribút src. Hodnota tohto atribútu je adresa grafického súboru, ktorý sa má vložiť, alebo presnejšie jeho URL. Ak sa grafický súbor nachádza na tom istom webovom serveri, stačí si zapísať celý názov súboru vrátane cesty k nemu v podadresároch, teda ak sa adresár obrázkov nachádza v rovnakom priečinku ako HTML súbory s Webové stránky s obrázkami, značka na vloženie grafického obrázka bude mať nasledujúcu podobu:

V tomto príklade používame obrázok GIF umiestnený v súbore s názvom pictl.gif, ktorý sa zase nachádza v adresári s názvom images. Je potrebné poznamenať, že lomky sú lomky, naklonené opačným smerom ako pri použití v cestách k súborom operačných systémov rodiny DOS a Windows. Faktom je, že pôvodne webové servery boli založené na operačnom systéme Unix, ktorý podporuje súborový systém s takýmito lomkami. A teraz nezáleží na tom, aký operačný systém podporuje server s webovou stránkou, všetky cesty sú napísané rovnakým spôsobom a sú spracované správne softvér server.

V prvých dňoch WWW prehliadače zobrazovali iba textové informácie, žiadna grafika nebola podporovaná. Teraz sa prakticky nevyskytujú, ale každý prehliadač má možnosť zakázať načítanie grafiky. Preto by ste mali vždy použiť alternatívne textové znázornenie obrázka. Jednoducho si treba pripraviť text, ktorý sa zobrazí namiesto obrázka, ak ho z nejakého dôvodu prehliadač nedokáže načítať. Tento text sa pridá do značky pomocou parametra ait, ktorého hodnota je požadovaný textový reťazec, t.j. získa sa približne nasledujúca konštrukcia:

V prípade, že grafický obrázok prehliadač stále zobrazuje, text alternatívneho textového znázornenia sa zobrazí ako „nápoveda“, krátka textová nápoveda, keď používateľ prejde myšou nad požadovaný grafický obrázok.

Existuje však podrobnejšia verzia vytvárania takýchto textových výziev. Pomocou parametra longdesс, adresa internetového zdroja, na ktorom je Celý popis tento grafický obrázok. Prirodzene, ako hodnota tohto parametra sa uvádza URL zdroja s popisom obrázka.

Parameter name vám umožňuje zadať jedinečný názov obrázka, ktorý identifikuje tento prvok dizajnu webovej stránky. Tento parameter je ponechaný pre účely spätnej kompatibility, zostal predchádzajúce verzie HTML štandard. Teraz všetky značky používajú na tento účel parameter id.

V predvolenom nastavení sa grafický obrázok zobrazuje presne tak, ako bol vytvorený, so zachovanými vertikálnymi a horizontálnymi rozmermi. Máme však možnosť explicitne nastaviť veľkosť obrázka podľa vlastného uváženia. Na tento účel sa používajú výškové parametre a šírka. Už vieme, ako nastaviť rozmery v pixeloch alebo percentách. Treba len poznamenať, že prehliadače sa snažia zachovať proporcie obrázka, takže explicitné špecifikovanie veľkostí, ktoré menia proporcie, môže prehliadač ignorovať a vyberie také veľkosti, ktoré by sa čo najviac približovali používateľom zadaným bez porušenie proporcií. Pre webové stránky sa preto grafika zvyčajne pripravuje vo veľkostiach, ktoré sa použijú pri ich zobrazovaní ako súčasti webových stránok. A ak sa jeden obrázok musí zobraziť niekoľkokrát s rôznymi veľkosťami, potom je jednoduchšie pripraviť niekoľko grafických súborov, ako dať svoje obrázky na neoprávnené zobrazenie prehliadačom, ktorý môže narušiť celé usporiadanie webových stránok.

Pomocou parametrov môžeme určiť množstvo voľného miesta, ktoré oddelí grafický obrázok od ostatných prvkov dizajnu webovej stránky, ktorá ho obklopuje, teda v skutočnosti nastaviť odsadenie obrázka. Na tento účel sa používajú parametre hspace a vspace. Parameter hspace nastavuje horizontálne odsadenie v pixeloch a parameter vspace nastavuje vertikálne odsadenie. Upozorňujeme, že ako hodnoty týchto parametrov možno použiť iba číselné hodnoty označujúce vzdialenosti v pixeloch. Pre tieto parametre neexistuje žiadne ustanovenie pre nulovú hodnotu, ale zvyčajne každý prehliadač používa malú nenulovú hodnotu.

A pomocou parametra border môžeme nastaviť hrúbku okraja obklopujúceho obrázok. Ako obvykle je hodnotou parametra číslo označujúce hrúbku v pixeloch. Predvolená hodnota je nula, vďaka čomu je okraj neviditeľný.

Je potrebné spomenúť aj zarovnanie grafického objektu voči textu, ktorý sa okolo neho obtáča. Na tento účel sa používa parameter align. Ako hodnotu možno použiť jedno kľúčové slovo z preddefinovaného súboru kľúčových slov. Dolné, stredné a horné hodnoty sa používajú na umiestnenie prvého riadku textu, ktorý sa vertikálne obtáča okolo obrázka. Horná hodnota ju posunie nahor, zdola nadol a stred umožňuje vertikálne vycentrovanie čiary. Hodnoty vľavo a vpravo sa používajú na horizontálne zarovnanie grafického obrázka. Prvá hodnota vľavo, ako by ste mohli hádať, posúva obrázok na ľavý okraj bloku, v ktorom je zobrazený, a vpravo - doprava.

Teraz je čas na príkladoch vidieť, ako môžeme umiestniť obrázok a skombinovať ho s textom, ktorý by mal obtekať požadovaný grafický obrázok.

Výpis 1.11

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




<р>
Toto je text, ktorý obteká obrázok.
Toto je text, ktorý obteká obrázok.

Vzhľad tohto HTML dokumentu pri zobrazení pomocou prehliadača je znázornený na obr. 1.11.

Ryža. 1.11. Okno prehliadača zobrazujúce výsledok zobrazenia súboru uvedeného vo výpise 1.11

V tomto príklade sme použili čistú značku na vloženie obrázka bez akejkoľvek ďalšie možnosti. Ako vidíme, obrázok sa vkladá hneď za prvú vetu, kde sme značku umiestnili . V tomto prípade, ak horizontálne zmenšíme veľkosť výrezu prehliadača tak, aby sa tam prvá veta a obrázok nezmestili na rovnaký riadok, potom by sa najprv zobrazila veta a pod ňou obrázok, stlačený vľavo okraj výrezu. Napravo od neho by sa za ním nasledujúci text zobrazoval tak, že základná čiara riadku by sa zhodovala so spodným okrajom obrázka.

Teraz pridajte parameter horizontálneho zarovnania do značky zobrazenia obrázka. Výsledný kód je zobrazený vo výpise 1-12.

Výpis 1.12

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


<р>Toto je text, ktorý obteká obrázok. align="ieft">
Toto je text, ktorý obteká obrázok. Toto je text, ktorý obteká obrázok.
Toto je text, ktorý obteká obrázok.

Ako vidíte, v tomto prípade sa opäť začne zobrazovať najskôr text, potom grafický obrázok pritlačený k ľavému okraju podľa smernice zadanej parametrom align a zvyšok textu sa umiestni doprava. obrázku (obr. 1.12), tj obrázok nemôže zaberať prvý riadok, keďže text začína pred ním. To isté sa stane, ak použijete parameter zarovnania doprava, ale obrázok sa pritlačí iba k pravému okraju výrezu a text sa okolo neho zalomí na ľavej strane. To sú všetky zmeny.

Teraz sa pozrime, ako funguje vertikálne zarovnanie. Aj keď je parameter zarovnania vložený do značky obrázka, najväčšie zmeny sú viditeľné v texte okolo obrázka. Pozrime sa na príklade vplyvu parametra vertikálneho zarovnania.

Ryža. 1.12. Okno prehliadača zobrazujúce výsledok zobrazenia súboru uvedeného vo výpise 1.12

Výpis 1.13

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




<р>Toto je text, ktorý obteká obrázok. align="middle">
Toto je text, ktorý obteká obrázok. Toto je text
ktorý sa obtáča okolo obrazu.
Toto je text, ktorý obteká obrázok.

Výsledok zobrazenia tohto HTML dokumentu je znázornený na obr. 1.13.

Ryža. 1.13. Okno prehliadača zobrazujúce výsledok zobrazenia súboru zobrazeného vo výpise 1.13

V tomto príklade nastavíme vertikálne zarovnanie na stred, t. j. prvý riadok textu po tagu na vloženie obrázka sa zobrazí vo zvislom strede voľného miesta napravo od obrázka. Zvyšok textu je zobrazený pod obrázkom. Ak by sme nastavili parameter zarovnania na vrch, potom by sa prvý riadok zobrazil vedľa horného okraja obrázka. A pri použití spodnej hodnoty sa prvý riadok textu zobrazí vedľa spodného okraja obrázka. Všimnite si, že prehliadač rozpoznáva iba jeden parameter zarovnania, t.j. môžeme zadať vertikálne alebo horizontálne zarovnanie. Ak vstavané nástroje na umiestnenie a zarovnanie obrázka nestačia, môžete prejsť na proces rozloženia pomocou tabuliek. Použitím tabuliek sa budeme venovať v jednej z nasledujúcich častí tejto kapitoly.

Máme možnosť využiť videá pri tvorbe webových stránok. Pri ich používaní by ste mali byť veľmi opatrní, pretože súbory obsahujúce tieto zdroje videa sú zvyčajne dosť veľké. A aby si ich vzdialený používateľ mohol zobraziť vo svojom prehliadači, bude si musieť tento súbor úplne stiahnuť do svojho počítača. Pri použití kanálov, ktoré sú dostupné väčšine používateľov internetu, môže takýto postup trvať pomerne dlho. A nikto z nás nemá rád čakanie na načítanie webovej stránky.

Prehliadače sú zvyčajne schopné prehrávať video súbory AVI formáty, skutočné video a Windows Media. A ich uvedenie na webovú stránku sa vykonáva pomocou rovnakej značky . Na určenie umiestnenia video súboru sa však používa parameter dunscr. V predvolenom nastavení sa videoklip vložený do webovej stránky prehrá raz, ihneď po úplnom načítaní stránky. Máme však určité možnosti regulovať proces prehrávania klipu alebo poskytnúť používateľovi možnosť ovládať jeho prehrávanie.

Ak je v značke zahrnieme parameter štart, potom môžeme explicitne určiť udalosť, po ktorej bude musieť prehliadač prehrať stiahnutý videoklip. Hodnoty tohto parametra je možné použiť Kľúčové slová myšou a fileopen. Prvý naznačuje, že klip by sa mal prehrať po tom, čo používateľ umiestni kurzor myši na miesto vyhradené pre vloženie videa, a druhý naznačuje, že prehrávanie sa začne ihneď po úplnom načítaní súboru HTML. Tieto dve možnosti však môžeme kombinovať. V tomto prípade by značka na vloženie videa vyzerala takto:

Pomocou parametra loop na tento účel môžeme určiť, koľkokrát sa má video prehrať. Hodnota tohto parametra je číslo, ktoré určuje čas, počas ktorého sa bude videoklip opakovať. Ak však chceme, aby sa video prehrávalo neustále, bez akéhokoľvek fixného počtu opakovaní, potom by sme mali použiť hodnotu infinite. A pomocou parametra loopdelay môžeme nastaviť časové oneskorenie medzi opakovaniami videoklipu. Hodnota tohto parametra je číslo, ktoré udáva množstvo času v milisekundách. Zvážte použitie týchto parametrov pomocou nasledujúceho útržku kódu ako príkladu:

Tu výslovne uvádzame, že videoklip sa prehrá dvakrát ihneď po načítaní webovej stránky s päťsekundovým oneskorením medzi prehratiami.

V tomto prípade sami riadime zobrazenie video súboru. Túto výsadu však môžeme preniesť aj na vzdialeného používateľa, ktorý načíta webovú stránku. Ak to chcete urobiť, zadajte značku ovládací parameter bez akejkoľvek hodnoty. Prítomnosť tohto parametra v značke explicitne naznačuje, že ovládacie prvky prehrávania sa zobrazia spolu s videoklipom na webovej stránke.

Parametre, ktoré sme zvážili, úplne postačujú na správnu implementáciu video súborov do obsahu webovej stránky. Zvážte podrobný príklad (obr. 1.14).

Výpis 1.14

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

<р>Obyčajný text.

Ryža. 1.14. Okno prehliadača zobrazujúce výsledok zobrazenia súboru uvedeného vo výpise 1.14

Prirodzene, keďže postup na vkladanie fragmentu videa do tela webovej stránky je špeciálnym prípadom vkladania grafiky, všetky ostatné parametre použiteľné pre značku sa aplikujú aj na značku vkladania fragmentu videa. , ako sú možnosti zarovnania, explicitná veľkosť a iné.

Medzi multimediálne funkcie patrí zvukový dizajn webovej stránky. Zvuk však môžeme použiť len ako pozadie, to znamená, že určitý zvukový súbor sa prehrá na počítači vzdialeného používateľa po načítaní webovej stránky. Pokiaľ samozrejme nie je v jeho počítači nainštalovaná zvuková karta, teda najprv sa do počítača vzdialeného používateľa stiahne HTML súbor s webovou stránkou a následne sa načítajú všetky ostatné súbory použité pri návrhu tejto web stránky, ako napr. grafické súbory, video a zvukové klipy.

Takže, aby bolo prezeranie webovej stránky sprevádzané prehrávaním zvuku, musíte vložiť značku do kódu stránky . Značka sa neumiestňuje do tela webovej stránky, ale do jej hlavičky, teda medzi značky A. Táto značka má povinný parameter src, ktorého hodnota je adresa URL doplnku zvukový súbor. Treba poznamenať, že prehliadače zaručene rozpoznajú a prehrajú zvukové súbory MIDI a WAV. Prehrávanie iných formátov, ako sú MP3 a Real Audio, je možné len po pripojení prídavných modulov k prehliadačom.

Podobne ako pri videoklipoch môžeme parametrom loop nastaviť počet prehratí zvukového súboru. Hodnota tohto parametra je počet opakovaní. Ak je potrebné neustále prehrávať zvukový fragment, mala by sa použiť hodnota „-1“, t. j. ak chceme, aby sa zvukový súbor prehrával nepretržite pri načítaní webovej stránky, mali by sme použiť nasledujúcu konštrukciu:

Týmto sa končí naša diskusia o používaní multimédií a grafické objekty v dizajne webových stránok a prejdite na ďalšiu časť prvej kapitoly.

Na tento moment Takmer všetky obrázky na webe sú v dvoch formátoch: GIF a JPEG. Tretí uchádzač, ktorý stojí za zmienku, formát PNG, sa uchádza o podporu a pozornosť prehliadača. Ďalej - krátka recenzia„veľkej trojky“ online grafických formátov. Podrobnejšie informácie sú uvedené v kapitolách venovaných každému z formátov.

gif- Formát zmeny GraficInter možno nazvať tradičným formátom webových súborov. Bol to prvý formát súborov podporovaný webovými prehliadačmi a dodnes je hlavným grafickým formátom webu.

Jeho vlastnosti sú nasledovné:

• - podporuje nie viac ako 256 farieb (menej je možné a často potrebné);
• - používa paletu farieb;
• - používa bezstratovú kompresiu pomocou metódy LZW (ktorá je podobná tej, ktorá sa používa v archivátore PKZIP, a preto sa súbory GIF v budúcnosti prakticky nekomprimujú);
• - podporuje prekladané skenovanie;
• - je streamovací formát, t.j. zobrazenie obrázka sa spustí počas prenosu;
• - umožňuje priradiť jednej z farieb v palete atribút transparent, ktorý sa používa pri vytváraní takzvaných transparentných GIFov;
• - má schopnosť uložiť niekoľko obrázkov do jedného súboru, ktorý sa používa pri výrobe animovaných GIF;
• - podporuje možnosť vkladať do súboru ovládacie bloky, ktoré umožňujú vkladať do súboru komentáre (napríklad o autorských právach), oneskorenie medzi zobrazením obrázkov a pod.

A teraz malé vysvetlenie – k čomu môžu tieto vlastnosti viesť. Ako sme písali, GIF nepodporuje viac ako 256 farieb, čo znamená, že všetky obrázky, ktoré uložíme vo formáte GIF, explicitne alebo implicitne znížia počet farieb, aby splnili tento limit ( rôzne programy s rôznym stupňom úspechu). A teda záver – ak vezmeme krásne foto od plynulé prechody a jemné odtiene farieb, potom po prepočte bude všetko oveľa horšie - odtiene už nebudú neprehliadnuteľné a celá fotografia získa neprirodzený, nereálny vzhľad. Preto, ak stále potrebujete uložiť fotografiu vo formáte GIF a sprostredkovať všetky odtiene, musíte ísť na triky. Môžete napríklad použiť nejaký druh umeleckého filtra na fotografiu a premeniť ju na kresbu alebo použiť tónovanie. S ukladaním obrázkov a kresieb v tomto formáte však nie sú žiadne problémy, zvyčajne sú dobre komprimované a neobsahujú veľa farieb.

Druhým najpopulárnejším obrazovým formátom na webe je JPEG – Joint Photographic Experts Group. Obsahuje 24-bitové farebné informácie. To je 16,77 milióna farieb, na rozdiel od 256 farieb vo formáte GIF. JPEG používa to, čo je známe ako stratová kompresia. To znamená, že niektoré obrazové informácie sa počas procesu kompresie zahodia, ale vo väčšine prípadov je zhoršenie kvality obrazu neškodné a často ani nepostrehnuteľné.

Fotografie alebo akýkoľvek obrázok s plynulými farebnými prechodmi je najlepšie uložiť vo formáte JPEG, pretože ponúka lepšiu kvalitu obrazu pri menšej veľkosti súboru. JPEG však nie je najlepšie riešenie pre grafické obrázky s plnými farebnými plochami, pretože tento formát má tendenciu k škvrnitosti farieb a výsledný súbor bude zvyčajne o niečo väčší ako súbor GIF pre rovnaký obrázok.

Existuje aj tretí grafický formát, ktorý súťaží o ďalšie používanie na webe. Ide o formát PNG - Portable Net work Graphic, ktorý je napriek niektorým výhodám od roku 1994 viac-menej v tieni. Je to len nedávno, čo prehliadače začali podporovať PNG ako inline grafiku, ale PNG má potenciál stať sa veľmi populárnym formátom na webe. Preto je tu zaradený do „Veľkej trojky“. PNG môže podporovať 8-bitové indexované farby, 16-bitové poltóny alebo 24-bitové plnofarebné obrázky pomocou schémy bezstratovej kompresie. Výsledkom je vyššia kvalita obrazu a niekedy menšie veľkosti súborov ako vo formáte GIF. okrem toho súbory PNG majú niektoré skvelé funkcie, ako napríklad vstavané ovládanie gama a variabilné úrovne priehľadnosti (to umožňuje, aby sa vzor pozadia zobrazoval cez jemné tiene).

Pretože webové obrázky existujú iba na obrazovke, je technicky správne merať ich rozlíšenie v pixeloch na palec (ppi - pixelsperinch). Ďalšou jednotkou rozlíšenia je počet bodov na palec (dpi - dotsperinch) označuje rozlíšenie tlačených obrázkov a závisí od rozlíšenia tlačového zariadenia.

Ale, keďže skutočná veľkosť grafiky závisí od rozlíšenia displeja, meranie v palcoch je pre webové prostredie neprijateľné. Jedinou zmysluplnou mernou jednotkou je pixel.

Praktické je vytvárať obrázky s rozlíšením 72 ppi (toto najlepšia cesta pre zobrazenie na obrazovke), venujte pozornosť iba celkovým rozmerom v pixeloch. V procese vytvárania grafiky na webe nemôžete vôbec používať palce. Dôležitá je veľkosť obrázka v porovnaní s ostatnými obrázkami na stránke a celková veľkosť okna prehliadača.

Mnoho používateľov napríklad stále používa 14-palcové displeje s rozlíšením 640 x 480 pixelov. Aby sa zabezpečilo, že grafická úvodná obrazovka vyplní celý priestor obrazovky, je najlepšie, aby nebola väčšia ako 600 pixelov (vzhľadom na to, že niektoré pixely vpravo a vľavo sa použijú pre okno a posuvnú lištu). Veľkosť ostatných tlačidiel a obrázkov na stránke by sa mala merať v pixeloch vzhľadom na banner, ktorý je široký 600 pixelov.

Bezpochyby to bola grafika, ktorá urobila web tým, čo ho dnes vidíme, ale ako dizajnér by ste mali vedieť, že mnohí používatelia grafiky na webe majú pocit, ktorý hraničí s láskou a nenávisťou. Majte na pamäti, že grafika zvyšuje čas potrebný na prenos webovej stránky cez sieť; veľké množstvo grafiky znamená značnú dobu načítania, ktorá testuje trpezlivosť čitateľa, najmä ak vytáča pomocou štandardného dial-up pripojenia.

IN V tomto ohľade existuje pre web dizajnéra jedno najdôležitejšie pravidlo: veľkosť súboru grafiky by mala byť čo najmenšia! Vytváranie obrázkov, ktoré sú určené na zdieľanie cez sieť, kladie zodpovednosť na vývojárov, aby brali problém s časom načítania vážne.