HTML slike : HTML Images

Slike su važan dio web stranice. Kada ih želimo umetnuti koristimo html element <img />. Ovaj element sam za sebe nema nikakvu funkciju bez dodatnog svojstva src. Svojstvu src dodijeljujemo adresu slike koja će biti prikazati na zaslonu.

Web dizajn i slike

Primjer web stranice s umetnutom slikom webdizajn.jpg koja se nalazi u istoj mapi kao i html datoteka. Ispod slike se nalazi tekst.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <img src="webdizajn.jpg" />
    <p>Umetnuta slika naziva webdizajn.jpg</p>
  </body>
</html>

Mjesta gdje se može nalaziti slika:

  • U istoj mapi gdje se nalazi i html dokument
  • Na istom računalu u drugoj mapi
  • Bilo gdje na internetu

Imamo li web sjedište sa većim brojem web stranica preporučljivo je slike organizirati po mapama. Dakle najmanje jedna mapa. Napravimo li mapu slike u mapi gdje se nalazi html dokument i premjestimo sliku webdizajn.jpg u tu mapu tada bi gornji primjer izgledao ovako:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <img src="slike/webdizajn.jpg" />
    <p>Umetnuta slika se nalazi u mapi slike</p>
  </body>
</html>

Treći slučaj ja kada se slika nalazi bilo gdje na Internetu. Tada moramo navesti cijelu URL putanju do slike npr.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <img src="https://www.mojwebdizajn.net/webdizajn.jpg" />
    <p>Slika se nalazi u korijenskom direktoriju</p>
    <p>na web adresi https://www.mojwebdizajn.net</p>
  </body>
</html>