Slike na Internetu najčešće se nalaze u
jednom od slijedeća dva formata:
JPEG (ili JPG)
GIF
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:
čime se dobija slijedeci učinak:
![](tigar.jpg)
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 xxxxx
xxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx
xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx xx xxxxxx
xxxx xxxxx xxxx x
š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">
dobit ćemo:
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
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: ![](tigar.jpg)
š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.
|