4.

MULTIMEDIJA: DIGITALNA SLIKA

Digitalna slika je elektornički zapis dvodimenzionalne slike kreirane digitalnim fotoaparatom ili kamerom,
procesom skeniranja fizičkih slika ili izradom u specijaliziranim aplikacijama. Digitalna slika može
fotografija, fotomontaža i crtež (ilustracija).
Digitalnu sliku najčešće kombiniramo s tekstom raspoređujući ih na prikladana način kako bi ostvarili
dinamiku i učinili izgled sadržaja zanimljivijim.
Za umetanje digitalnih slika bilo kojega formata (jpeg, gif, tiff, png, svg, webp) koristi se
HTML oznaka img s obveznim atributima src (koji sadrži putanju i naziv slike) i atributom alt. Za
putanju uobičajno se koristi relativni URL u odnosu na dokument.

<img src = "URL" alt = "opis slike">

Adresu resursa kolokvijalno nazivamo URL. On funkcionira poput klasične poštanske adrese te
upućuje na mjesto gdje se traženi resurs nalazi. Taj sadržaj može biti bilo što, poput slike, teksta ili nečega
trećega.
URL može sadržavati velika i mala slova engleske abecede [A-Z, a-z], znamenke [0-9], te jedan od
simbola [znak za dolar $ , znak za minus - , znak za podcrtano _ , znak ta točku
.]. Ukoliko želimo koristiti neke druge znakove moramo koristiti posebne postotne oblike zapisa znakova.
Oni se sastoje od znaka postotka % i dvoznamenkastog heksadecimalnog simbola koji je definiran
ISO-Latin-1 ili Unicode kodnom stranicom. Npr. URL kod za prazno (razmak) jest %20

Apsolutne putanje su one koje vode na isti resurs s bilo kojeg mjesta. Apsolutne putanje moraju
sadržavati oznaku protokola koji će preglednik upotrijebiti da bi došao do željenog resursa, naziv domene,
te sve ostale podatke za dolazak do resursa. Ne završava li adresa imenom nekog određenog resursa, na
kraj adrese uvijek nadodajemo znak /. U protivnom nepotrebno opterećujemo poslužitelj.

Relativne putanje u odnosu na mrežni dokument daju samo informacije koje su potrebne da
iz tekućeg dokumenta pristupite željenom resursu. Ako želite pristupiti nekom resurs koji je dublje u
strukturi mapa, u odnosu na stranicu s koje se poziva, morat ćete navesti ime mape i ime resursa. Ako
želite URL postaviti na resurs koji se nalazi u mapi iznad mape u kome se trenutno nalazimo, morat ćete
preko ../ ukazati da se "podižete" za jedan nivo naviše.

Relativna putanja u odnosu na korijen mrežnog sjedišta: URL relativan u odnosu na

korijensku mapu mrežnog sjedišta započimamo znakom /, a ostatak navodimo kao da se nalazimo u
korijenskoj mapi.

23
Piksel (picture element) je najmanji element digitalne slike. Dimenzija slike u pikselima je ukupni
broj redaka i stupaca piksela na digitalnoj slici. Rezolucija (razlučivost) definira koliko su pikseli na
slici gusto raspoređeni.
Digitalne slike namijenjene objavi na mrežnim stranicama trebale bi uvijek biti spremljene u onoj veličini u
kojoj će se pojavljivati na samoj mrežnoj stranici, prije nego li ih se pohrani na poslužiteljsko računalu. Ako
se slika sprema u manjoj veličini od one koja će biti prikazana, postoji mogućnost da će prikazom u
planiranoj veličini na stranici izgubiti na kvaliteti ili će biti izobličena. Ako je slika veća od veličine
predviđene za prikaz, sporije će se učitavati i korisniku će povećati količinu potrošenoga internetskog
prometa.

HTML atributi nisu obavezni, ali ih je dobro pisati, a još je važnije ispravno ih izabrati, Naime:
 idealno bi bilo kad bi atributi width i height sadržavali vrijednosti koje odgovaraju širini i visini slike
