HTML tekst i slike linkovi : Text and Image Links

HTML linkovi : HTML Links

HTML linkovi (poveznice) čine temelj cijelog Interneta. Zapravo je sve međusobno povezano pomoću linkova. Element poveznice je <a> gdje slovo a dolazi od engleske riječi Anchor (sidro).

HTML poveznica nema funkciju ako ne odredimo kamo ona pokazuje. Kamo pokazuje umetanjem svojstva href kojem dodjeljujemo vrijednost adrese odredišta.

Web dizajn i poveznice

Primjer u kojem tekst "Googlanje" povezuje našu web stranicu s Google tražilicom:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h2>Poveznica ili link</h2>
    <a href="https://www.google.hr">Googlanje</a>
  </body>
</html>

HTML slike kao poveznica : Images link

HTML poveznica može biti i slika. Ne zaboravite da putanja do slike mora biti navedena kao vrijednost svojstva src. Ako ne navedemo putanju slika se mora nalaziti u istoj mapi kao i html dokument.

U slijedećem primjeru umjesto teksta koristimo sliku kao poveznicu:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h2>Poveznica ili link</h2>
    <a href="https://www.google.hr">
    <img src="webdizajn.jpg" alt="Moj web dizajn" />
    </a>
  </body>
</html>

Odredište na koje poveznica vodi

Svojstvo href pokazuje na odredište kamo poveznica vodi. Odredište može biti:

Na istoj web stranici
Na istom web sjedištu
Na bilo kojem web sjedištu

Odredište na istoj web stranici

Ako se odredište poveznice nalazi na istoj web stranici potrebno je svojstvu href dodijeliti vrijednost identifikatora na koji poveznica vodi.

Svojstvo href="#vrh"

Ovaj primjer koristimo kada želimo staviti poveznicu koje će s jednog dijela stranice skočiti na drugo mjesto na web stranici. Dvije stvari treba napraviti. Prvo potrebno je u prvi html element na stranici staviti identifikator (svojstvo id) i dodijeliti mu vrijednost vrh. Npr.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h2 id="vrh">Mjesto na koje pokazuje poveznica</h2>
  ...

I drugo, na dnu stranice stavimo slijedeću poveznicu:

...
<a href="#vrh">Povratak na vrh web stranice</a>

Odredište na istom web sjedištu

Ako se odredište poveznice nalazi na istom web sjedištu potrebno je svojstvu href dodijeliti naziv i putanju web stranice na koju poveznica vodi.

Kada se web stranica nalazi u istoj mapi svojstvu href dodjeljujemo samo puni naziv html dokumenta: href="drugi.html".

Ako se web stranica nalazi u nekoj drugoj mapi uz ime potrebno je dodjeliti svojstvu href i relativnu putanju do toga html dokumenta (u ovom primjeru html dokument se nalazi u mapi blog).

Svojstvo href="blog/drugi.html"

Odredište na bilo kojem web sjedištu

Kada se odredište poveznice ne nalazi na istom web sjedištu potrebno je svojstvu href dodijeliti puni URL naziv web sjedišta.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <a href="https://www.google.hr">Googlanje</a>
  </body>
</html>

Poveznica u novom prozoru

Ponekad želimo ostaviti otvorenu web stranicu na kojoj se nalazi poveznica i web stranicu otvoriti u novom prozoru. Tada uz svojstvo href html elementu poveznice <a> moramo dodati svojstvo href="_blank".

Pogledajmo primjer:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h2>Poveznica u novom prozoru</h2>
    <a href="https://www.google.hr" target="_blank">
    <img src="webdizajn.jpg" alt="Moj web dizajn" />
    </a>
  </body>
</html>

HTMLza početnike