Osnovni pojmovi
Rezolucija je način praćenja kvalitete slike i mjeri se u broju točkica (pixela) od kojih se sastoji slika. Što je broj tih točkica veći, slika je kvalitetnija. Rezolucija monitora dobije se vodoravno x okomito. Umnožak tih veličina daje ukupnu rezoluciju monitora.
Rezolucija monitora
Prikaz stranice na svakoj rezoluciji izgleda drukčije.
Najčešće rezolucije monitora jesu:640 x 480, 800 x 600 i 1024 x 768
Za provjeru prikaza slike kod različitih rezolucija može se koristiti program za provjeru rezolucije.
Na internetu najčešće koristimo slike u JPG, PNG i GIF formatu.
JPG su najčešće slike sa najvećom kompresijom (ne zauzimaju puno prostora, a dobre su kvalitete).
PNG slike su slične JPG formatu, s jednom razlikom – mogu biti prozirne (transparentne).
GIF su najčešće animirane slike koje isto mogu biti prozirne.
Postavljenjem slika ne stranicu ne bi smjeli pretjerivati s njenom veličinom. Najbolje da ne upisujemo broj veći od 300kB, pogotovo ako imamo više slika. Ako pretjeramo stranica će nam se sporo učitavati, a slike sporo otvarati. Dokazano je da posjetitelji Internet stranica brzo odustaju od pregledavanja stranice, ako se ona dugo učitava.
Umetanje slike
Sliku postavljamo na stranicu na sljedeći način: <img src=”slika.jpg”>. Atribut SRC određuje put do slike. Taj atribut može biti relativan i apsolutan. Slika se sastoji od naziva i nastavka.
relativan ( ../../slike/grad.jpg)
apsolutan ( http://www.nekigrad.com/slike/grad.jpg)
http:// – oznaka protokola
www.nekigrad.com – naziv servera na kojem se nalazi slika – slike/grad.jpg – put do slike
Širina i visina slike
Širinu slike određuje Width atribut , a visinu Height.
<img src=”slika.jpg” width=”150″ height=”200″>
Vrijednosti koje koristimo su izražene u pikselima. Osim pixela možemo koristiti i postotke, oni se odnose na visinu i širinu našeg web preglednika.
<img src=”slika.jpg” width=”10%” height=”40%”>
Obrub slike
Atribut Border označava obrub slike: <img src=”slike.jpg” width=”100″ height=”170″ border=”5″>
Broj 5 je debljina obruba.
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Bjelovar</title>
</head>
<body>
Slika bez obruba.
<br/><img src=”bj.jpg” width=”440″ height=”248″>
<br/>Slika sa obrubom.
<br/><img src=”bj.jpg” width=”440″ height=”248″ border=”5″>
</body>
</html>
Poravnanje slike
Za poravnanje slike koristimo isti atribut kao i za tekst (Align) i sljedeća poravnanja:
left – poravnava sliku lijevo i tekst omata oko slike
right – poravnava sliku desno i tekst omata oko slike
center – poravnava sredinu slike sa dnom teksta
top – poravnava gornji rub slike sa vrhom teksta
middle – poravnava sredinu slike sa sredinom teksta
bottom – poravnava donji rub slike sa dnom teksta
Razmak oko slike
vspace – vertikalni razmak
hspace – horizontalni razmak
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Naslov stranice</title>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis neque non eros rhoncus bibendum. Pellentesque convallis venenatis ligula, ut scelerisque enim laoreet id. Vivamus ornare, arcu nec volutpat hendrerit, magna tellus cursus mi, id facilisis felis nunc eu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu nunc eros, quis rutrum ipsum. Nam tempus diam eget risus egestas iaculis luctus sapien accumsan. Sed nec nulla non sapien venenatis vulputate eget ac magna. Nam consectetur nisi sed lorem venenatis sed aliquam augue ornare.
<img src=”bj.jpg” width=”440″ height=”248″ align=”left” vspace=”20″ hspace=”20″>
Maecenas quis pharetra eros. Nulla tempus egestas urna vitae dapibus. Maecenas in odio et diam dictum blandit. Nullam sed turpis nec justo varius adipiscing. Nulla euismod ante vel lacus sollicitudin non facilisis erat tincidunt. Aliquam sit amet nisl nulla, vitae feugiat dolor. Sed dignissim imperdiet consectetur. Mauris vestibulum, ipsum semper sodales euismod, nibh tortor facilisis sem, sit amet luctus odio ipsum nec nulla. Aliquam eget velit diam. Vivamus convallis tellus nisi, quis pellentesque nisl. Quisque eu leo mauris. Pellentesque dictum mi vel arcu malesuada molestie. Maecenas justo augue, hendrerit at aliquam ac, ultrices ut dolor. Cras in nisl eget sem tincidunt auctor. Nullam lacinia tristique mollis. Etiam egestas aliquet volutpat. Maecenas sed fringilla quam. Aliquam erat volutpat. Praesent eu massa sed neque commodo pulvinar in vitae nulla. Praesent posuere sapien sit amet nibh lacinia ultrices. Mauris molestie urna vel sem tincidunt malesuada.
</body>
</html>
Alternativni tekst
Pod alt upisujemo naziv slike ili kratak opis slike. U slučaju da se slika ne vidi, na ekranu će se pojaviti prazan okvir s nazivom te slike.
<img src=”slika.gif” alt=”Moja slika” >