Grafika i promet

Zahtjevi za ljepotom i izražajnošću dizajna web stranica u stalnom su sukobu sa tehničkim mogućnostima modernog web hostinga. Stoga, dizajner web stranice mora postati posrednik između dizajnera i korisnika i striktno održavati ravnotežu između vizualne privlačnosti i razumne brzine isporuke informacija na webu. Da biste uspješno riješili ovaj problem, morate poznavati sve grafičke formate koji se koriste na Internetu, razumjeti razlike između njih, područja njihove primjene i karakteristike upotrebe.

Razumjeti veliki broj formata i protokola prihvaćenih na Internetu i graditi vlastitu stranicu, morate odabrati ono što je najprikladnije za vaše specifične svrhe. Neki formati mogu biti specifični za samo jedan pretraživač, dok će drugi zahtijevati poseban dodatak.

Od velikog broja formata odabrali smo samo one koje najčešće koriste autori popularnih sajtova i koje korisnici prihvataju. GIF i JPEG su dva od najpopularnijih grafičkih formata koji su odavno postali de facto standardi za korištenje na WWW-u. Oba su prilično univerzalna, čitljiva za većinu pretraživača i ne zahtijevaju posebne softver

Formati vektorske grafike su mnogo privlačniji za upotrebu na webu. Za razliku od bitmapa, vektorska grafika se zasniva na matematičkom (geometrijskom) predstavljanju podataka. Takve slike su znatno manje u smislu zapremine skladištenja/transfera, lako se skaliraju i praktično ne gube na kvalitetu ni tokom konverzije. Nažalost, vektorski formati se još uvijek malo koriste na Internetu, ali standardi su već formirani i trebali bi biti od interesa za dizajnere.

Nekoliko vektorskih standarda je predloženo relativno nedavno, a PGML i VML formati su trenutno u razmatranju od strane World Wide Web Consortium (W3C). Međutim, Macromedia, koja promoviše VML, odavno je otvorila svoj vektorski format Shockwave Flash drugi programeri i implementirali dodatne module za pregled grafike u ovom formatu za popularne pretraživače.

Međutim, novi proizvodi nisu nužno bolji za sve primjene. Najčešće slike koje se objavljuju na internetu su i dalje digitalne fotografije, crteži i skenirane slike, koje su vrlo naporne i teško ih je preporučljivo pretvoriti u vektorski format.

Stoga, izbor formata u konačnici ovisi o vašim ciljevima i o tome koje slike najbolje odgovaraju vašim potrebama. ciljnu publiku, na vama je da odlučite.

GIF - format za dizajn

CompuServe je prvobitno nameravao svoj GIF format za interaktivne aplikacije u kontekstu ograničenih mogućnosti standardne grafike na personalnom računaru. Prvobitno je bio 4-bitni, a zatim 8-bitni rasterski format sa određenom paletom boja koja je podržavala maksimalno 256 boja. Jedna od značajnih prednosti formata je to što se slike mogu indeksirati na određenu paletu (skup boja), dok se JPEG slike ne mogu “zaključati” za paletu i njihov “ispravan” prikaz nije uvijek moguć.

Ovo svojstvo je posebno važno za one programere koji koriste indeksiranje paleta za optimizaciju prijenosa slika za sve platforme (bilo PC, Mac, Web-TV ili druge), bez obzira na dubinu boje s kojom određeni sistem radi. Ova svestranost se postiže kroz ograničenu paletu od 216 boja, koja uključuje sve uobičajene boje koje se koriste u Windows-u i, na primjer, MacOS-u. Dizajniranje stranice u univerzalnoj paleti jamči dosljedan, višeplatformski i hardverski nezavisan prikaz. Osim toga, GIF format koristi shemu kompresije bez gubitaka (sa jednostavnim algoritmom za kodiranje ponavljanja: niz bajtova iste boje zamjenjuje se riječju od dva bajta, od kojih jedan sadrži uzorak senčenja, a drugi određuje broj broja ponavljanja), tako da grafički podaci u ovom formatu ne gube informacije tokom procesa kompresije i oporavka.

Dakle, glavne prednosti GIF formata su upotreba kompresije bez gubitaka i ekonomično očuvanje čvrstih područja boje s jasnim granicama i striktnim prijelazima boja. JPEG format se razlikuje od opisanog po tome što se, u zavisnosti od stepena kompresije, uništavaju čvrste oblasti, a oštri prelazi boja su izglađeni ili zamućeni.

Glavni kriterij za odabir GIF formata: ako ste sami nacrtali sliku u grafičkom paketu poput Photoshopa ili Paintera koji ima velike površine iste boje, ili obradili postojeću sliku i želite zadržati visok kontrast (neophodan, na primjer, kada prikaz teksta), a zatim ga sačuvajte u ovom formatu (prvenstveno se to odnosi na crno-bijele ili crteže loše boje).

Za fotografije, video zapise ili druge slike u punoj boji koje koriste glatke prelaze boja (gradijente), koristite JPEG format.

Takođe je važno imati na umu da ako pokušavate da sačuvate slike kontinualnog tona kao GIF-ove, verovatno ćete morati da odbacite toliko informacija u procesu pripreme slike (kada je konvertujete u fiksnu paletu) i kompresiju GIF-a metoda će biti toliko neefikasna da ćete i finansijski izgubiti (i u pogledu troškova rada i veličine datoteke).

Između ostalog, GIF format pruža takozvani isprepleteni izgled, koji korisnicima sa sporim kanalima na samom početku prijema pomaže da procijene sadržaj slike (efekat je sličan postepenom crtanju van- fokus slike) i vrijeme potrebno za njen potpuni prijenos, te kao rezultat prihvatiti odluku da li nastaviti sa snimanjem ili je bolje prestati sa snimanjem.

