HTML KNJIGA

GRAFIKA

Slike na Internetu najčešće se nalaze u jednom od slijedeća dva formata:

U JPEG formatu se obično čuvaju kvalitetnije fotografije jer ovaj format podrzava 16 miliona boja, a fajlovi su dobro komprimirani, tako da se fotografije relativno brzo učitavaju. Sa druge strane GIF format ima samo 256 boja, ali on ima tu prednost da mu se može zadati transparentnost (providnost) i da se može animirati.

Slike se u HTML dokument ubacuju pomoću <img> taga. Ovaj tag mora imati bar jedan atribut, a to je src atribut koji definira naziv (i eventualno lokaciju) grafičkog fajla koji želimo ubaciti u Web stranice. Ako smo grafički fajl usnimili u isti folder u kojoj se nalazi i odgovarajuci HTML fajl, dovojlno je da kao vrijednost src atributa stavimo samo naziv odgovarajućeg fajla.
Npr. ako želimo staviti sliku "tigar.jpg" tada ce odgovarajući tag glasiti:

<img src="tigar.jpg">

čime se dobija slijedeci učinak:

Po default-u slike su poravnate sa tekstom na donju ivicu (kao što se vidi iz gornjeg primjera).
Položaj slike u odnosu na tekst stranice se može definirati ubacivanjem align atributa u <img> tag. Vrijednosti ovog atributa i odgovarajuće efekte možemo vidjeti iz slijedećih primjera:

left - postavlja sliku uz lijevu marginu:

xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx x xxxx xxxxx xxxxxx xxxxx xxxxx xxxxx xxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxx xxxxxxx xxx xxxxxxx xxxxx xxxxxxx xxxxxxx xxx xx xxxx xxxxxx xxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxx xxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx x xxxxx xxxxxx x xxxxx

Odgovarajući tag glasi:

<img src="tigar.jpg" align="left">

right - postavlja sliku uz desnu marginu: 

xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx x xxxx xxxxx xxxxxx xxxxx xxxxx xxxxx xxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxx xxxxxxx xxx xxxxxxx xxxxx xxxxxxx xxxxxxx xxx xx xxxx xxxxxx xxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxx xxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx x xxxxx xxxxxx x xxxxx

Odgovarajući tag glasi:

<img src="tigar.jpg" align="right">

top - poravnava sliku sa vrhom slova u tekućoj liniji (slijedeća linija teksta počinje ispod slike):

xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx x xxxx xxxxx xxxxxx xxxxx xxxxx xxxxx xxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxx xxxxxxx xxx xxxxxxx xxxxx xxxxxxx xxxxxxx xxx xx xxxx xxxxxx xxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxx xxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx x xxxxx xxxxxx x xxxxx

Odgovarajući tag glasi:

<img src="tigar.jpg" align="top">

bottom - poravnava sliku sa donjom ivicom slova (default):

xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx x xxxx xxxxx xxxxxx xxxxx xxxxx xxxxx xxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxx xxxxxxx xxx xxxxxxx xxxxx xxxxxxx xxxxxxx xxx xx xxxx xxxxxx xxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxx xxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx x xxxxx xxxxxx x xxxxx

Odgovarajući tag glasi:

<img src="tigar.jpg" align="bottom">

middle - postavlja sliku tako je donja ivica slova na sredini slike (slijedeća linija teksta počinje ispod slike):

xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx x xxxx xxxxx xxxxxx xxxxx xxxxx xxxxx xxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxx xxxxxxx xxx xxxxxxx xxxxx xxxxxxx xxxxxxx xxx xx xxxx xxxxxx xxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxx xxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx x xxxxx xxxxxx x xxxxx

Odgovarajući tag glasi:

<img src="tigar.jpg" align="middle">

absmiddle - postavlja sliku tako da se sredina slike i sredina slova poklapaju (slijedeća linija teksta počinje ispod slike):

xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx x xxxx xxxxx xxxxxx xxxxx xxxxx xxxxx xxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxx xxxxxxx xxx xxxxxxx xxxxx xxxxxxx xxxxxxx xxx xx xxxx xxxxxx xxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxx xxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx x xxxxx xxxxxx x xxxxx

Odgovarajući tag glasi:

<img src="tigar.jpg" align="absmiddle">

Ako želimo da slika bude centrirana koristimo center tag. Na primjer:

xxxxx xxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx xxxxxx xxxxxxxx xxxxxxxx

što se postiže slijedećim HTML kodom:

<center><img src="tigar.jpg"></center>

Veličinu slike možemo definirati pomoću dva atributa: width i height.
Vrijednost širine i visine stranice se može zadati ili u piksekima ili u postocima. 
Gornje slika ima slijedeće vrijednosti atributa: width="119" i height="139".
Ako želimo da slika iz prethodnih primjera bude proporcionalno četiri puta veća  napisat ćemo:

<img src="tigar.jpg" width="476" height="556">

Ako zadamo samo height ili samo width atribut, druga dimenzija će biti uvećana proporcionalno sa zadanom tako da se slika neće deformirati.

Prazan prostor između slike i okolnog teksta (ili nekih drugih elemenata stranice) može se definirati pomoću dva atributa: hspace i vspace. Vrijednost ova dva atributa se zadaje u pikselima. Ako napišemo:

<img src="tigar.jpg" hspace="50" vspace="50">

Vidimo da je širina margine oko slike 50 piksela.

Slika se može i "uokviriti" pomoću atributa border čija se vrijednost zadaje u pikselima.

Ako zadamo debljinu okvira 5 piksela dobit ćemo slijedeću sliku:

što se postiže slijedećim tagom:

<img border="5" src="tigar.jpg">

Sliku možemo postaviti kao link na slijedeći način:

<a href="stranica1.htm"><img src="tigar.jpg"></a>

Browser ce automatski uokviriti sliku koja predstavlja link sa okvirom one boje koju ste zadali link i vlink atributima u našem <body> tagu. Ako ne želimo da naša slika bude uokvirena moramo joj zadati border="0" u okviru <img> taga.

Postoji još jedan koristan atribut <img> taga. To je alt atribut. Ovaj atribut će u slučaju da browser posjetioca naše stranice iz bilo kog razloga ne učita sliku, na onom mjestu gdje bi trebala stajati slika prikazati tekst koji napišemo kao vrijednost ovog atributa. Ovo je korisno naročito ako ste sliku postavili kao link, jer će onda i u slučaju neučitavanja slike posjetilac znati gdje vodi taj link. Upotrijebit ćemo uvijek ovaj atribut i da u njega upisujemo tekst koji ukratko opisuje danu sliku. Na primjer:

<img src="tigar.jpg" alt="Tigar">

Slika nije pronađena. Kada mišem stanemo na sliku pojavi se opis slike.



Slika je pronađena. Kada mišem stanemo na sliku pojavi se opis slike.

ç

è