koju treba prikazati, ako tih parametara nema, prvo će biti prikazana stranica bez mjesta rezerviranog
za sliku, a tek će se po učitavanju slike preostali sadržaj razmjestiti na konačno mjesto – posjetitelju
pred očima
 ako su parametri width i height veći od dimenzija slike, slika će biti rastegnuta i djelovat će mutno
 ako su navedeni parametri manji od dimenzija slike, prenosit će se velika slika te prikazati umanjeno
(vrijeme prijenosa će biti nepotrebno veliko)
 ako je slika smanjena neproporcionalno (npr. ako je vrijednost parametra width polovina širine slike, a
vrijednost parametra height trećina izvorne visine slike), slika će biti izobličena.

<picture>
Oznaka picture pruža veću fleksibilnost u prikazivanju slika. Najčešće se koristi prilikom likovnog
usmjeravanja slika (→ podrezivanje slika, dostava potpuno drugih slika). Umjesto da imate jednu sliku koja
se povećava ili smanjuje na temelju širine prikaza, možete oblikovati više slika kako bi ljepše popunili
prikaze u pregledniku.
Proučite primjer: https://googlechrome.github.io/samples/picture-element/

HTML kod koji je upotrijebljen u primjeru jest:

<picture>
<source media="(min-width: 650px)" srcset="images/kitten-large.png">
<source media="(min-width: 465px)" srcset="images/kitten-medium.png">
<!-- img tag for browsers that do not support picture element -->
<img src="images/kitten-small.png" alt="a cute kitten">
</picture>

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
24
Media queries su, jednostavno rečeno, upiti o nekom svojstvu medija na kojem se prikazuje mrežna
stranica.
Unutar oznake picture pišemo više oznaka source. U svakoj oznaci source definiramo dva
atributa: media i srcset. Vrijednost media atributa je medijski upit, srcset je URL slike. Nakon
svih oznaka <source> dodajemo regularnu oznaku <img>.
Neki od vrijednosti media atributa:
 a plain media condition
(min-width: 400px)
(max-width: 400px)
 a "not" media condition
(not (orientation: landscape))
 an "and" media condition
((orientation: landscape) and (min-width: 400px))
 an "or" media condition
((orientation: portrait) or (max-width: 400px))

25
PRAKTIKUM

1. Preuzmite komprimiranu datoteku slike.zip. Datoteka sadrži sljedeće slike:

2. U mapi PRAKTIKUM EDIT izradite mapu slike, te izdvojite preuzete slike u novostvorenu mapu
slike

3. Otvorite mrežnu stranicu obala.html.

Postavite slike Makarske (makarska.jpg), Brela (brela.jpg), Tučepa (tucepi.jpg), Živogošća
(zivogosce.jpg) na prikladna mjesta – ispred odgovarajućih naslova.
Slikama postavite širinu (450px) i visinu (250px).

4. Otvorite mrežnu stranicu otoci.html.

Postavite slike Postira (postira.jpg), Bola (bol.jpg), Milne (milna.jpg) i Supetra (supetar.jpg)
na prikladna mjesta – poslije odgovarajućih odlomaka.
Slikama postavite širinu (450px) i visinu (250px).
Na preostalim mjestima (Hvar, …, Sućuraj) postavite slike s mrežne stranice
https://picsum.photos/

PRIMJER: <img src="https://picsum.photos/450/250?random=1" alt="random slika">

26
NAPOMENA: neki od servisa koji sadržavaju slikovne sadržaje koje možete preuzeti pod licencom CC i
Public domain su: https://pixabay.com/, https://www.pexels.com/,
https://www.freepik.com/,...
NAPOMENA: neki od servisa koji sadržavaju rezervirana mjesta za slike https://placeholder.com/,
https://fakeimg.pl/,
NAPOMENA: obratite pažnju na URL kod za prazno (%20)

5. Izvršite validaciju stranica: https://validator.w3.org/

27
OČEKIVANI REZULTAT:

28
29