HTML poveznice i sidra : Links and Anchors

HTML poveznice : Hyperlinks

Linkovi su najjači adut web stranica i omogućavaju brzi prelazak s jedne web stranice na drugu, unutar istog web sjedišta ili drugdje na internetu i po tome se najznačajnije razlikuju od pisanih zapisa.

Poveznica (link ili hiperlink) je riječ, skupina riječi ili slika na koju možemo kliknuti kako bi nas povezala s novim dokumentom ili dijelom unutar postojećeg dokumenta.

Kada se pokazivač miša nalazi nad poveznicom, njegov izgled se promijeni (najčešće u ikonu ruke).

Web dizajn svaki dan? Pokušaj!

Poveznice i sidra : Links and Anchors

Element poveznice (linka) : <a> ... </a>

Kako bi načinili poveznicu na drugi dokument, koristimo svojstvo href.

Kako bi načinili sidro s kojom se možemo povezati unutar dokumenta, koristimo svojstvo id.

Kako bi odredili u kojem prozoru ili okviru (engl. frame) će se otvoriti prikaz web stranice koristimo svojstvo target.

Svojstvo poveznice href : href Attribute

Svojstvu href dodjeljujemo URL (Universal Resource Location) odredišne stranice. Ako navodimo domenu stranice na internetu prije domene moramo navesti obavezno https://

Primjer korištenja svojstva href:

<a href="https://www.mojwebdizajn.net">
  Poveznica na MojWebDizajn.net
</a>

Rezultat u web pregledniku:

Klik mišem na poveznicu odvodi nas na naslovnicu stranice mojwebdizajn.net

HTML linkovi : HTML Links

U prvu skupina spadaju linkovi koji povezuju trenutni html dokument s drugim stranicama unutar istog web sjedišta. Prvoj skupini ili lokalnim linkovima dovoljno je dodjeliti relativnu adresu:

<a href="/css/uvod-u-css.html">

Druga skupina linkova su oni koji povezuju trenutnu web stranicu s drugim web sjedištima. U ovoj skupini, linkovima moramo dodjeliti punu adresu domene.

<a href="https://www.mojwebdizajn.net">

Treća skupina su linkovi koji omogućavaju povezivanje različitih dijelova unutar iste web stranice na vrh. Trećoj skupini dodjeljujemo vrijednost sidra koji je zadan vrijednošću identifikatora id:

<a href="#vrh">

Zajedničko za sve linkove je da koristimo element <a>. Ovisno o skupini u koju spada html link, dodjeljujemo razičite vrijednosti svojstvu href (engl. Hypetext REFerence).

Ponekad ćemo željeti kombinirati prvu i treću skupinu odnosno drugu i treću skupinu. To je slučaj kada želimo skočiti na željeno mjesto druge web stranice unutar istog web sjedišta (prva skupina) ili različitog sjedišta (druga skupina).

Primjer za povezivanje prve i treće skupine linkova:

<a href="/uvod-u-css.html#dno">
  Link na #dno stranice
</a>

Ili za povezivanje druge i treće skupine linkova:

<a href="https://www.mojwebdizajn.net#dno">
  Link na sidro #dno druge stranice
</a>

Slika kao poveznica : Image Link

Primjer korištenja slike kao poveznice:

<a href="https://www.mojwebdizajn.net">
  <img src="mojwebdizajn.jpg" />
</a>

Rezultat u web pregledniku:

Klik mišem na sliku odvodi nas na naslovnicu stranice mojwebdizajn.net

Svojstvo poveznice id : Id Attribute

Svojstvo id vezano za poveznice, određuje naziv sidra.

Sidro na dio dokumenta možemo kreirati dodjeljujući vrijednost svojstvu id unutar poveznice (bez navođenja svojstva href). Sidro u dokumentu je nevidljivo za korisnika.

Primjer dodjeljivanja sidra (svojstva id):

<h2 id="top">Naslov dokumenta</h2>
...
<h2 id="sadrzaj">Sadržaj dokumenta</h2>
...
<h2 id="email">Kontakt e-mail</h2>

Kada se želimo povezati s postojećim sidrima, svojstvu href dodjeljujemo vrijednost imena sidra (vrijednosti svojstva id) ispred kojeg navodimo znak ljestve (#).

Primjer povezivanja s dijelom dokumenta u kojem se nalazi sidro:

<a href="#top">Poveznica s naslovom</a>
<a href="#sadrzaj">Prikaz sadržaja</a>
<a href="#email">Kontakt e-adresa</a>

Svojstvo poveznice target : Target Attribute

Svojstvo target određuje prozor ili okvir (engl. frame) gdje će preglednik otvoriti stranicu

U slijedećem primjeru, budući da je svojstvu target dodjeljena vrijednost _blank otvorit će stranicu u novom prozoru preglednika:

<a href="https://www.mojwebdizajn.net" target="_blank">
Web dizajn
</a>

U slijedećem primjeru, budući da je svojstvu target dodjeljena vrijednost _self otvorit će stranicu u trenutnom prozoru preglednika:

<a href="https://www.mojwebdizajn.net" target="_self">
Web dizajn
</a>

U ovom primjeru, budući da je svojstvu target dodjeljena vrijednost _parent otvorit će stranicu u prozoru nadređenom okviru u kojem se nalazi poveznica:

<a href="https://www.mojwebdizajn.net" target="_parent">
Web dizajn
</a>

U donjem primjeru, budući da je svojstvu target dodjeljena vrijednost _top otvorit će stranicu u trenutnom prozoru zanemarujući okvire:

<a href="https://www.mojwebdizajn.net" target="_top">
Web dizajn
</a>