HTML prvi koraci - lekcija 6 - Slike

26/05/2025, by Ivan

Slike na sajtu su veoma važan element, bez njih sajt izgleda sivo i neprivlačno. Slike se koriste za stilizaciju sajta, za foto galerije, ali i kao obične slike.

Ubace se pomoću taga IMG (primećujete da pišemo samo img, a ne kompletno image). Tag IMG je samostalni tag <img />, što znači da nema zatvarajući tag.

Osnovni atribut taga IMG je atribut src. On funkcioniše kao href kod linkova, u atribut src treba staviti putanju do slike. Putanja, kao i kod linkova, može biti relativna ili apsolutna.

Ovo je kod našeg index.html:

<html>
  <head>
    <title>Moj prvi HTML dokument</title>
  </head>
  <body>  
    <h1>Moj prvi HTML dokument</h1>
    <p>
      <a href="files/file.html">Link ka drugom dokumentu</a>
    </p>
  </body>
</html>

Sada ćemo kreirati folder images pored ovog fajla. U folder images kopiraćemo sliku. Pretpostavimo da se slika zove image.jpg. Ubacićemo tag img u tekst index.html.

<html>
  <head>
    <title>Moj prvi HTML dokument</title>
  </head>
  <body>  
    <h1>Moj prvi HTML dokument</h1>
    <p>
      <img />
    </p>
    <p>
      <a href="files/file.html">Link ka drugom dokumentu</a>
    </p>
  </body>
</html>

Ubacio sam tag, sada ćemo napisati putanju do slike, pisaćemo relativnu putanju, koja počinje sa ./

./

Sada dodajemo ime foldera gde je slika:

./images/

Zatim pišemo ime fajla:

./images/image.jpg

Sada ubacujemo putanju u atribut src.

<html>
  <head>
    <title>Moj prvi HTML dokument</title>
  </head>
  <body>  
    <h1>Moj prvi HTML dokument</h1>
    <p>
      <img src="./images/image.jpg" />
    </p>
    <p>
      <a href="files/file.html">Link ka drugom dokumentu</a>
    </p>
  </body>
</html>

Sada se slika prikazuje u originalnoj veličini, ali možemo postaviti dimenzije slike pomoću atributa width i height.

Atribut širine taga img je width, atribut visine je height. Možemo postaviti samo širinu, samo visinu, ili obe vrednosti. Na primer:

<html>
  <head>
    <title>Moj prvi HTML dokument</title>
  </head>
  <body>  
    <h1>Moj prvi HTML dokument</h1>
    <p>
      <img src="./images/image.jpg" width="200" />
    </p>
    <p>
      <a href="files/file.html">Link ka drugom dokumentu</a>
    </p>
  </body>
</html>

Ili samo visinu:

<html>
  <head>
    <title>Moj prvi HTML dokument</title>
  </head>
  <body>  
    <h1>Moj prvi HTML dokument</h1>
    <p>
      <img src="./images/image.jpg" height="400" />
    </p>
    <p>
      <a href="files/file.html">Link ka drugom dokumentu</a>
    </p>
  </body>
</html>

Ako postavite i visinu i širinu istovremeno, pazite da budu proporcionalne originalnim dimenzijama slike, jer ćete u suprotnom izobličiti sliku na sajtu.

<html>
  <head>
    <title>Moj prvi HTML dokument</title>
  </head>
  <body>  
    <h1>Moj prvi HTML dokument</h1>
    <p>
      <img src="./images/image.jpg" height="400" width="100" />
    </p>
    <p>
      <a href="files/file.html">Link ka drugom dokumentu</a>
    </p>
  </body>
</html>

Dodatni tipovi blokova (EBT) - Novo iskustvo rada sa Layout Builder-om❗

❗Dodatni tipovi pasusa (EPT) – Novo iskustvo rada sa pasusima

HTML prvi koraci - lekcija 6 - Slike