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:
- src - predstavlja URL do slike koju želimo da prikažemo. URL se zadaje na potpuno isti način kao kod linkova, jedino što obavezno vodi do fajla slike, a ne nekog drugog dokumenta. Naravno, slika čak i ne mora da se nalazi na našem serveru, već može da se "dovuče" sa nekog sasvim drugog sajta.
- width - broj piksela (tačkica) koji predstavlja širinu slike unutar stranice.
- height - broj piksela koji predstavlja visinu slike unutar stranice.
- alt - tekst koji se prikazuje unutar prostora slike ako se nekim slučajem slika ne može prikazati. Ovo se može desiti ako je u pitanju slika sa nekog drugog sajta.
<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
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.
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" />
Pomoću različitih dimenzija možemo deformisati sliku.
<img src="img/pic-shell.jpg" width="150" height="150" />