Međutim, za razliku od progresivnog JPEG-a, efekat je ovde više psihološki nego stvaran (vidi sliku).

Treba imati na umu i jednu važnu prednost GIF formata, koja se u nekim slučajevima ne može izbjeći čak ni sa svim svojim nedostacima, je podrška za transparentnost (GIF89a ekstenzija), koja omogućava prikazivanje siluete nepravokutnih kontura na postojećoj pozadini. . Transparentnost u GIF formatu implementirana je primitivno - jedna boja (obično pozadina) je dodijeljena kao transparentna. Ova prednost se često koristi prilikom kreiranja dugmadi i ikona u dizajnu stranica (JPEG ne nudi nikakvu podršku za transparentnost). U zaključku možemo reći sljedeće: GIF - kako bi se postigao efikasan kompromis između postojećeg hardvera i softvera, a mogućnost indeksiranja 8-bitne GIF slike na 216 univerzalnih boja je od suštinskog značaja kada su vaše slike namijenjene za prikazivanje na različitim pretraživačima i nepoznatim platformama.

JPEG - format za fotografije i video okvire

JPEG format je dobio ime po akronimu Joint Photographic Experts Group committee, koji je kreirao ovaj standard kasnih 80-ih i ranih 90-ih. JPEG format je baziran na algoritmu kompresije s gubicima (diskretna kosinusna transformacija), koji razbija vašu sliku na područja (obično kvadrati 8x8 piksela) unutar kojih je distribucija boja zamijenjena matematičkom funkcijom i samo se koeficijenti ove funkcije pohranjuju, što omogućava da rekonstruišete njen izgled. Naravno, naići ćete na gubitak kvaliteta (ovisno o složenosti funkcije koja se koristi za zamjenu slike) i nakon restauracije više nećete dobiti stvarnu sliku, već njen matematički „surogat“. Međutim, ovisno o kvaliteti vašeg originala i stupnju kompresije, gubitak kvalitete može biti potpuno nevidljiv za gledatelja.

Ali glavna prednost JPEG formata u odnosu na GIF je da dok je GIF samo 8-bitni (256 boja), JPEG je 24-bitni i može prikazati do 16,7 miliona boja. Iz tog razloga, JPEG u punoj boji prirodno reprodukuje znatno više video informacija nego GIF. Ovaj format je najprikladniji za slike iz stvarnog života - skenirane slike ili digitalne fotografije

, kao i digitalizovane video okvire ili renderovane scene 3D kompjuterske grafike.

Još jedna prednost JPEG-a je u tome što, za razliku od GIF-a, omogućava nezavisno podešavanje stepena kompresije primenjene na izvornu sliku, što omogućava održavanje potrebnog balansa između veličine i kvaliteta.

Dakle, kada radite sa fotografijom u JPEG formatu, imate priliku da sačuvate 24-bitnu sliku sa 16,7 miliona boja, i, uprkos gubitku kvaliteta tokom kompresije, ona je i dalje mnogo konzistentnija sa originalom od 256- GIF performanse. U ovom slučaju, neizbježan gubitak kvalitete uvelike ovisi o veličini, kvaliteti i vrsti originalne slike.

Osim toga, JPEG vam omogućava da definišete takozvani progresivni prikaz, odnosno kada se prilikom učitavanja na ekranu odmah pojavi „grubi“ prikaz slike, koji, kako je primljen dodatne informacije, postepeno se poboljšava (istovremeno, možete dobiti potrebno razumijevanje suštine materijala koji se šalje čak i prije nego što se preuzimanje završi i prekinuti proces u bilo kojoj fazi, što značajno uštedi vrijeme za gledanje sadržaja na mreži).

Ove alate možete koristiti kako želite, a takva postupna manifestacija može biti dobra pomoć u borbi protiv zagušenja kanala. Jedini problem sa progresivnim JPEG-om (za razliku od isprepletenog GIF-a) je taj što ga stariji pretraživači možda ne podržavaju.

PNG - univerzalna rasterska novost

Sljedeća generacija rasterskih formata, PNG, uzima najbolje karakteristike i JPEG-a i GIF-a i dodaje svoj jedinstveni pristup prezentaciji slike, što omogućava ugrađivanje različitih verzija iste slike u jednu datoteku za niske, srednje i visoke rezolucije.

PNG (Portable Network Graphics) format je relativno nov format rasterske grafike koji je odobren kao standard od strane konzorcijuma W3C i trebao bi postepeno zamijeniti oba “zastarjela” formata: i GIF i JPEG. PNG nudi i indeksiranje boja (do 256 boja), podršku za 24- i 48-bitnu boju (True-Color) i rad sa kanalom transparentnosti (alfa kanal), i mnogo je efikasniji od tradicionalnog skladištenja rasterskih slika formati.

Algoritam kompresije za sliku u punoj boji je superiorniji od JPEG-a u kvaliteti, a uz podršku za ograničenu indeksiranu paletu (do 256 boja), novi format pruža kompresiju bez gubitaka 10-30% bolju od onog implementiranog u GIF formatu, što ga čini optimalnim za upotrebu u svakom slučaju. Nažalost, novi format vam ne dozvoljava da žrtvujete kvalitet slike u zamjenu za veći omjer kompresije, kao u.

Podrška za transparentnost u PNG formatu, za razliku od GIF-a, je punopravna, odnosno možete graditi prozirne slike ili ivice, tako da se problem "čistih" ivica, koji je tako teško riješiti kada koristite transparentnost u GIF datoteci, lako prevazilazi ovdje.

