Definicija povezav v HTML poteka prek elementa a. Preden vam pokažem njegovo uporabo, najprej nekaj splošnih nasvetov o hiperpovezavah. Nikakor ne pozabite na dobre besedilne povezave. S preprostim nazaj navadno ne pomagate nikomur. (Obiskovalci iz zunanje strani običajno ne vedo, kaj pomeni nazaj). Poskusite izbrati opisne besedilne povezave.
Hiperpovezave v HTML vedno sledijo istemu principu.
<a href="videos.html">Trenutni videoposnetki</a>
Elementu a je dodeljen atribut href. Ta href pa pričakuje vrednost cilja povezave. V prejšnjem primeru se je sklicevalo na datoteko videos.html. Ta se nahaja v isti mapi kot HTML datoteka, v kateri je bila definirana hiperpovezava.
Sicer veljajo enaka pravila pri definiciji hiperpovezav, kot pri vstavljanju slik.
Pravzaprav lahko določite ne samo povezave znotraj projekta. Prav tako je možno postaviti hiperpovezave na zunanje datoteke in domene.
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>
Besedilo med odpirajočim <a> in zapirajočim </a> je končno besedilna povezava. Privzeto ga brskalniki prikažejo podčrtanega.
Določanje ciljnega okna
Ko kliknete hiperpovezavo, se cilj povezave odpre v trenutnem brskalnem oknu. To je običajno popolnoma v redu. Vendar se lahko zgodi, da ste npr. določili povezavo na zunanjo domeno. Ko obiskovalec klikne to povezavo, želite, da se cilj povezave odpre v novem brskalnem oknu ali zavihku. Prednost te variante: vaša spletna stran ostane odprta v ozadju.
Vendar ne bi smeli odpreti vsake povezave na svoji strani v novem oknu, saj bodo obiskovalci hitro nadleženi.
Z atributom target elementa a lahko določite ciljno okno, v katerem naj bo odprt posamezni cilj povezave. HTML ponuja tri privzete vrednosti za target.
• _blank – Cilj povezave bo prikazan v novem brskalnem oknu.
• _self – Odpri cilj povezave v trenutnem brskalnem oknu.
• _parent – Tako lahko izstopite iz okvira. (Prosimo, upoštevajte, da okvirji niso podprti v HTML5. Prav tako te tehnike ne bi smeli več uporabljati, saj danes obstajajo boljše alternative. Tisti, ki bi se radi bolj posvetili tej temi, bodo denimo na strani http://de.wikipedia.org/wiki/Frame_(HTML) našli več informacij).
• _top – Uporablja se tudi v povezavi z okvirji. S tem lahko odprete cilj povezave zunaj nabora okvirjev.
Tukaj je primer, kako uporabiti atribut target:
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>
V tem primeru bi se ciljna povezava http://www.psd-tutorials.de odprla v novem oknu/zavihku. Enak učinek bi dosegli, če bi namesto rezerviranega imena _blank uporabili izmišljeno ime, kot je halligalli. Vendar če uporabite atribut target, vam resnično priporočam, da uporabite eno izmed rezerviranih imen.
Določanje osnovne povezave
V glavi HTML datoteke lahko določite tako imenovano osnovno povezavo. Takšna osnovna povezava poskrbi, da se vsi cilji povezav prikažejo v določenem brskalnem oknu. Tudi to je seveda zanimivo predvsem v povezavi z okviri.
To je praktično tudi, ko želite na primer vse povezave vedno prikazati v novem brskalnem oknu z _blank. Predstavljajte si seznam povezav. Če želite, da se cilji vedno odprejo v novem oknu, bi to izgledalo takole:
<a href="http://www.facebook.com/psdtutorials" target="_blank">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt" target="_blank">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk" target="_blank">http://www.facebook.com/HowToNetzwerk</a>
Za vsako definicijo a bi morali dodeliti atribut target.
Kot vidite, to ni prav učinkovito. In še manj učinkovito bo, če se odločite čez nekaj mesecev, da ciljev povezav vseeno ne želite več odpirati v novem oknu. Potem bi morali prilagoditi target atribute vseh povezav. Tega se da preprečiti prek navedene osnovne povezave. Definirate jo z elementom base znotraj oddelka head. Elementu base dodelite atribut target z želeno vrednostjo. Tukaj je primer, kako bi lahko to izgledalo:
!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <base target="_blank"> </head> <body> <a href="http://www.facebook.com/psdtutorials">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk">http://www.facebook.com/HowToNetzwerk</a> </body> </html>
Varčuje vam veliko tipkanja.
Definiranje sidra
Kako lahko postavite hiperpovezave na druge datoteke, ste že videli. Prav tako pa je mogoče znotraj HTML datoteke definirati tudi t.i. sidra. Nato lahko nastavite povezave do teh sidra. Praktično je to na primer pri obsežnih straneh. Tako lahko na začetku dokumenta definirate kazalo vsebine, prek katerega lahko obiskovalci skočijo na mesta, ki so zanje pomembna, ne da bi morali drseti skozi okno brskalnika.
Sidra se ustvarjajo prek elementa a. Vendar sidrom ne dobijo atributa href, ampak atribut name.
<a name="seitenanfang">Vsebina</a> <a name="kapitel1">Vsebina poglavje 1</a> <p>Sledi veliko besedila.</p> <a name="kapitel2">Vsebina poglavje 2</a> <p>Sledi veliko besedila.</p>
Imena sidra lahko izberete sami. Priporočam vam, da izberete čim krajša imena, uporabljate samo male črke in se izogibate posebnim znakom.
Da se sklicujete na sidro, definirate običajno hiperpovezavo, kot je bilo prikazano na začetku tega vodiča.
<a href="#seitenanfang">Na vrh strani</a>
Atributu href je kot vrednost dodeljeno ime sidra. Pri tem je pomembno, da je imenu sidra predstavljen znak ostrije.
Na sidra lahko postavite povezave tudi preko datotek. V naslednjem primeru predvidevam, da obstaja datoteka news.htm, ki se nahaja v istem imeniku kot dejanska HTML datoteka. Znotraj news.htm je bilo definirano sidro seitenanfang. Da se nanj sklicujete, za imenom ciljne datoteke (news.htm) zapišete znak ostrije. Sledi ime sidra.
<a href="news.htm#seitenanfang">Na vrh strani</a>
Tako enostavno lahko postavite povezave do sidra v kateri koli datoteki.
