WEB GRAFIKA

Verovatno ste vec primetili da se skoro sve slike na internetu nalaze u jednom sledeca dva formata:
  • JPEG (ili JPG)
  • GIF
  • U JPEG formatu se obicno cuvaju kvalitetnije fotografije jer ovaj format podrzava 16 miliona boja, a fajlovi su dobro komprimovani, tako da se fotografije relativno brzo ucitavaju. Sa druge strane GIF format ima samo 256 boja, ali on ima tu prednost da mu se moze zadati transparentnost (providnost) i da se moze animirati.

    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:

    <IMG SRC="zastava.gif"> cime se dobija sledeci efekat:

    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:

    <IMG SRC="zastava.gif" 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


    Odgovarajuci tag glasi:

    <IMG SRC="zastava.gif" ALIGN="right">

    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:

    <IMG SRC="zastava.gif" 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


    Odgovarajuci tag glasi:

    <IMG SRC="zastava.gif" ALIGN="bottom">

    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:

    <IMG SRC="zastava.gif" ALIGN="middle">

    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:

    <IMG SRC="zastava.gif" ALIGN="absmiddle">

    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

    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

    sto se postize sledecim HTML kodom:

    <CENTER><IMG SRC="zastava.gif"></CENTER>


    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:

    <IMG SRC="zastava.gif" HEIGHT="50%" WIDTH="50%"> i dobicu sledeci rezultat:

    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:

    <IMG SRC="zastava.gif" HSPACE="50" VSPACE="50"> dobicemo:
    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 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:

    <IMG SRC="zastava.gif" BORDER="5"> Vasu sliku mozete postaviti kao link na sledeci nacin: <A HREF="spec.html"><IMG SRC="zastava.gif"></A> Ova slika predstavlja link do stranice koja uopste ne postoji vec sluzi samo kao primer:

    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:

    <IMG SRC="zastava.gif" ALT="Jugoslovenska zastava">

    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.

    Linkovi
    nazad
    Index Tabele 1
    napred

    uvod u html dodavanje boja uredjivanje teksta uredjivanje teksta 2 liste
    linkovi tabele tabele 2 marquee kraj