NAVIGACIJA
Naslovna strana - Jelena Grmuša 0 1 2 3 4 6 7 8 9 10 11 12 Uvod u Web i Internet tehnologije

Sekcija BODY- uključivanje slika

Slike: <IMG>

 

Slike se u HTML dokumentu navode upotrebom elementa IMG, pri čemu se kao vrednost obaveznog atributa SRC navodi putanja do slike, tj. URL slike. Većina čitača (browser) podržava upotrebu GIF i JPEG formata slika unutar HTML dokumenta. Format GIF se preporučuje za slike koje imaju više kontinuiranih delova iste boje, dok JPEG se preporučuje za slike kod kojih je prisutna veća paleta boja.

 

Osnovna upotreba: <img src="URL_slike.format">

Slike se mogu umetnuti na ma kom mestu u sekciji predviđenoj za sadržaj dokumenta, a poravnanje slike u odnosu na tekst određuje se atributom ALIGN sa vrednostima top, middle, bottom, left, right. Ako se koriste vrednosti left ili right, onda se slika iscrtava sa leve/desne strane odgovarajuceg paragrafa, dok je tekst raspoređen oko nje. Ako se koriste vrednosti middle ili bottom, onda se težišna linija teksta koji okružuje sliku poravnava sa sredinom/dnom slike. Ako se koristi vrednost top, onda se vrh teksta koji okružuje sliku poravnava sa vrhom slike.

Za podešavanje dimenzije slike da bi se održao raspored teksta i kada se slika ne učitava, koristiti se atributi WIDTH (za širinu slike) i HEIGHT (za visinu slike). Na ovaj način se može i promeniti veličina slike, ali i ubrzati prenos i učitavanje slike, jer browser odmah dobija informaciju koliko prostora treba da odvoji za sliku.
Na primer <img src="slika.jpg" width="109" height="94">
Dimenzije slike se zadaju u pikselima ili procentima. Ako se stvarne dimenzije slike razlikuju od navedenih, onda će slika biti uobličena tako da se skaliranjem uklopi u zadate dimenzije u okviru taga IMG.

Za obezbeđenje dodatnog prostora između slike i teksta mogu se koristiti atributi VSPACE i HSPACE. Vrednosti se zadaju u pikselima. VSPACE se odnosi na marginu ispod i iznad, a HSPACE se odnosi na marginu levo i desno od slike.

Atributom ALT se definiše alternativni tekst koji će biti ispisan (ili prikazan u području osetljivom na dodir) kao komentar ili objašnjenje u slučaju da upotrebljeni čitač (browser) nema mogučnost grafičkog prikaza ili je prikaz grafike namerno isključen.

Atributom BORDER se podešava veličina okvira (u pikselima) koji će biti iscrtan oko slike. Ako se postavi vrednost 0, onda slika neće imati okvir.

 

 

Primer 14



<!-- Kreirati HTML dokument koji ce
a) sliku u datoteci slika.gif umetnuti iza teksta primer slike
b)  sliku u datoteci slika.gif umetnuti ispod teksta primer slike, tako da slika bude
    deo centriranog pasusa
c) sliku u datoteci slika.gif prikazati u okviru cija sirina je 130, a visina 140 piksela
d) sliku u datoteci slika.gif prikazati u okviru cija sirina je 300, a visina 16 piksela, dok
alternativni tekst glasi "Slika br. 4". Slika mora biti iscrtana na levoj strani, a tekst koji 
se rasporedjuje oko nje da glasi: Ovo je primer levog 
                                                     poravnanja.
e)sliku u datoteci slika.gif prikazati u okviru cija sirina je 300, a visina 16 piksela, dok
alternativni tekst glasi "slika br. 5". Slika mora biti iscrtana na desnoj strani, a tekst koji 
se rasporedjuje oko nje da glasi: Ovo je primer desnog 
                                                     poravnanja.
f)sliku u datoteci slika.gif prikazati u okviru cija sirina je 200, a visina 16 piksela, dok
alternativni tekst glasi "slika br. 6". Slika mora biti imati MIDDLE poravnanje, a tekst koji 
se rasporedjuje oko nje da glasi: Ovo je primer MIDDLE
                                                     poravnanja.
Okvir oko slike neka bude 3 piksela.
g) isto kao pod f), ali bez pojave alternativnog teksta, ali dodatni horizontalni i vertikalni prostor oko
slike da bude u oba slucaja po 10 piksela
h) sliku u datoteci slika.gif prikazati u okviru cija sirina je 100, a visina 100 piksela, dok
alternativni tekst glasi "Poslednja slika". Slika mora imati TOP poravnanje, a tekst koji 
se rasporedjuje oko nje da glasi: Tekst za ALIGN=Bottom.
U svim podzadacima, pretpostaviti da se datoteka slika.gif i HTML dokument nalaze u istom folderu. -->
<HTML>   
 <HEAD>
         <TITLE>Umetanje slika u HTML dokument </title> 
         <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">
 </HEAD>
 <BODY>
Primer slike:
<img src="slika.gif">
Primer slike:
<p align="center">
<img src="slika.gif"></p>
<p align="center">
<img src="slika.gif" width="130" height="140">

<!--Na dimenziju prikazane slike uticu atributi visine(HEIGHT) i sirine(WIDTH) 
Dimenzije se zadaju u pikselima ili procentima.
Takodje ova 2 atributa su znacajni i 
za ubrzanje prenosa i ucitavanja slike-->
<p>&nbsp;</p>
<img src="slika.gif" width="300" height="16" alt="Slika br. 4" align=LEFT>Ovo je primer <BR>levog  poravnanja. 
<!--U slucaju da slika nije mogla biti ucitana i prikazana umesto slike pojavice se onaj tekst koji predstavlja vrednost atributa ALT. takodje, taj tekst se pojavljuje kada se predje misem preko slike.-->
<p>&nbsp;</p>
<img src="slika.gif" width="300" height="16" alt="slika br. 5" align=right> 
Ovo je primer <BR>desnog  poravnanja.
<p>&nbsp;</p>
<img src="slika.gif" width="200" height="16" alt="slika br. 6" align=MIDDLE border="3">
Ovo je primer<br>MIDDLE poravnanja.
<p>&nbsp;</p>
<img src="slika.gif" width="200" height="16" align=middle border="3" hspace="10" vspace="10">
Ovo je primer<br>MIDDLE poravnanja.
<p><img src="slika.gif" width="100" height="100" alt="Peta slika" align=TOP>
Tekst za ALIGN=TOP
Isto to ali u novom redu</p>
<p><img src="slika.gif" width="100" height="100" alt="Poslednja slika" align=bottom>
Tekst za ALIGN=Bottom.
</BODY>   
</HTML>

 

PRIKAZ PRIMERA 14:

 

Primer slike: Primer slike:

 

Slika br. 4 Ovo je primer
levog poravnanja.

 

slika br.5 Ovo je primer
desnog poravnanja.

 

slika br.6 Ovo je primer
MIDDLE poravnanja.

 

Ovo je primer
MIDDLE poravnanja.

 

Poslednja slika Tekst za ALIGN=Bottom.

 

Prethodni Nastavak
e-mail: Jelena Grmuša


Copyright © 2002, Jelena Grmusa
Poslednja izmena: januar 2003.