Međutim, uprkos svim poboljšanjima koja PNG nudi, novi format će se pojaviti tek kada ga koriste dizajneri web stranica i proizvođači softvera kako bi prikazali slike u novom formatu i pripremili ih za objavljivanje. U međuvremenu, prilično je teško pronaći PNG slike bilo gdje na Internetu, uprkos nedavnom uključivanju podrške za ovaj format u Netscape Navigator i Microsoft Internet Explorer.

I mada oni najnovije verzije i podržavaju PNG, to rade na vrlo ograničen način. Trenutno jedino rješenje za korisnike koji žele vidjeti punu PNG datoteku je samostalna instalacija eksterni modul (kao što je PNG Live).

Očigledno, programeri odlažu, čekajući da korisnici u potpunosti pređu na nove formate. Pa, zdrava konzervativnost nikada ne škodi, ali mi i dalje toplo preporučujemo da postepeno prelazite na PNG, zamjenjujući barem sve postojeće upotrebe GIF formata.

Vektorska reprezentacija

I JPEG, GIF i PNG su rasterski formati zasnovani na diskretnom (piksel ili tačka) predstavljanju slike, dok su vektorski formati zasnovani na matematičkim formulama (geometrijski prikaz oblika). Vektorska grafika pruža značajne prednosti u odnosu na raster, posebno kada su u pitanju dijagrami, tekst i industrijska grafika (a isplativi formati su od velike važnosti za Internet).

Dakle, prva prednost je znatno manja veličina vektorskih slika u odnosu na bitmape, jer nije opisan svaki pojedinačni piksel slike, već cijela figura (na primjer, da biste odredili krug, potrebno je proći 3-4 broja: radijus, koordinate centra, a možda i tip ili debljina linije i njeni atributi). Matematičke formule koje opisuju vektorsku reprezentaciju zauzimaju mnogo manje prostora od pojedinačnih piksela i njihovih atributa.

Još jedna važna prednost vektorske reprezentacije je mogućnost skoro neograničenog skaliranja slike (ili njenih detaljnih dijelova) bez gubitka rezolucije ili jasnoće slike. Nije potreban nikakav napor da se vektorska reprezentacija prilagodi određenoj paleti, platformi, hardveru ili karakteristikama dizajna; a koordinacija šeme kompresije i kvaliteta prikaza odvija se bez ikakvih problema.

Međutim, ne svaki rasterska slika mogu se pretvoriti u vektorski oblik (na primjer, fotografije, skenirane slike ili rasterski crteži teško se vektoriziraju). Ali jednostavno je glupo konvertovati posebno pripremljene vektorske crteže (kao što su crteži linija, piktogrami, tehničke ilustracije, karte, informacione grafike i druge koje su istorijski vektorske) u rasterski oblik za objavljivanje na internetu, što se danas dešava svuda.

Problemi s prikazivanjem vektorske grafike na World Wide Webu nastali su jer nije postojao drugi način prikaza osim rasterskog, a ugrađeni modul koji se pojavio za prikaz datoteka u PDF formatu nije pružao adekvatnu fleksibilnost i zahtijevao je pohranjivanje svih sadržaja u jednom obliku - PDF.

Kako bi se omogućila mogućnost neprimetnog ugrađivanja vektorske grafike u tradicionalni HTML format bez ikakvog dodatnog softvera, odbor za standarde W3C trenutno razmatra dva nova vektorska standarda: PGML (Precision Graphics Mark-up Language) i VML (Vector Mark-up Language) ). PGML podržavaju Adobe Systems, IBM, Netscape i Sun Microsystems, a VML podržavaju Microsoft, Hewlett-Packard, Autodesk, Macromedia i Visio. Oba standarda su zasnovana na ekstenzijama XML markup jezika, promovirane za upotrebu na webu kao nasljednika HTML-a i preporučene od strane W3C za buduću upotrebu.

Ali trenutno, nijedan od pretraživača ne podržava standarde vektorske grafike, iako su dodatni moduli (Plug-ins) već dostupni. Među najpopularnijim načinima za prikazivanje statičnih vektorskih slika na Webu danas su Macromedia-in SWF (Shockwave Flash) format i još uvijek podcijenjeni Xara Flare format.

bljesak- dobra odluka, koji omogućava uključivanje vektorskih slika koje omogućavaju gotovo neograničeno povećanje nivoa detalja stranice, dok su njihove veličine uporedive sa Shockwave Flash-om. To ne znači da je korištenje dodatnih modula za gledanje slika toliko nezgodno, ali kada koristite takve alate na svojim stranicama, obavezno upozorite korisnika na to i dajte mu priliku da preuzme odgovarajući modul prije nego što ode na stranicu koji će uključivati ​​ove elemente. Kratkoročno, ovo će naravno usporiti proces pretraživanja za novim korisnicima

, ali postepeno ćete steći sve više i više pristalica dok se odgovarajući alati konačno ne uključe u sljedeću verziju pretraživača i početnicima više ne bude potreban dodatni modul.

Animacija, interaktivnost i interakcija Uopšteno govoreći, GIF slike se mogu složiti kao poseban stog u jednu datoteku, a rezultirajući „film“ (flipbook) može se reproducirati kreiranjem jednostavne rasterske animacije. I Netscape i Microsoft pružaju podršku za animirane GIF-ove od svojih trećih verzija svojih pretraživača, tako da je njihovo prisustvo na Webu sada teško izbjeći. Brojni GIF animatori koji vam omogućavaju da kreirate slične GIF stekove su široko rasprostranjeni (i komercijalni i javno dostupni). Međutim, "revitalizacija" GIF formata može dovesti do nekontrolisanog

veličine fajlova

, jer je svaki "nivo" takvog steka pojedinačna GIF slika, tako da tipičnih 15 frejmova u sekundi za kompjutersku animaciju može "proizvesti" bezbroj kilobajta.

