Jedna oznaka se koristi za umetanje slike u tekst web stranice. (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, tada će biti prikazana samo ikona prazne slike.

Struktura oznake sa atributom SRC izgleda ovako:

.

Ako se grafička datoteka pod nazivom Institut nalazi u istom folderu kao i web stranica, onda da biste je postavili trebate 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čki fajl koji se nalazi na drugom računaru u globalna mreža"Internet".

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

Pogledajmo nekoliko primjera da objasnimo postavljanje horizontalnih linija:

1.

2.

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

3.

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. Linije na web stranici

TABLE

Kreiranje tabela

Tabela se kreira pomoću uparene oznake

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 je naveden 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

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.

Kao što je rečeno, HTML je danas osnova za pisanje bilo koje web stranice World Wide Web. At koristeći CSS HTML kodiranje se dramatično mijenja. Možete se oprostiti od prenamjene nezgrapnih HTML oznaka samo da biste postigli određene vizualne efekte. O nekim HTML oznakama ili atributima, kao što je zastarjela oznaka...

Dom

Naručite web stranicu i počnite poslovati!

Ova fraza se može čuti i vidjeti na mnogim stranicama, a to nije uzalud!

Website — ovo je lice kompanije. I to je najsavremeniji i najefikasniji kanal komunikacije sa potencijalnim potrošačima. Samo mogućnosti internet stranice omogućavaju vam da u potpunosti koristite sve metode prenošenja informativne poruke korisniku. Tekstualne, audio i video informacije mogu biti predstavljene u okviru jedne stranice kako bi se potrošači upoznali s njima.

Korišćenjem softver Na stranici možete primati plaćanja, razgovarati telefonom, održavati baze podataka, slati i primati faksove, razmjenjivati ​​SMS poruke i obavljati mnoge druge radnje. Moderna Internet stranica je informativni centar ne samo za svaku kompaniju, već i za svakog korisnika Interneta.

A ovo je način na koji svi pobjeđuju da efikasno i istovremeno jednostavno i jasno prenesete svoje ideje ili razvoje najširoj publici. I danas, web dokumenti napisani u hipertekstualnom jeziku za označavanje HTML i dalje ostaju glavni oblik prezentacije podataka u web okruženju.

Najvažnije prednosti HTML-a su:

• jednostavnost, koja vam omogućava da naučite HTML u najkraćem mogućem roku.
• mogućnost kreiranja vlastitih web stranica
• i HTML radi potpuno isto na svim platformama koje danas postoje, nema potrebe za kupovinom dodatne opreme. I dovoljno je koristiti bilo koji dostupan uređivač teksta, na primjer Notepad.

Na ovom sajtu sam pokušao da detaljno opišem ceo proces izrade sopstvenog Web sajta, odnosno objavljivanje gotovog projekta na Internetu kako bi se omogućio pristup istom svim korisnicima.

Nadam se da će moji članci biti veoma korisni mnogima, jer ja nisam programer, ali sam veoma inspirisan ovim radom.

Grafika i promet

Zahtjevi za ljepotom i izražajnošću dizajna web stranica su u stalnom sukobu tehničke mogućnosti moderan web hosting. 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.

Da biste razumjeli veliki broj formata i protokola prihvaćenih na Internetu i napravili svoju 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.

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 poseban softver (ili dodatne module). GIF i JPEG su formati rasterskih slika, što, shodno tome, određuje fiksni format (rezoluciju) kada se takve slike prikazuju na ekranu. Kada pokušate skalirati (predviđeno u nekim pretraživačima), rasterske (pikselske) slike značajno gube kvalitet.

Za 8-bitni (256 boja) GIF format, izbor palete boja takođe predstavlja ozbiljan problem.

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 Shockwave Flash vektorski format drugim programerima i implementirala dodatne module za gledanje 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, a na vama je da odlučite koje slike najbolje odgovaraju vašoj ciljnoj publici.

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 bilo koju platformu (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. Međutim, upravo zbog ovih ugrađenih ograničenja boja, GIF format se može koristiti samo za slike koje imaju ograničen broj boja – kao što su crno-bijeli dijagrami ili one koje sadrže velike površine jedne boje, kao npr. okviri za crtane filmove ili digitalni crteži sa punim bojama. Naravno, možete sačuvati bilo koju sliku

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 koja ima velike površine iste boje, ili obradite postojeću sliku i želite je sačuvati visok kontrast(neophodan, na primjer, kod prikazivanja teksta), zatim sačuvajte u ovom formatu (prvenstveno se odnosi na crno-bijele ili crteže loše boje).

Za fotografije, video snimke 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 smislu 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 se zasniva na algoritmu kompresije sa gubitkom (diskretna kosinusna transformacija), koji razbija vašu sliku na regione (obično kvadrate 8x8 piksela) unutar kojih je distribucija boja zamenjena 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 vernija originalu 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

Predstavnik sledeće generacije rasterskih formata, PNG, uzeo je najbolja svojstva i iz JPEG-a i iz GIF-a i dodao svoj, jedinstven pristup prezentaciji slike, koji omogućava da se ona ugradi u jedan fajl. različite verzije ista slika za nisku, srednju i visoku rezoluciju.

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 tradicionalnih formata za pohranu. rasterske slike.

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.

JPEG format Podrška za transparentnost u za razliku od GIF-a, on je punopravan, odnosno možete graditi prozirne slike ili ivice, tako da se problem "čistih" granica, koji je tako teško riješiti kada koristite transparentnost u GIF datoteci, ovdje lako prevladati.

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 da sami instaliraju vanjski modul (slično 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 može se svaka rasterska slika pretvoriti u vektorski oblik (na primjer, fotografije, skenirane slike ili rasterske crteže je teško vektorizirati). 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 sa prikazom vektorska grafika na World Wide Webu je nastao 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.

baklja- 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 pregledavanja za nove korisnike, 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 preglednika i početnicima više ne budu potrebni 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 stvaranje takvih GIF stekova 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 sličica 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 prema zahtjevima korisnika i dizajnera. 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 bitmap slike, PNG postaje poželjniji, a ako odete još dalje i pokušate koristiti vektorska slika, onda vam je danas na usluzi Shockwave Flash format iz Macromedia.

SWF (Shockwave Flash) format nije uobičajeno korišten, već interni vektorski format Flash programi od Macromedia (pogledajte “Macromedia Flash lekcije” 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 rezultat.

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

Postoje dva načina postavljanja grafičke slike na stranici:

• umetanje pojedinačnih slika;
• popunjavanje pozadine slikom.

U svakom slučaju, grafička slika je preuzeta iz datoteke.

Umetanje grafike

Umetanje grafičke slike iz datoteke grafičkog formata na stranicu se vrši pomoću oznake (sa engleskog, slika - slika) navodeći adresu datoteke kao argument SRC atribut:

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

Adresa grafičke datoteke je ili URL ili naziv datoteke, moguće sa putanjom. Na primjer, da biste prikazali grafičku datoteku logotip.jpg trebali biste napisati oznaku:

< IMG SRC = "logotip.jpg" >

Za povećanje brzine prijenosa grafičke slike u oznaci možete koristiti atribut ( dodatni parametar) LOWSRC, koji uzima adresu grafičke datoteke kao argument. Možete kreirati dvije grafičke datoteke: jedna (na primjer, recimo logotip.jpg) sadrži sliku visoke rezolucije, a druga (na primjer, logotip.gif) sadrži sliku niske rezolucije. Zatim oznaka:

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

...nalaže pretraživaču da prvo preuzme datoteku logotip.gif, a zatim je zamijeni datotekom logotip.jpg čim bude primljena.

Drugi način da se ubrza učitavanje grafike je postavljanje veličine pravokutnog područja u koje će se grafika postaviti pomoću atributa WIDTH(širina) i VISINA(visina), mjereno u pikselima. Ako navedete ove atribute, pretraživač će prvo dodijeliti prostor za grafiku, pripremiti izgled dokumenta, prikazati tekst i tek onda učitati grafiku. Imajte na umu da pretraživač komprimira ili rasteže sliku kako bi se uklopila u određenu veličinu okvira. Primjer specificiranja dimenzija slike:

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

Grafika se obično koristi zajedno s tekstom, pa se javlja izazov usklađivanja teksta i grafike. Ovaj problem se rješava korištenjem atributa ALIGN tag koristeći razne argumente. Na primjer, možda želimo da tekst teče oko slike desno ili lijevo. Obično je slika usko povezana sa tekstom, što može biti ružno. Da biste to izbjegli, možete postaviti prazne margine oko ilustracije. Polja se kreiraju pomoću atributa VSPACE za gornje i donje margine i NSPACE za bočne margine u oznaci . Argumenti ovih atributa navedeni su kao brojevi koji određuju veličinu polja u pikselima. Da biste otkazali prelamanje teksta oko grafike, koristite oznaku
.

Sljedeća oznaka postavlja grafiku iz datoteke logotip.jpg da se premota udesno (slika će se nalaziti lijevo od teksta):

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

Ako želite da postavite sliku desno od teksta, onda vam je potreban atribut ALIGN dodijeliti argument PRAVO:

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

Da biste postavili polja oko slike, morate napisati oznaku kao što je:

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

Ovdje brojevi 20 i 10 određuju veličinu polja.

Pogledajmo primjer dijeljenje grafike i tekstove. Otvori Notepad ( uređivač teksta Notepad) Windows. Napišite HTML kod u njemu koristeći oznake o kojima smo gore govorili. Ispod je program koji daje neki tekst i grafiku. Možete koristiti bilo koju datoteku koju imate kao grafičku datoteku. Datoteka koja se ovdje koristi je logotip.gif.

< HTML >

< HEAD >

< TITLE >Vježba 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

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

< H1 >Tekst se prelama oko grafike na desnoj strani< / H1 >

Široke mogućnosti za precizno pozicioniranje slika (kao i drugih elemenata) na stranici pružaju stolovi I stilova. Ove HTML elementiće se raspravljati kasnije. Na primjer, možete definirati tabelu bez vidljivih okvira i smjestiti slike, tekstove i druge elemente u ćelije ove tablice.

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 numeracije i struktura.

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