WEB GRAFIKA

Slike se u HTML dokument ubacuju pomocu <img> taga. Ovaj tag mora imati bar jedan atribut, a to je src atribut koji definise naziv (i eventualno lokaciju) grafickog fajla koji zelimo da ubacimo u svoju prezentaciju. Ako smo graficki fajl presnimili u isti folder u kojoj se nalazi i odgovarajuci HTML fajl, dovojlno je da kao vrednost src atributa stavimo samo naziv odgovarajuceg fajla.
Npr. ako zelimo da stavimo sliku "zastava.gif" tada ce odgovarajuci tag glasiti:

Po default-u slike su poravnate sa tekstom na donju ivicu (kao sto se vidi iz gornjeg primera).
Polozaj slike u odnosu na tekst stranice se moze definisati ubacivanjem align atributa u <img> tag. Vrednosti ovog atributa i odgovarajuce efekte mozemo videti iz sledecih primera:

left - postavlja sliku uz levu 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

Odgovarajuci tag glasi:

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

Odgovarajuci tag glasi:

top - poravnava sliku sa vrhom slova u tekucoj liniji (sledeca linija teksta pocinje 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

Odgovarajuci tag glasi:

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

Odgovarajuci tag glasi:

middle - postavlja sliku tako je donja ivica slova na sredini slike (sledeca linija teksta pocinje 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

Odgovarajuci tag glasi:

absmiddle - postavlja sliku tako da se sredina slike i sredina slova poklapaju (sledeca linija teksta pocinje 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

Odgovarajuci tag glasi:

Ako zelim da moja slika bude centrirana koristicu center tag. Na primer:

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

sto se postize sledecim HTML kodom:

Ako niste zadovoljni originalnom velicinom slike, nju mozete definisati pomocu dva atributa: hight i width.
Vrednost sirine i visine stranice se moze zadati ili u piksekima ili u procentima. Ako zelim da zastava iz prethodnih primera zauzima 50% sirine prozora i 30% visine prozora mog browsera, napisacu:

Ako zadate samo height ili samo width atribut, druga dimenzija ce biti uvecana srazmerno sa zadatom tako da se slika nece deformisati.

Prazan prostor izmedju slike i okolnog teksta (ili nekih drugih elemenata vase stranice) moze se definisti pomocu dva atributa: hspace i vspace. Vrednost ova dva atributa se zadaje u pikselima. Ako napisemo:

Vidimo da je sirina margine oko slike 50 piksela.

Slika se moze i "URAMITI" pomocu atributa border cija se vrednost zadaje u pikselima.
Ako zadam debljinu okvira 5 piksela dobicu sledecu sliku:

sto se postize sledecim tagom:

Kao sto se vidi browser ce automatski uramiti sliku koja predstavlja link sa ramom one boje koju ste zadali link i vlink atributima u vasem <body> tagu. Ako ne zelite da vasa slika bude uramljena morate joj zadati border="0" u okviru <img> taga.

Postoji jos jedan koristan atribut <img> taga. To je alt atribut. Ovaj atribut ce u slucaju da browser posetioca vase stranice iz bilo kog razloga ne ucita sliku, na onom mestu gde bi trebalo da stoji slika prikazati tekst koji napisete kao vrednost ovog atributa. Ovo je korisno narocito ako ste sliku postavili kao link, jer ce onda i u slucaju neucitavanja slike vas posetilac znati gde vodi taj link. Preporucujem vam da uvek koristite ovaj atribut i da u njega upisujete tekst koji ukratko opisuje datu sliku. Na primer:

Mislim da je ovo sve sto vam je potrebno da biste uspesno koristili grafiku na vasim web stranicama. U sledecem odeljku ovog udzbenika naucicete kako da na vasim stranicama koristite tabele.