U kombinaciji sa Javom ili JavaScript-om, možete kreirati interaktivnu animaciju koja će odgovoriti korisniku. Sada pogledajmo druga rješenja za web animaciju i interaktivnu interakciju korisnika, a glavnu ulogu ovdje i dalje ima Macromedia, koja je odavno ušla na tržište sa svojim Shockwave i Flash programima i stalno unapređuje svoje proizvode, povećavajući njihovu efikasnost u skladu sa sa potrebama korisnika i dizajnera. Prvobitno kreiran kao format za Macromedia Director, Shockwave je porodica protokola usmjerenih prvenstveno na proizvodnju interaktivnog i grafičkog sadržaja kreiranog posebno za korištenje na Internetu. Šta je Shockwave Flash? jedinstveni instrument da kreirate animaciju i objavite je na web stranici. Shockwave Flash proizvodi veoma male datoteke (pošto koristi pretežno vektorski format predstavljanja) i, u poređenju sa drugim formatima, najpogodniji je sa tačke gledišta pripreme.

Prilikom objavljivanja takve animacije na svojim stranicama, ne zaboravite obavijestiti korisnika o tome kako bi unaprijed mogao nabaviti dodatni modul i pripremiti se za dosadno čekanje preuzimanja. Međutim, najnovije verzije i Netscape Navigatora i Internet Explorer imaju module za pregled Flash animacija čak iu osnovnom paketu. Netscape je potvrdio da će buduće verzije Navigatora imati ovu podršku za Flash, čak i na nivou koda.

Konačna odluka je vaša

Dakle, mijenja se odnos prema prezentaciji web sadržaja, pojavljuju se novi formati podataka i razvojni alati koji ih podržavaju. Međutim, stariji formati (GIF i JPEG za prezentaciju grafike) su i dalje prilično popularni. Podržavaju ih skoro svi pretraživači, a većina programera ima veliko iskustvo u radu s njima. Važno je koristiti pravi format za određenu svrhu kako biste osigurali ravnotežu između kvaliteta slike i veličine datoteke. Na primjer, jedna slika u GIF formatu može zauzeti više prostora i dati rezultat nižeg kvaliteta nego u JPEG formatu, dok će za drugu biti suprotno.

Međutim, kada predstavljate rasterske slike, PNG postaje preferirani format, a ako odete još dalje i pokušate koristiti vektorsku sliku, onda vam je Macromedia Shockwave Flash format danas na usluzi.

