Korišćenje grafike u HTML-u

Dokumenti kakve smo do sada naučili da pravimo su bili isključivo tekstualni. Sada ćemo videti kako da ubacimo sliku u naš dokument. Slike su zasebni fajlovi - znači nisu deo HTML dokumenta (okej, ima izuzetaka, ali o njima drugi put).

O različitim načinima pripreme slike za dokument, možete pročitati ovde.

Element slike spada u inline elemente, što znači da "putuje" unutar teksta.

Oznaka za sliku

Oznaka kojom uvodimo element slike na našu stranicu je <img>. U pitanju je jednostruka oznaka, što znači da nema dela za zatvaranje, odnosno, ne postoji mogućnost da unutar sebe obuhvati deo HTML dokumenta ili tekst - što je i logično. Slika se samo "ubacuje" na određeno mesto u dokumentu.

Ova oznaka mora imati određene parametre:

<img src="[url]" width="[broj]" height="[broj]" alt="[tekst]" />

Iako su po standardu sva četiri parametra obavezna, web čitač zahteva samo src. Ako ne navedemo širinu i visinu, slika će se prikazati u originalnim dimenzijama. Ako navedemo samo širinu ili samo visinu, slika će biti proporcionalno smanjena ili uvećana prema toj dimenziji koju smo zadali.

Korišćenje grafike

Pogledajmo najpre kako bi trebalo pravilno zadati sliku, sa sva četiri parametra:


    <img src="img/pic-shell.jpg" width="200" height="120" alt="Školjka na obali" />
    <img src="nepoznato.jpg" width="200" height="120" alt="Zalazak sunca" />
	

Slika se prikazuje sa zadatim veličinama

p1

Međutim, ako slika ne postoji, ili je u formatu koji web čitač ne podržava, prikazaće se natpis koji smo zadali u parametru alt:

Ako zadamo samo parametar src...


	<img src="img/pic-shell.jpg" />
	

Na stranici se prikazuje slika u originalnoj veličini.

p2

Ako navedemo samo jednu dimenziju, slici će biti zadata ta dimenzija, a druga dimenzija će biti proporcionalno skalirana.


	<img src="img/pic-shell.jpg" width="250" />
	
p3

Pomoću različitih dimenzija možemo deformisati sliku.


	<img src="img/pic-shell.jpg" width="150" height="150" />
	
p4
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies). Detaljnije o tome možete pročitati u tekstu o našoj politici privatnosti.