Slike

Sliko vstavimo v dokument s pomočjo elementa <img> , ki je brez vsebine, torej nima zaključne značke. Element IMG je vrstični element, kar pomeni, da se slika v dokumentu obnaša kot en velik znak. Če želimo večjo sliko prikazati samostojno, jo moramo obdati z bločnim elementom. Element <img> ima nekaj pomembnih lastnosti:
Z lastnostjo src določimo naslov slike (ime datoteke). Če se slika nahaja v isti mapi kot spletna stran, je za vrednost lastnosti dovolj napisati samo ime datoteke, kako se sestavi naslov datoteke, ki se nahaja kje drugje (v drugi mapi, na drugem strežniku), pa je podrobneje opisano v poglavju o aktivnih povezavah. Slika mora biti zapisana na datoteki oblike GIF, JPG ali PNG.
Z lastnostma width (širina) in height (višina) določimo velikost pravokotnega področja, namenjenega prikazu slike. Če velikosti ne predpišemo, bo slika prikazana v njeni originalni velikosti (kot je zapisano na datoteki). Če podamo samo širino ali samo višino, bo slika tako široka oziroma visoka, kot smo zahtevali, pri čemer bo razmerje med njeno širino in višino ohranjeno (slika ne bo popačena). Če pa podamo širino in višino, bo prikazana slika točno tako velika, kot smo zahtevali (pri tem se lahko slika tudi popači). Priporočljivo je, da vedno podamo obe dimenziji slike. Samo tako bo brskalnik lahko že med nalaganjem strani rezerviral dovolj velik prostor, kjer bo kasneje prikazal sliko.
Z lastnostjo alt na kratko opišemo, kaj se nahaja na sliki. Opis slike se prikaže, če z miško nekaj sekund počivamo na njej (prikaže se v rumenem okvirčku) ali pa če pregledovalnik slike ne more prikazati (prikaže se namesto slike).

Primer najdete tukaj.

Zlivanje slike z besedilom

Za zlivanje slike z besedilom uporabimo lastnost align z vrednostmi left (levo), right (desno), top (navzgor), bottom (navzdol) ali middle (sredinsko).
Za določanje praznih pikslov med sliko in besedilom pa uporabimo lastnosti hspace ( število praznih pikslov levo in desno od slike) in vspace (število praznih mest nad in pod sliko).

Primer zlivanja slike z besedilom

Primer najdete tukaj.

primer slike

Nasvet

Uporabite predefinirano dolžino slike (width) ali višino (height), saj bodo tako spletne strani boljše oblikovane in ne bodo odvisne od velikosti okna brskalnika ali od ločljivosti (resolucije) slike. Brskalnik strani z vnaprej določeno višino ali širino slike tudi hitreje prikaže.

Pogosta napaka

Če sočasno nastavite dolžino in širino slike, lahko sliko popačite, če spremenite razmerje med dolžino in širino slike, ki je v originalni sliki.

Uporaba strežniške aktivne mape na sliki

Če aktivni sliki dodamo še lastnost ismap (brez vrednosti), bodo strežniku poleg zahteve po prikazu dokumenta posredovane še koordinate točke na sliki, kamor je uporabnik kliknil. Pri tem je točka (0,0) v levem zgornjem vogalu slike, koordinata x narašča proti desni, koordinata y pa navzdol. Če bi (v spodnjem primeru) uporabnik kliknil na sliko v točki (25,14), bi strežnik prejel zahtevo po prikazu dokumenta http://www.feri.uni-mb.si?25,14 (kaj bo storil s tema parametroma, je odvisno od njegovih nastavitev).

Primer najdete tukaj.

Uporaba aktivne mape na strani brskalnika

Sliko lahko naredimo aktivno tudi tako, da bodo različna območja slike določala različne cilje. V tem primeru moramo najprej definirati, kje na sliki bodo aktivna območja in kateri bodo pripadajoči cilji. To storimo s poimenovanim elementom <map> (da se lahko skličemo nanj), ki mu za vsebino z elementi <area> opišemo vsako območje posebej. Vsako območje opišemo z lastnostmi:

Z lastnostjo shape določimo obliko območja. Možne vrednosti lastnosti so default (cela slika), rect (pravokotnik), circle (krog) in poly (poligon).
Z lastnostjo coords določimo položaj in velikost območja na sliki. Število in pomen podatkov, ki jih napišemo za vrednost te lastnosti, je odvisno od vrednosti lastnosti shape. Pravokotnik opišemo s koordinatama levega zgornjega in koordinatama desnega spodnjega oglišča, krog podamo s koordinatama središča in polmerom, poligon pa z zaporedjem njegovih oglišč (vsako oglišče podamo z dvema koordinatama). Podatke ločimo z vejicami.
Z lastnostjo href določimo naslov datoteke, ki se odpre, ko uporabnik klikne na območje.
Z lastnostjo alt na kratko opišemo, kaj območje predstavlja, oziroma kam nas bo pripeljal klik nanj. Opis se prikaže v rumenem okvirčku, ko z miško postojimo na območju.

Primer najdete tukaj.

Uporaba aktivne mape na strani brskalnika – primer

primer najdete tukaj.

primer slike

Značke za delo s hiperpovezavami in slikami

<a> Povezava na zunanji dokument ali labela znotraj dokumenta

<img> Slika

<map> Slikovna mapa

<area> Področje znotraj slikovne mape