Slike

U HTML-dokumentu mozemo slobodno prikazivati slike u razlicitim formatima. Treba jedino imati na umu da ucitavanje slika traje, osobito u slucaju sporijih modemskih veza, pa ne treba dokument bespotrebno pretrpavati slikama. Isto tako, potrebno je paziti na velicinu slike. Sto je slika manja brze ce je se i lakse ucitati.

Tag za prikazivanje slika je <img>. To je tag bez zatvaraca, koji sadrzi samo atribute.

Atribut src

Da bi prikazali sliku na stranici, obavezno moramo koristiti src (od eng. source) atribut. Vrijednost atributa src je URL slike koju zeimo prikazati. Slika ce se prikazati tocno na onom mjestu u stranici na koje smo stavili <img> tag. Sintaksa:

<img src="url">  

Atribut alt

Ne mogu svi browseri na svim sustavima prikazivati slike. Neki rade samo u tekstualnom modu. Zbog toga, a i zbog nekih drugih mogucih problema sa ucitavanjem slika, jako je dobra praksa koristiti atribut alt kod svih slika. Vrijednost atributa alt je tekst koji zelimo da se ispise umjesto slike ako se slika ne ucita, i na taj nacin dajemo informaciju korisniku sto je trabalo biti na slici. Primjer:

<img src="brod.gif" alt="Moj jedrenjak">

U ovom primjeru koristili smo sliku brod.gif koja se nalazila u istom folderu kao i nasa stranica. U slucaju da se slika nalazi u nekom drugom folderu, ili da je uzimamo direktno s interneta, pod src treba napisati puni put do slike. Primjeri:

<img src="/images/brod.gif" alt="Moj jedrenjak">

<img src="http://www.google.com/images/brod.gif" alt="Moj jedrenjak">

Zadatak 6: pronadjite na Internetu neku sliku po zelji, downloadajte je i ubacite je u svoju stranicu. Dodajte i neki tekst u alt atribut.

Velicina slike

Da bi se slika brze ucitala, korisno je definirati i njene dimenzije. Definiranjem (mjenjanjem) dimenzija takodjer mozemo uciniti sliku vecom ili manjom direktno u stranici, iako je to losa praksa (bolje je promjeniti fizicki dimenzije slike nekim od programa za obradu slika). Za odredjivanje dimenzije slike imamo atribute "visina" i "sirina":

<img src="brod.gif" alt="Moj jedrenjak" width="144" height="50">

Pozicioniranje slike u tekstu - atribut align

Slika u tekstu moze biti pozicionirana na razlicite nacine. Defaultno je pozicionirana tako da donja strana slike prati liniju teksta, ali to se moze promijeniti.

Zadatak 7: U svoju stranicu ubacite sljedeci komad koda i provjerite kako izgleda na browseru:

<p>
Slika 
<img src="http://web.math.hr/~karaga/rammstein.jpg"
align="bottom" width="290" height="376"> 
u tekstu
</p>

<p>
Slika 
<img src ="http://web.math.hr/~karaga/rammstein.jpg"
align="middle" width="290" height="376"> 
u tekstu
</p>

<p>
Slika 
<img src ="http://web.math.hr/~karaga/rammstein.jpg"
align="top" width="290" height="376"> 
u tekstu
</p>

Sliku mozemo smjestiti i lijevo, odnosno desno od odlomka teksta:

Zadatak 8: U svoju stranicu ubacite sljedeci komad koda i provjerite kako izgleda na browseru:

Ukoliko zelimo da nam se tekst pojavi jedan ispod drugog, potrebno je izmedju odlomaka dodati <PRE> i </PRE> te unutra onoliko puta enter koliko je potrebno. Pokusajte.

Slike kao linkovi

Kao sto smo vec spomenuli u poglavlju o linkovima, iako je najcesci link neki tekst, i slika moze sluziti kao link. Potrebno ju je samo smjestiti unutar <a> taga. Na primjer:

<a href="http://web.math.hr/~karaga/mreze.html">
<img src="http://web.math.hr/~karaga/rammstein.jpg" width="290" height="376">
</a>

Ukoliko zelimo da se rub oko slike koji oznacava da je slika link ne vidi (sto je losa praksa kod obicnih slika jer onda je osobi koja se sluzi vasom stranicom bitno teze ustanoviti da je slika link, ali je jako korisno kod slika u menijima), postavimo atribut border na nulu:

<a href="http://web.math.hr/~karaga/mreze.html">
<img border="0" src="http://web.math.hr/~karaga/rammstein.jpg" width="290" height="376"></a>

Zadatak 9: Pretvorite sliku na vasoj stranici u link na neku stranicu na Internetu.

Ponekad ne zelimo da citava slika bude link na isti dokument. Bilo bi nam korisno da neki djelovi slike budu link na jednu stranicu, neki djelovi na drugu itd. To postizemo koristenjem mapa i uvodjenjem koordinata djelova slike u tag. Kome zatreba ova naprednija opcija, detalje moze vidjeti ovdje.

Slika kao pozadina stranice

Do sada su nase stranice imale praznu, bijelu pozadinu. Atribut background taga <body> omogucuje nam da bilo koju sliku postavimo kao pozadinu nase stranice. U slucajevima kad je slika manja od pozadine stranice, slika ce se ponavljati.

Zadatak 10: Pogledajte sliku na "http://web.math.hr/~karaga/mathback.gif", a zatim u svoju web stranicu umjesto taga <body> ubacite

<body background="http://web.math.hr/~karaga/mathback.gif">

Primjer stranice gdje je veca slika uzeta kao pozadina: "http://web.studenti.math.hr/~karaga/".

Kod koristenja slike za pozadinu stranice, treba uvijek imati na umu tri stvari: Da li se slika mozda predugo ucitava? Da li ce se stranica s vremenom povecavati pa cemo dobiti ponavljanje slike koje nece izgledati estetski (nisu sve slike prikladne da se ponavljaju, u smislu da se ne nadovezuju jedna na drugu na prirodni nacin)? I konacno, da li slika mozda umanjuje funkcionalnost stranice u smislu da otezava citanje teksta ili odvlaci paznju od njega?