HTML tekst i slike kao poveznice

Odredište html poveznice - teksta ili slike - može biti na istoj web stranici, na istom web sjedištu ili bilo gdje na Internetu.

krivulja

Tekst kao poveznica

HTML poveznice (linkovi) su temelj Interneta. Bez poveznica ne bi imali mogućnost (kako i ime kaže) povezivanja različitih web stranica. Element poveznice je <a> (engl. anchor – sidro). On je paran, linijski element.

HTML poveznica mora "znati" adresu web stranicu s kojom nas ona povezuje. Adresu dodjelite svojstvu href.

svojstvo href

Svojstvu href možemo dodijeliti relativnu adresu u odnosu na izvorišnu mapu (u kojoj se nalazi html datoteka) ili u odnosu na korijensku (engl. root) mapu na istom web sjedištu. Također možemo dodijeliti apsolutnu ili URL adresu koja pokazuje na bilo koje web sjedište na Internetu.

Između početne i završne oznake poveznice <a>, treba umetnuti tekst ili sliku. Klikom na njih, web preglednik će otvoriti web stranicu čija je adresa pohranjena u svojstvu href.

U slijedećem primjeru, koristimo tekst Otvori tražilicu kao poveznicu na web stranicu Google tražilice.

Html poveznice ili linkovi

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Poveznice ili linkovi</title>
</head>
<body>
  <h1>Poveznice</h1>
  <a href="https://www.google.hr">Otvori tražilicu</a>
</body>
</html>

Preuzimanje slike

U sljedećim primjerima koristit ćemo sliku barol.png. Možete je preuzeti na donjoj poveznici. Slika je veličine 1250px s 540px.

Slika kao poveznica

Osim teksta i slika može poslužiti kao poveznica.

slika kao poveznica

Slika mora uvijek imati svojstva src i alt. Ako se slika nalazi u istoj mapi kao i web stranica svojstvo src ne treba sadržavati putanju, nego treba samo navesti ime slike i nastavak (engl. extension).

U slijedećem primjeru umjesto teksta, koristimo sliku bartol.png kao poveznicu:

Html slika kao poveznica

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Slika kao poveznica</title>
</head>
<body>
  <h1>Slika kao poveznica</h1>
  <a href="https://www.google.hr">
    <img src="bartol.png" alt="Bartol plus" />
  </a>
</body>
</html>

Odredište poveznice

Pomoću svojstva href određujemo web stranicu odredišta. Ona može biti:

Unutar te stranice.

U istom web sjedištu.

Bilo gdje na Internetu.

1. Unutar te web stranici (sidrište)

U slijedećem primjeru koristimo poveznicu kako bi povezali kraj web stranice s početkom iste web stranice. Treba napraviti dvoje:

1. Html elementu koji je sidrište, postavite vrijednost identifikatora, npr. id="top".

2. Tu vrijednost identifikatora (top), umetnite kao vrijednost svojstva href poveznice iza znaka ljestve #. Vrijednost svojstva href je "#top".

Nakon što preuzmete i pokrenete primjer, dođite na kraj web stranice gdje se nalazi tekst poveznice na vrh stranice.

Html poveznica na istu web stranicu

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Poveznica na isti dokument</title>
</head>
<body>
  <h1 id="top">S ovim elementom ćemo se povezati</h1>
  <!-- Oznake <br /> umetnuli smo kako bi simulirali 
       sadržaj web stranice i vidjeli pomak -->
  <br /><br /><b r /><br /><br /><br /><br /><br /><br /><br />
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <a href="#top">Povratak na vrh web stranice</a>
</body>
</html>

2. Na istom web sjedištu

Kada se web stranica nalazi u istoj mapi i na istom web sjedištu, svojstvu href dodjeljujemo samo naziv html dokumenta, npr. href="pismo.html".

Ako se web stranica na koju poveznica pokazuje ne nalazi u istoj mapi, prije naziva html dokumenta, treba umetnuti putanju do tog dokumenta, npr. href="rasprava/pismo.html".

Putanja može biti relativna u odnosu na mapu u kojoj se nalazi html datoteka ili relativno u odnosu na korijensku (engl. root) mapu. Više o tome pročitajte u članku:

3. Bilo gdje na Internetu

Kada se odredište poveznice nalazi izvan web sjedišta, potrebno je svojstvu href dodijeliti puni URL (engl. Uniform Resource Location), tj. adresu web sjedišta.

Html odredište poveznice - Internet

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Odredište poveznice na Internetu</title>
</head>
<body>
  <h1>Odredište na Internetu</h1>
  <a href="https://www.google.hr">Otvori tražilicu</a>
</body>
</html>

Poveznica u novom prozoru

Želimo li pomoću poveznice, otvoriti html dokument na novoj kartici web preglednika, trebamo html elementu poveznice dodati svojstvo target="_blank".

Slijedeći primjer će vam pomoći:

Html poveznica na novoj kartici

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Poveznica na novoj kartici</title>
</head>
<body>
  <h1>Poveznica na novoj kartici</h1>
  <a href="https://www.google.hr" target="_blank">Otvori tražilicu</a>
</body>
</html>

Možda će vas zanimati?

Naši pokrovitelji

Uvod u html

4.8

Izaberi najbolje

Naša preporuka

Cloudinary oglas

Besplatne usluge:

CDN pohrana slika i videa.

AI povećanje slika.

Pretvorba formata slika: webp...

25Gb podataka.

4.5

Zašto ne sada?

Prikaži sve