HTML - Slike

Postavljanje slika na web stranice

Slike poboljšavaju vizualni izgled web stranica čineći ih zanimljivijim i živopisnijim. Oznaka <img> koristi se za umetanje slika u HTML dokumente. Prazan je element i sadrži samo atribute. Sintaksa oznake <img> može se napisati kao: 

<img src="url" alt="neki_tekst">

Sljedećim primjerom ubacuje tri slike na web stranicu: 

<img src="kites.jpg" alt="Flying Kites">
<img src="sky.jpg" alt="Cloudy Sky">
<img src="balloons.jpg" alt="Balloons">
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Postavljanje slike u HTML dokument</title>
</head>
<body>
    <img src="/examples/images/kites.jpg" alt="Flying Kites">
    <img src="/examples/images/sky.jpg" alt="Cloudy Sky">
    <img src="/examples/images/balloons.jpg" alt="Hot Air Balloons">
</body>
</html>

Svaka slika mora imati najmanje dva atributa: atribut src i atribut alt. Atribut src govori pretraživaču gde da pronađe sliku. Njegova vrijednost je URL datoteka slike. Dok alt atribut nudi alternativni tekst za sliku, ako ona nije dostupna ili se iz nekog razloga ne može prikazati. Njegova vrijednost trebala bi biti smislena zamjena za sliku.


Podešavanje širine i visine slike

Atributi width i height koriste se za određivanje širine i visine slike. Vrijednosti ovih atributa po zadanome se interpretuje u pikselima. 

<img src="kites.jpg" alt="Flying Kites" width="300" height="300">
<img src="sky.jpg" alt="Cloudy Sky" width="250" height="150">
<img src="balloons.jpg" alt="Balloons" width="200" height="200">
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Podešavanje veličine slike u HTML dokumentu</title>
</head>
<body>
    <img src="/examples/images/kites.jpg" alt="Flying Kites" width="300" height="300">
    <img src="/examples/images/sky.jpg" alt="Cloudy Sky" width="250" height="150">
    <img src="/examples/images/balloons.jpg" alt="Hot Air Balloons" width="200" height="200">
</body>
</html>

Takođe možete koristiti atribut style da odredite širinu i visinu slika. Atribut style sprečava slučajno mijenjanj veličine slike, jer stil inline ima najveći prioritet. 

<img src="kites.jpg" alt="Flying Kites" style="width: 300px; height: 300px;">
<img src="sky.jpg" alt="Cloudy Sky" style="width: 250px; height: 150px;">
<img src="balloons.jpg" alt="Balloons" style="width: 200px; height: 200px;">

Korištenje HTML5 elementa slike

Ponekad je potrebno skaliranje slike prema gore ili dole kako bi stala na različite uređaje (ili veličine ekrana). Takođe, smanjenje dimenzije slike korišćenjem atributa width i height ne smanjuje originalnu veličinu datoteke. Za rješavanje ovih problema HTML5 je uveo tag <picture> koji vam omogućava definisanje više verzija slike za ciljanje različitih vrsta uređaja.

Element <picture> sadrži nula ili više <source> elemenata, a svaki se odnosi na različiti izvor slike, a jedan <img> element na kraju. Takođe svaki <source> element ima atribut medija koji specifikuje stanje medija (slično kao medijski upit) koji pretraživač koristi za određivanje kada se određeni izvor treba koristiti. Pokušajmo napisati primjer: 

<picture>
    <source media="(min-width: 1000px)" srcset="logo-large.png">
    <source media="(max-width: 500px)" srcset="logo-small.png">
    <img src="logo-default.png" alt="My logo">
</picture>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Navođenje više izvora za slike u HTML-u</title>
</head>
<body>
    <picture>
        <source media="(min-width: 1000px)" srcset="/examples/images/logo-large.png">
        <source media="(max-width: 500px)" srcset="/examples/images/logo-small.png">
        <img src="/examples/images/logo-default.png" alt="My logo">
    </picture>
</body>
</html>

Rad sa mapama slika

Mapa slike omogućava vam definisanje određenih mjesta na slici koja djeluje poput hiperveze. Osnovna ideja stvaranja mape slika je pružiti jednostavan način povezivanja različitih dijelova slike bez djeljenja na odvojene fajlove. Na primjer, kartu svijeta možete povezati, tako da kada korisnik klikne da jedan dio slike da mu se prikaže ta zemlja. Pokušajmo napisati jednostavan primjer kako biste shvatili kako ovo funkcioniše: 

<img src="objects.png" usemap="#objects" alt="Objects">
<map name="objects">
    <area shape="circle" coords="137,231,71" href="clock.html" alt="Clock">
    <area shape="poly" coords="363,146,273,302,452,300" href="sign.html" alt="Sign">
    <area shape="rect" coords="520,160,641,302" href="book.html" alt="Book">
</map>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Izrada mapa slika u HTML</title>
</head>
<body>
    <img src="/examples/images/objects.png" usemap="#objects" alt="Objects">
    <map name="objects">
        <area shape="circle" coords="137,231,71" href="/examples/html/clock.html" alt="Clock">
        <area shape="poly" coords="363,146,273,302,452,300" href="/examples/html/sign.html" alt="Sign">
        <area shape="rect" coords="520,160,641,302" href="/examples/html/book.html" alt="Book">
    </map>
</body>
</html>

Atribut <map> koristi se za upućivanje karte iz oznake <img> koristeći atribut usemap. Oznaka <area> se koristi unutar elementa <map> za definisanje područja na kojima se može kliknuti na sliku. Možete definisati bilo koji broj područja na kojima se može kliknuti unutar slike.