SWF (Shockwave Flash) format nije uobičajeno korišten, već interni vektorski format Flash programi Macromedia (pogledajte „Lekcije Macromedia Flash"na CD-ROM-u), pa da biste dobili svoju sliku ili animaciju, morat ćete kupiti odgovarajući multimedijalni paket od Macromedia, a korisnik će morati instalirati dodatni modul za vizualizaciju rezultata.

Dakle, da biste jednostavno postavili vektorsku sliku na svoju web stranicu, morat ćete prevladati niz neugodnosti.

Međutim, drugi vektorski formati su na putu i uskoro će postati standardni.

ComputerPres 5"1999 (Tabela P 1). Atributi ove oznake postavljaju sve parametre slike postavljene na stranicu. SRC atribut je obavezan, definirajući adresu i naziv grafičke datoteke. Ako SRC atribut nije postavljen, prikazat će se samo ikona prazne slike.

Struktura oznake sa atributom SRC izgleda ovako:

.

Ako grafički fajl pod nazivom Institut se nalazi u istom folderu kao i web stranica, a za njegovo postavljanje potrebno je napisati:

.

Ime datoteke Format

Da biste postavili grafički fajl sa imenom MINSK, koji se nalazi na D:\Collection\Cities\MINSK.GIF, treba da napišete .

Korištenje oznake Web stranica sadrži grafičku datoteku koja se nalazi na drugom računaru na Internetu.

Da biste napravili web stranicu sa fotografijom našeg instituta, koja je prikazana na sl. 4.1, potrebno je da unesete sledeći HTML kod:

Naš institut

Rice. 4.1. Web stranica sa fotografijom instituta

U gornjem primjeru, visina fotografije (HEIGHT) je 200 piksela, a širina (WIDTH) je 300 piksela. Da biste postavili fotografiju, kreira se pasus sa poravnanjem po sredini.

Horizontalne linije

Horizontalne linije se postavljaju na web stranicu pomoću jedne oznake

---

. Atributi SIZE, WIDTH, COLOR i ALIGN mijenjaju debljinu, širinu, boju i poravnanje linija, respektivno.

Pogledajmo nekoliko primjera kako bismo objasnili postavljanje horizontalnih linija:

1.

---

- vodoravna linija preko cijele stranice, debljine 2 piksela.

2.

---

WIDTH = "200" ALIGN="RIGHT"> – horizontalna linija zelene boje, debljine 15 piksela, širine 200 piksela i poravnata udesno.

3.

---

– horizontalna plava linija koja pokriva cijelu stranicu, debljine 25 piksela.

4.

---

WIDTH = "300" ALIGN = "LEFT"> – horizontalna linija crvene boje, debljine 20 piksela, širine 300 piksela i poravnata na lijevo.

Prikaz linije za četiri snimljena primjera prikazan je na Sl. 4.2.

Rice. 4.2. Redovi na web stranici

TABLE

Kreiranje tabela

Tabela se kreira pomoću uparene oznake

… . Ova oznaka kreira tabelu na lokaciji gde je dodata
u HTML kodu.

Svaka tabela se sastoji od redova, a redovi – od ćelija. Sljedeće oznake se koriste za formiranje redova i ćelija tabele:

... – nova linija;

... – ćelija zaglavlja;

... – obična ćelija tabele.

Ove oznake su napisane unutar uparene oznake

… .

Tablica se formira red po red - prvo se navede jedan red i u njemu se naznači potreban broj ćelija, zatim drugi red itd.

Da biste dobili tabelu prikazanu na sl. 5.1, potrebno je da unesete sljedeći HTML kod:

Rice. 5.1. Tablica stranica

Tekst u ćelijama zaglavlja tabele (Sl. 5.1) je prikazan polupodebljanim fontom i poravnat sa središtem ćelije, dok u regularnim ćelijama tekst nije istaknut i poravnat je ulevo.

Treba napomenuti da je u HTML kodu gornje stranice tag

Automobili	Cijena	Ford	5000	Golf	6000

sadrži atribut BORDER sa vrijednošću "1". To znači da u tabeli prikazanoj na sl. 5.1, debljina vanjske granice je
1 piksel. Ako pišemo

… ,

tada će debljina vanjskog ruba biti 6 piksela. Da biste spriječili prikazivanje granica tablice, morate postaviti atribut BORDER na 0 ili jednostavno izostaviti ovaj atribut.

Grafičke slike postavljene na web stranicu ne samo da doprinose boljoj percepciji informacija, već i čine stranice živopisnijim i pamtljivijim. Možete sami pripremiti grafičke slike ili koristiti usluge dizajnera. Možete koristiti i grafičke biblioteke softverskih proizvoda kao što je Microsoft Office, CorelDraw, itd.

Postavimo grafičku sliku iz Clip Art biblioteke uključene u Microsoft Office na početnu stranicu web stranice koju kreiramo. Da biste to učinili, slijedite ove korake:

1. Otvorite kreiranu web stranicu.
2. Otvori početna stranica dvostrukim klikom na naziv datoteke index.htm na panelu Lista foldera(Lista foldera).
3. Na meniju Insert(Insert) odaberite komandu Crtanje Slike(Clip Art). Panel se pojavljuje u prozoru programa FrontPage Umetanje slike(Umetnuti Clip Art).
4. Izaberite komandu sa ovog panela Zbirka slika(Medijska galerija). Otvara se dijaloški okvir koji vam omogućava da odaberete grafičku sliku (slika 15.8).

Rice. 15.8.

Na vrhu dijalog box-a, pored dugmadi koja kontrolišu prikaz objekata prikazanih u prozoru, kao i kopiranje i brisanje objekata, nalaze se i dugmad za dodeljivanje (pogledajte tabelu).

1. Panel Lista kolekcija sadrži fascikle vašeg računara sa multimedijalnim datotekama, kao i datoteke slika biblioteke Clip Art. Otvorite folder kategorije slika koja vas zanima. IN radni prostor slike ove kategorije će se pojaviti u prozoru. Kada postavite kursor na sliku, vidljiv je hint koji označava naziv, veličinu slike i fajla koji sadrži, kao i format grafičke slike (Sl. 15.9).

1. Kliknite na dugme sa strelicom na desnoj strani odabrane slike. Pojavljuje se kontekstni meni.
2. Izaberite komandu iz kontekstnog menija Kopiraj(Sora).
3. Idite na web stranicu i zalijepite sliku iz međuspremnika na nju koristeći bilo koji pogodan alat. Na primjer, pritisnite kombinaciju tipki +.
4. Spremite web stranicu koja sadrži grafičku sliku klikom na dugme Sačuvaj(Sačuvaj) na standardnoj traci sa alatkama. Pojavljuje se dijaloški okvir Čuvanje ugrađenih fajlova(Save Embedded Files) (Slika 15.10), nudeći da sačuvate sliku postavljenu na stranici u fasciklu slike Web stranica pod imenom pod kojim se datoteka nalazi u biblioteci. Ovaj prozor sadrži sljedeća dugmad:
   • Preimenuj(Preimenuj) - omogućava vam da preimenujete datoteku.
   • Promijeni folder(Promeni fasciklu) - otvara dijaloški okvir Promijeni folder(Promeni fasciklu), koji sadrži fascikle trenutne Web lokacije, omogućavajući vam da izaberete drugu fasciklu za čuvanje datoteke.
   • Akcija(Set Action) otvara dijaloški okvir akcioni zadatak, omogućavajući promjenu vrijednosti Sačuvaj Sačuvajte kolonu Akcija u Ne štedi(Ne čuvaj pri odabiru vrijednosti). Sačuvaj Crtež je sačuvan u fascikli Web lokacije koju ste naveli, inače će veb stranica sadržati vezu do slike koja se nalazi u biblioteci Clip Art.

Region Crtanje(Pregled slike) prikazuje sliku koja se postavlja. Postavljanjem u dijaloškom okviru Čuvanje ugrađenih fajlovaželjene parametre, pritisnite dugme OK. Grafička datoteka će biti sačuvana u fascikli Web lokacije koju ste naveli.

Rice. 15.10.

Postavljanje grafičke slike iz datoteke

Pogledali smo postavljanje grafičke slike iz biblioteke Clip Ait na web stranicu. Da biste postavili grafičku sliku iz datoteke na stranicu, učinite jedno od sljedećeg:

• Na meniju Insert(Insert) odaberite komandu Crtanje(Slika), a zatim u podmeniju koji se otvori - opcija Iz fajla(Iz fajla)
• Kliknite na dugme Dodajte sliku iz datoteke(Insert Picture From File) na standardnoj traci sa alatkama
• Kliknite na dugme Dodajte sliku iz datoteke(Ubaci sliku iz datoteke) na traci sa alatkama Crteži(slike)

Kada izvršite bilo koju od ovih radnji, otvara se dijaloški okvir Crtanje(Slika) (Sl. 15.11). Pomoću ovog prozora pronađite potrebnu grafičku datoteku i kliknite na dugme da je postavite na web stranicu Insert(Insert). Okvir za dijalog će se zatvoriti i slika će biti postavljena na stranicu.

Rice. 15.11.

Podešavanje svojstava slike

Nakon postavljanja slike na web stranicu, potrebno je da konfigurišete njena svojstva koristeći dijaloški okvir Svojstva slike(Svojstva slike) (Sl. 15.12). Da biste ga otvorili, kliknite na sliku, a zatim uradite nešto od sljedećeg:

• Na meniju Format(Format) odabir naredbe Svojstva(Svojstva)
• Odaberite tim kontekstni meni Svojstva slike(Svojstva slike)
• Pritisnite kombinaciju tastera +

Dijaloški okvir Svojstva slike sadrži tri kartice: Generale(Općenito), Video snimanje(video) Pogled(Izgled). Pogledajmo bliže opcije prilagođavanja pomoću ovog prozora.

Boje u tabeli

Kako napraviti tabelu na stranici

Liste unutar lista

Liste definicija

Numerisana lista

Označena lista

Kako napraviti listu na stranici

Postoje tri glavne vrste lista: liste sa nabrajanjem, numerisane i liste definicija. Glavna razlika između navedenih tipova je način i struktura numeracije.

Najčešće korišteni je nenumerirani ili bulleted list. Lista sa nabrajanjem je određena oznakama, a stavke liste između ovih oznaka su specificirane oznakom

.

Numerisana lista veoma podseća na obeleženu. Jedina razlika je u tome što se u numerisanoj listi automatski stavljaju redni brojevi ili slova ispred svake stavke umesto grafičkih markera.

Numerisana lista je specificirana pomoću oznaka. Kao u bulleted list, svaka stavka je specificirana oznakom

. Prema zadanim postavkama, HTML liste se automatski numeriraju arapskim brojevima - 1,2,3, itd. Možete odrediti drugačiji način numeriranja. Da promijenite zadanu vrstu numeriranja, dodajte u oznaku

ključna riječ TAPE.

TAPE=1 – Standardno numerisanje (1,2,3,4,5, …)

TAPE=A – Velika slova (A, B, C, D, …)

TAPE=a – Hitna slova (a, b, c, d, …)

TAPE=I – rimski brojevi (I, II, III, IV, …)

TAPE=i – Mali rimski brojevi (i, ii, iii, iv, …)

Liste definicija izgledaju malo drugačije od drugih vrsta lista. U ovom slučaju, dvije oznake se koriste za opisivanje svake stavke liste, a ne jedna oznaka

1. . Tag
   specificira poseban element, odnosno definirani termin i oznaku
   - ostatak informacija, koji se prikazuje u sljedećem redu, uvučen. Drugi red informacija se zove definicija. Lista definicija je specificirana na isti način kao i druge liste. Jedina razlika je u tome što svaki element zahtijeva dvije oznake.

   Jedna od sjajnih stvari kod lista je to što se mogu ugniježditi jedna u drugu. Ugniježđenje liste unutar liste je isto kao i jednostavno kreiranje liste. Za ovo ne postoje posebni HTML oznake. Da ne biste zbunili pretraživač, obavezno zatvorite svaku internu listu oznakom. Možete čak i ulagati jedno u drugo razne vrste liste.

   Pustite sve gore navedene liste

   Liste imaju jedan nedostatak - one su jednodimenzionalne. To znači da informacije možete postaviti samo na uzastopne linije. Tabele vam omogućavaju da podatke rasporedite ne samo u redove, već i u stupce.

   Nekoliko oznaka se koristi za definiranje tabela. Oznake

   I uokviruju cijelu tabelu, a brojne druge oznake određuju kako će informacije biti prikazane. Tabela pokazuje puni opis table tags.

   
   
   

   HTML oznake za pravljenje tabela:

   Oznake Opis

   i Ove oznake pokrivaju sto. Tag

   govori pretraživačima da je ono što slijedi opis tabele. Ako želite da mreža bude vidljiva koja razdvaja redove i stupce, dodajte ključnu riječ BORDER.

   se pojavljuje kao zaglavlje. Također možete koristiti oznake za postavljanje naslova I.

   Oznake prikazuju tekst kao naslove redova ili kolona u malo većem, podebljanom fontu.

   I Oznake definišu svaki red tabele. Tag nije obavezno, ali čini vaš HTML kod potpunijim i razumljivijim.

   Ovaj par oznaka odvaja tekst svake ćelije tabele.

   Kreirajte datoteku u kojoj ćete napraviti tabelu od pet redova i pet kolona.

   Postoji veliki broj oznaka koje vam omogućavaju da postavite boje pozadine i mreže tabele. U prvom slučaju, ključna riječ BGCOLOR se ubacuje u oznaku

   i Tekst označen ovim oznakama je

   I
   I

   sljedeće slike:

   Osim ključne riječi BGCOLOR, postoje i drugi načini kontrole boje:

   BORDERCOLOR Promijenite boju mreže tabele

   BORDERCOLORDARK/ Koristi se za promjenu mreže sa

   BORDERCOLORLIGHT sa dodatnim trodimenzionalnim efektom

   Promijenite boju mreže tablice sa 3D efektom.

   Lekcija 12-13. Korišćenje grafike

   Slike i grafike su veoma važne na WWW-u. Ovo je jedini internetski alat koji vam omogućava da istovremeno gledate slike i tekst na ekranu.

   Da biste postavili sliku na web stranicu, morate znati kako primijeniti oznaku . Unesite oznaku i ključnu riječ SRC= da odredite koju grafiku treba učitati.

   

   Kada unosite ovu oznaku, imajte na umu da datoteka mora biti u istoj fascikli kao i vaša HTML datoteka.

   HTML slike dodano na web stranice pomoću oznake . Upotreba grafike čini web stranice vizualno privlačnijim. Slike pomažu da se bolje prenese suština i sadržaj web dokumenta.

   Korištenje HTML oznaka

   Umetanje slika u HTML dokument

   1. Tag

   Element predstavlja sliku i njen rezervni sadržaj, koji se dodaje pomoću atributa alt. Od elementa je mala slova, preporučuje se da ga postavite unutar blok elementa, na primjer,

   Or

   .

   Tag ima potreban src atribut čija je vrijednost apsolutna ili relativna putanja do slike:

   

   Za oznaku Dostupni su sljedeći atributi:

   Tabela 1. Atributi oznake

   Atribut	Opis, prihvaćena vrijednost
   alt	Atribut alt dodaje alternativni tekst slici. Prikazuje se na mjestu gdje se slika pojavljuje prije nego što je učitana ili kada je grafika onemogućena, a također se prikazuje kao savjet kada pređete mišem preko slike. Sintaksa: alt="opis slike" . !}
   crossorigin	Atribut crossorigin vam omogućava da učitate slike iz resursa na drugom domenu koristeći CORS zahtjeve. Slike učitane u platno pomoću CORS zahtjeva mogu se ponovo koristiti. Dozvoljene vrijednosti: anoniman - Zahtjev za više porijekla je napravljen pomoću HTTP zaglavlja i ne prenose se vjerodajnice. Ako server ne pruži vjerodajnice serveru od kojeg se traži sadržaj, slika će biti oštećena i njena upotreba će biti ograničena. use-credentials — Zahtjev za više porijekla se izvodi prosljeđivanjem vjerodajnica. Sintaksa: crossorigin="anonimno" .
   visina	Atribut visine određuje visinu slike u px. Sintaksa: visina="300" .
   ismap	Atribut ismap označava da je slika dio slike karte koja se nalazi na serveru (slika karte je slika sa područjima na koja se može kliknuti). Kada kliknete na sliku karte, koordinate se šalju serveru kao URL upitni niz. Ismap atribut je dozvoljen samo ako je element je potomak elementa sa važećim href atributom. Sintaksa: ismap.
   longdesc	Prošireni URL opisa slike koji nadopunjuje atribut alt. Sintaksa: longdesc="http://www.example.com/description.txt" .
   src	Atribut src specificira putanju do slike. Sintaksa: src="flower.jpg" .
   veličine	Postavlja veličinu slike u zavisnosti od opcija prikaza. Radi samo kada je specificiran atribut srcset. Vrijednost atributa je jedan ili više nizova, odvojenih zarezima.
   srcset	Kreira listu izvora slike koji će biti odabrani na osnovu rezolucije ekrana. Može se koristiti zajedno sa ili umjesto src atributa. Vrijednost atributa je jedan ili više nizova, odvojenih zarezima.
   usemap	Atribut usemap specificira sliku kao mapu slike. Vrijednost mora početi simbolom #. Vrijednost je pridružena vrijednosti atributa imena ili id ​​oznake
   širina	Atribut širine određuje širinu slike u px. Sintaksa: width="500" .

   1.1. Adresa slike

   Adresa slike može se navesti u cijelosti (apsolutni URL), na primjer:
   url (http://anysite.ru/images/anyphoto.png)

   Ili putem relativnog puta od dokument ili korijenski direktorij web stranica:
   url(../images/anyphoto.png) - relativna putanja iz dokumenta,
   url(/images/anyphoto.png) - relativna putanja iz korijenskog direktorija.

   Ovo se tumači na sljedeći način:
   ../ - znači ići jedan nivo gore, do korijenskog direktorija,
   slike/ - idite na folder sa slikama,
   anyphoto.png - pokazuje na datoteku slike.

   1.2. Dimenzije slike

   Bez podešavanja dimenzija slike, crtež se prikazuje na stranici u stvarnoj veličini. Možete urediti dimenzije slike koristeći atribute širine i visine. Ako je naveden samo jedan od atributa, drugi će se automatski izračunati kako bi se zadržale proporcije crteža.

   1.3. Formati grafičkih datoteka

   JPEG format (Zajednička grupa stručnjaka za fotografiju). JPEG slike su idealne za fotografije i mogu sadržavati milione različitih boja. Slike se kompresuju bolje od GIF-ova, ali tekst i velike površine pune boje mogu postati mrlje.

   GIF format (Format za razmjenu grafike). Idealno za kompresiju slika koje imaju područja pune boje, kao što su logotipi. GIF-ovi vam omogućavaju da postavite jednu od boja da bude transparentna, omogućavajući da se pozadina web stranice prikazuje kroz dio slike. GIF datoteke također mogu uključivati jednostavna animacija. GIF slike sadrže samo 256 nijansi, zbog čega slike izgledaju mrljavo i nerealno u boji, poput postera.

   PNG format (Prenosiva mrežna grafika). Uključuje najbolje karakteristike GIF i JPEG formata. Sadrži 256 boja i omogućava da jednu od boja učinite transparentnom, dok komprimirate slike u manju veličinu od GIF datoteke.

   APNG format (Animirana prijenosna mrežna grafika). Format slike zasnovan na PNG formatu. Omogućava vam pohranjivanje animacije i također podržava transparentnost.

   SVG format (Skalabilna vektorska grafika). SVG crtež se sastoji od skupa geometrijskih oblika opisanih u XML formatu: linija, elipsa, poligon, itd. Podržane su i statične i animirane grafike. Skup funkcija uključuje različite transformacije, alfa maske, efekte filtera i mogućnost korištenja šablona. Veličina SVG slika se može promijeniti bez gubitka kvaliteta.

   BMP format (bitmap slika). To je nekompresovana (originalna) bitmap slika čiji je predložak pravokutna mreža piksela. Bitmap datoteka se sastoji od zaglavlja, palete i grafičkih podataka. Zaglavlje pohranjuje informacije o grafičkoj slici i datoteci (dubina piksela, visina, širina i broj boja). Paleta je naznačena samo u onim Bitmap datotekama koje sadrže slike palete (8 ili manje bitova) i koje se sastoje od najviše 256 elemenata. Grafički podaci predstavljaju samu sliku. Dubina boje u ovom formatu može biti 1, 2, 4, 8, 16, 24, 32, 48 bita po pikselu.

   ICO format (ikona za Windows). Format pohrane ikone datoteke u Microsoft Windows. Takođe, Windows ikona se koristi kao ikona na web stranicama na Internetu. To je slika ovog formata koja se prikazuje pored adrese web stranice ili markera u pretraživaču. Jedna ICO datoteka sadrži jednu ili više ikona, od kojih se veličina i boja mogu zasebno podesiti. Veličina ikone može biti bilo koje veličine, ali najčešće su kvadratne ikone sa stranicama od 16, 32 i 48 piksela.

   2. Tag

   Tag

   Oznaka ima dostupan atribut name, koji specificira naziv karte. Vrijednost atributa name za oznaku

   

   Element

   3. Tag

   Tag opisuje samo jednu aktivnu regiju kao dio mape slike na strani klijenta. Element nema završnu oznaku. Ako se jedno aktivno područje preklapa s drugim, implementira se prva veza sa liste područja.

   Tabela 2. Atributi oznake

   Atribut	Kratak opis
   alt	Postavlja alternativni tekst za aktivno područje karte.
   coords	Određuje položaj područja na ekranu. Koordinate su date u jedinicama dužine i odvojene zarezima: Za krug— koordinate centra i polumjera kruga; Za pravougaonik— koordinate gornjeg lijevog i donjeg desnog ugla; Za poligon— koordinate vrhova poligona u traženom redoslijedu, također se preporučuje da se navedu posljednje koordinate, jednake prvoj, za logički završetak slike.
   preuzimanje	Dopunjuje atribut href i govori pretraživaču da bi se resurs trebao učitati u trenutku kada korisnik klikne na vezu, umjesto da ga, na primjer, mora prvo otvoriti (poput PDF datoteke). Specificiranjem imena za atribut, tako dajemo ime učitanom objektu. Dozvoljeno je koristiti atribut bez specificiranja njegove vrijednosti.
   href	Određuje URL za vezu. Može se specificirati apsolutna ili relativna adresa veze.
   hreflang	Određuje jezik pridruženog web dokumenta. Koristi se samo u kombinaciji s atributom href. Prihvaćene vrijednosti su skraćenica koja se sastoji od para slova koja označavaju kod jezika.
   medija	Određuje za koje tipove uređaja će datoteka biti optimizirana. Vrijednost može biti bilo koji medijski upit.
   rel	Proširuje href atribut informacijama o odnosu između trenutnog i povezanog dokumenta. Prihvaćene vrijednosti: alternativna - veza na alternativnu verziju dokumenta (na primjer, štampanom obliku stranice, prevod ili ogledalo). autor — veza do autora dokumenta. bookmark - Trajni URL koji se koristi za oznake. pomoć - link za pomoć. licenca - link do informacija o autorskim pravima za ovaj web dokument. next/prev - označava odnos između pojedinačnih URL-ova. Zahvaljujući ovom označavanju, Google može utvrditi da je sadržaj ovih stranica povezan u logičnom slijedu. nofollow - zabranjuje pretraživač slijedite linkove na ovoj stranici ili određeni link. noreferrer - označava da prilikom praćenja linka pretraživač ne bi trebao poslati HTTP zaglavlje zahtjeva (Referrer), koje bilježi informacije o tome s koje stranice je došao posjetitelj stranice. prefetch - označava da ciljni dokument treba biti keširan, tj. pretraživač u pozadini učitava sadržaj stranice u njenu keš memoriju. pretraga - Označava da ciljni dokument sadrži alat za pretraživanje. tag - specificira ključnu riječ za trenutni dokument.
   oblik	Određuje oblik aktivnog područja na karti i njegove koordinate. Može uzeti sljedeće vrijednosti: rect — pravougaona aktivna oblast; krug — aktivno područje u obliku kruga; poli — aktivno područje u obliku poligona; zadano — aktivno područje zauzima cijelo područje slike.
   cilj	Određuje gdje će se dokument preuzeti kada se klikne na vezu. Prihvata sljedeće vrijednosti: _self — stranica se učitava u trenutni prozor; _blank — stranica se otvara u novom prozoru pretraživača; _parent — stranica se učitava u roditeljski okvir; _top - stranica se učitava u cijelom prozoru pretraživača.
   tip	Određuje MIME tip datoteka linkova, tj. ekstenzija datoteke.

   4. Primjer kreiranja slikovne karte

   1) Označite originalnu sliku u aktivna područja željenog oblika. Koordinate područja mogu se izračunati pomoću programa za obradu fotografija, na primjer, Adobe Photoshop ili Boja.

   Rice. 1. Primjer označavanja slike za kreiranje karte

   2) Podesite naziv kartice dodavanjem na oznaku

   Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers"> !}
   Rice. 2. Primjer kreiranja mape slike, kada kliknete kursorom miša na cvijet, idete na stranicu s opisom