HTML umetanje slike : HTML Insert Images

Slike su važan dio web stranice. Kada ih želimo umetnuti koristimo html element img. Svojstvu src dodjeljujemo naziv i putanju slike koju želimo prikazati.

HTML za početnike
krivulja

Tečaj - Uvod u HTML

4.5

Zašto ne sada?

HTML za početnike

Naša preporuka

Cloudinary oglas

Besplatne usluge:

CDN pohrana slika i videa.

Pretvorba formata slika: webp...

Vrhunsko AI povećanje slika!

25Gb podataka.

4.5

Zašto ne sada?

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 dodjeljujemo adresu slike koja će biti prikazati na zaslonu.

Web dizajn i slike

U sljedećim primjerima koristit ćemo sliku mojwebdizajn.jpg. Možete je preuzeti na donjoj poveznici.

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

html-slika-u-istoj-mapi.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML slika u istoj mapi</title>
  </head>
  <body>
    <img src="mojwebdizajn.jpg" alt="Moj web dizajn" />
    <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 mojwebdizajn.jpg u tu mapu, tada bi gornji primjer izgledao ovako:

html-slika-u-drugoj-mapi.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML slika u drugoj mapi</title>
  </head>
  <body>
    <img src="slike/mojwebdizajn.jpg" alt="Moj web dizajn" />
    <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.

html-slika-na-internetu.html

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