Vse o HTML povezavah (Linkih): Od osnov do naprednih trikov

Splet ne bi bil to, kar je, brez hiperpovezav (ali po domače linkov). Povezave so tisti gradbeni elementi, ki med seboj spajajo posamezne spletne strani v eno veliko svetovno mrežo. Brez njih bi bila vsaka spletna stran le osamljen otok.

V tem članku si bomo podrobno in brez bližnjic pogledali, kako delujejo HTML povezave, kako jih pravilno uporabiti za notranje in zunanje strani, kako odpirati dokumente ter kako ustvariti povezave znotraj iste podstrani.

1. Osnovna struktura povezave: Značka <a> in atribut href

V HTML-ju povezavo ustvarimo z značko <a> (skrajšanka za anchor oziroma sidro). Vendar sama značka <a> ne dela ničesar, če ji ne dodamo atributa href (hypertext reference). Atribut href iskalniku in brskalniku pove, kam mora uporabnika odpeljati, ko ta klikne na besedilo.

Osnovni sintaktični primer:

<a href="https://www.google.com">Klikni tukaj za obisk Googla</a>

Razčlenitev kode:

• <a> – Začetna značka za povezavo.
• href="https://www.google.com" – Atribut, ki določa ciljni spletni naslov (URL).
• Klikni tukaj za obisk Googla – Vidno besedilo (t.i. anchor text), na katerega uporabnik klikne.
• </a> – Zaključna značka, ki zapre povezavo.

2. Zunanje vs. Notranje povezave

Pri delu s spletnimi stranmi se boste srečali z dvema vrstama poti do cilja: absolutnimi in relativnimi.

A) Zunanje (Absolutne) povezave
Zunanje povezave vodijo na povsem druge spletne strani (na primer z vaše strani na Google, Wikipedijo ali drugo zunanjo domeno). Pri zunanjih povezavah moramo v atribut href obvezno zapisati celoten spletni naslov, vključno s protokolom (https:// ali http://).

<!-- Pravilno: Celoten URL s protokolom -->
<a href="https://vadnica.org">Obiščite domačo stran Vadnica.org</a>

Opozorilo: Če pozabite napisati https://, bo brskalnik mislil, da gre za datoteko na vaši lastni strani, in povezava ne bo delovala!

B) Notranje (Relativne) povezave
Notranje povezave povezujejo podstrani unutar vaše lastne spletne strani (na primer z domače strani na stran "O meni" ali "Kontakt"). Ker se te datoteke nahajajo na istem strežniku, ni treba pisati celega naslova domene.

Predpostavimo, da imamo v mapi spletne strani dve datoteki: index.html (domača stran) in kontakt.html.

<!-- Povezava iz index.html na podstran kontakt -->
<a href="kontakt.html">Pišite nam na strani za kontakt</a>

Če se podstran nahaja v posebni mapi (npr. v mapi blog), pot zapišemo tako:

<a href="blog/clanek-1.html">Preberite prvi članek</a>

3. Odpiranje povezave v novem oknu ali zavihku (target="_blank")

Ko uporabnika s povezavo pošljete na zunanjo spletno stran, običajno ne želite, da pri tem zapusti vašo stran. Zato uporabimo atribut target="_blank", ki brskalniku ukaže, naj povezavo odpre v novem zavihku (ali oknu).

<a href="https://www.wikipedia.org" target="_blank">Preberi več na Wikipediji (odpre se v novem zavihku)</a>

4. Povezava, ki odpre ali prenese sliko/datoteko

Atribut href ne rabi voditi le do HTML dokumentov. Vodil lahko tudi do slik (.jpg, .png, .avif), dokumentov PDF ali ZIP datotek.

Odpiranje slike v brskalniku:
Če v href vpišete pot do slike, jo bo brskalnik ob kliku odprl v celoti:

<a href="slike/velika-slika-radia.jpg" target="_blank">Poglej sliko v polni velikosti</a>

Samodejni prenos datoteke (download atribut):
Če želite, da uporabnik ob kliku datoteko prenese na svoj računalnik (namesto da bi jo brskalnik odprl), dodate atribut download:

<a href="dokumenti/navodila.pdf" download>Prenesi navodila v PDF formatu</a>

5. Sidra: Povezave na določen del iste podstrani

Včasih imamo zelo dolge članke in želimo uporabniku omogočiti, da z enim klikom skoči na določen odstavek ali poglavje nižje na isti strani. Za to uporabimo t.i. sidra (anchors).

Ta postopek zahteva dva koraka:

• Elementu ali naslovu, kamor želimo skočiti, dodelimo unikaten id.
• V povezavo href vpišemo znak # in nato ime tega ID-ja.

Primer delovanja:

<!-- 1. Povezava na vrhu strani -->
<a href="#poglavje3">Skoči na 3. poglavje</a>

<!-- Tukaj je veliko dolgega besedila... -->

<!-- 2. Ciljno poglavje z atributom id -->
<h3 id="poglavje3" class="section-heading section-heading--blue">3. Poglavje: Napredne funkcije</h3>
<p>Tukaj se nahaja besedilo tretjega poglavja...</p>

6. Posebne vrste povezav: E-pošta in Telefon

HTML omogoča tudi izdelavo povezav, ki ob kliku samodejno odprejo uporabnikov e-poštni program ali pa na telefonu sprožijo klic.

E-poštna povezava (mailto:):

<a href="mailto:info@vadnica.org">Pošlji nam e-pošto</a>

Telefonska povezava (tel:):

<a href="tel:+38612345678">Pokliči nas: 01 234 5678</a>

Povzetek

S tem ste usvojili popolnoma vse vidike delovanja HTML povezav! V naslednjem članku si bomo podrobno pogledali, kako na spletno stran vstavljamo slike ter kako jih pravilno urejamo in optimiziramo.