Kompjuter Biblioteka

WEB dizajn 7.deo

SLIKE U OKVIRU HTML-A

Izdvajamo iz ponude:



Slika koja se prikazuje u okviru HTML stranice može da se prikaže pomoću proizvoljnog grafičkog formata. Ipak najčešće se koriste formati JPEG (ili JPG) i GIF . Razlog je veličina slike kao dokumenta i teškoće pri učitavanju. Ova dva formata koriste efikasne metode kompresije i n ataj način se povećavaju perfomanse aplikacije. U JPEG formatu se čuvaju kvalitetnije slike, jer ovaj format podržava 16 miliona boja, a fajlovi su efikasno komprimovani, tako da se slike 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 i da se moze animirati. U okviru HTML stranice slika se prikazuje pomoću <img> taga .

Ovaj tag mora imati bar jedan atribut. To je src atribut koji definiše naziv, i eventualno lokaciju, grafičkog fajla koji želimo da prikažemo u okviru svoje prezentacije. Pri opisu lokacije dokumenta najjednostavniji slučaj je da se dokument slike nalazi u istom direktorijumu gde i HTML stranica. Tada je dovoljno da kao vrednost src atributa postaviti samo naziv odgovarajućeg dokumenta. Na primer da bi se prikazla slika sa imenom "osam.gif" na HTML stranici tada će odgovarajući tag glasiti:

 <img src="slika.gif" _fcksavedurl="slika.gif">na stranici se prikazuje: Tag IMG može imati različite atribute koji omogućavaju da se precizno opišu položaj, dimenzije i odnos slike prema drugim delovima stranice.
 Ti atributi su:
• Atribut za poravnavanje slike u odnosu na margine ALIGN ... može imati vrednosti o za vertikalno poravnavanje: TOP, MIDDLE, BOTTOM o za horizontalno poravnjavanje: LEFT, CENTER, RIGHT
• Atributi za dimenzionisanje slike su WIDTH (širina) i HEIGHT (visina).
• Atributi koji opisuju položaj slike su HSPACE i VSPACE
• Atribut koji opisuje širinu okvira slike BORDER
• Atribut koji umesto slike daje naziv slike ALT Ako se nijedan od atributa ne navede slike su poravnate sa tekstom na donju ivicu.

Položaj slike u odnosu na tekst stranice se može definisati ubacivanjem align atributa u <img> tagu </textarea. Vrednosti ovog atributa i odgovarajuće efekte mogu se videti iz sledećih 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 Odgovarajući tag glasi: <textarea name="40" cols="" rows="1"><img src="slika.gif" _fcksavedurl="slika.gif" align="left">

►right - postavlja sliku uz desnu marginu

Odgovarajući tag glasi: <img src="slika.gif" _fcksavedurl="slika.gif" align="right">

►top - poravnava sliku sa vrhom slova u tekučoj liniji
Odgovarajući tag glasi: <img src="slika.gif" _fcksavedurl="slika.gif" align="top">

►bottom - poravnava sliku sa donjom ivicom slova
 Odgovarajući tag glasi: <img src="slika.gif" _fcksavedurl="slika.gif" align="bottom">

►middle - postavlja sliku tako je donja ivica slova na sredini slike
Odgovarajući tag glasi: <img src="slika.gif" _fcksavedurl="slika.gif" align="middle">

►absmiddle - postavlja sliku tako da se sredina slike i sredina slova poklapaju
Odgovarajući tag glasi: <img src="slika.gif" _fcksavedurl="slika.gif" align="absmiddle">

Da bi se slika prikazala na sredini stranice potrebno je koristiti tag center.

Na primer probajte sledećim HTML kodom: <center><img src="slika.gif" _fcksavedurl="slika.gif"></center>

    •Da bi se promenila originalna veličina slike, željena veličina se može definisati pomoću dva atributa: height i width. Vrednost širine i visine stranice se moze zadati ili u pikselima ili u procentima. Da bi slika zauzimala 50% širine prozora i 30% visine prozora HTML stranice, potrebno je napisati sledeći kod: <img src="slika.gif" _fcksavedurl="slika.gif" height="50%" width="50%">

    •Ako se definiše samo height ili samo width atribut, druga dimenzija ce biti uvećana srazmerno sa definisam tako da će proprocije slika ostati iste. Prazan prostor između slike i okolnog teksta, ili nekih drugih elemenata stranice, može se definisati pomoću dva atributa: hspace i vspace. Vrednost ova dva atributa se zadaje u pikselima.

    Probajte i pomoću koda
 <img src="slika.gif" _fcksavedurl="slika.gif" hspace="50" vspace="50"> Na ovaj način je širina margine oko slike 50 piksela. U okviru stranice može se definisati i debljina granice pomoću atributa border čija se vrednost zadaje u pikselima.

    •Da bi se definisala debljina okvira 5 piksela potrebno je napisati sledeći tag: <img src="slika.gif" _fcksavedurl="slika.gif" border="5">


    •Slika u HTML dokumentu može predstavljati i polazni čvor u hiper-vezi. Dolazna adresa se tada navodi kao kod hiper-veze, a umesto teksta koji se može aktivirati navodi se tag IMG. Opšti oblik je: <A href="URL dolazne datoteke" _fcksavedurl="URL dolazne datoteke"> "tag IMG za željenu sliku"</A>

Primer: <a href="Primer.html" _fcksavedurl="Primer.html"><img src="slika.gif" _fcksavedurl="slika.gif"></a>

Sada slika slika.gif predstavlja link ka stranici Primer.html. Kada se kikne mišem na sliku u browseru se otvara slika Primer.html. Takođe browser ce automatski uramiti sliku koja predstavlja link sa ramom one boje koja je definisana za link i vlink atributima u okviru <body> taga .

    •Da bi se dobila slika bez takvog okvira treba definisati border="0" u okviru <img> taga .

    •Postoji jos jedan koristan atribut <img> taga . To je alt atribut. Ovaj atribut će u slučaju da browser korisnika stranice iz bilo kog razloga ne učita sliku, na onom mestu gde bi trebalo da stoji slika prikazati tekst koja se napiše kao vrednost ovog atributa. Ovo može biti korisno naročito ako je slika postavljena kao link, jer će onda i u slučaju neučitavanja slike korisnik znati gde vodi taj link.

    Primer korišćenja ovog atributa je: <img src="slika.gif" _fcksavedurl="slika.gif" alt="slika"> Ukoliko browser korisnika ne učita sliku osam.gif korisniku će se na definisanom mestu pojaviti tekst "slika".