Viited määratletakse HTML-is aelemendi kaudu. Enne selle kasutamise näitamist, mõned üldised juhised hüperlinkide kohta. Kindlasti mõelge head viittekirjeldused. Tavaliselt ei aita kedagi lihtne tagasi. (Kui külastaja tuleb väliselt lehelt, siis ei pruugi ta aru saada, mida tähendab tagasi). Proovige valida kirjeldavaid viittekirjeldusi.
Hüperlingid järgivad HTML-is alati sama põhimõtet.
<a href="videos.html">Aktuaalsed videod</a>
Aelemendile a määratakse atribuut href. See href ootab omakorda väärtusena viite sihti. Eelnevas näites oli viidatud failile videos.html. See asub samas kaustas kui HTML-fail, kus hüperlink määratleti.
Ülejäänud hüperlinkide määratlusreeglid kehtivad samuti, nagu ka graafikute lisamise puhul tutvustatud.
Te võite määratleda mitte ainult projekti siseviiteid. Hüperlinke saab seada ka välisfailidele ja domeenidele.
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>
Tekst, mis on vahemikus avaneva <a> ja sulgeva </a> vahel, on lõppkokkuvõttes viitketekst. Vaikimisi kuvatakse seda teksti brauserites allakriipsutatult.
Sihifondi määramine
Kui klõpsate hüperlingile, avaneb viite sihthaak praeguses brauseriaknas. See on tavaliselt täiesti korras. Võib aga juhtuda, et olete määranud viite näiteks välisele domeenile. Kui külastaja klõpsab seda linki, peaks viite siht avanema uues brauseriaknas või vahekaardis. Selle variandi eelis: teie veebileht jääb taustale avatuks.
Igasse lehekülje hüperlingisse ei ole soovitatav avada välist akent, kuna külastajad väsivad sellest kiiresti.
Atribuudi target abil saate määrata sihifondi, kuhu igat viite sihti avada soovitakse. HTML pakub selleks algselt kolme standardset väärtust target jaoks.
• _blank - Viite sihtmärk kuvatakse uues brauseriaknas.
• _self - Avab viite sihi praeguses brauseriaknas.
• _parent - Siit saate raamistikust lahkuda. (Palun arvestage, et raame HTML5-s ei toetata. Üldiselt ei tohiks seda tehnikat enam kasutada, kuna selleks on tänapäeval paremad alternatiivid. Kes soovib raamidega lähemalt tutvuda, leiab näiteks rohkem teavet lehelt http://de.wikipedia.org/wiki/Frame_(HTML)).
• _top - Ka seda kasutatakse raamidega seotult. Saate avada viite sihi raamistikust väljaspool.
Siin on näide, kuidas target-atribuuti kasutada:
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>
Sel juhul avaneks viisi sihtkoht http://www.psd-tutorials.de uues aknas/vahekaardil. Sama mõju saavutaksite ka siis, kui kasutate reservitud nime asemel väljamõeldud nime nagu halligalli. Kuid kui kasutate targetit, soovitaksin tõesti ühte reservitud nime valida.
Viitealus määramine
HTML-dokumendi head-osas saate määratleda nn viitekoha. Selline viitealus tagab, et kõik viite sihid kuvatakse konkreetses brauseriaknas. See on muidugi jällegi peamiselt seotud raamidega huvitav.
Praktiline on see aga ka siis, kui soovite näiteks kõik lingid avada uues brauseriaknas, kasutades selleks _blank. Kujutage ette lingiloendit. Kui soovite, et nende viite sihid avaneksid alati uues aknas, näeks see välja järgmine:
<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>
Seega peaksite määrama igale a määratlusele sihifondi atribuudi.
Nagu näete, pole see eriti tõhus. Veelgi vähem tõhusaks muutub see siis, kui mõne kuu pärast otsustate, et soovite sihid siiski mitte uues aknas avada lasta. Siis peate kõigi linkide target-atribuudid kohandama. Seda saab vältida mainitud viitefondiga. Selle määratleb base-element head sees. base-elemendile antakse target atribuut koos soovitud väärtusega. Siin on näide sellest, kuidas see välja võiks näha:
<!DOCTYPE html> <html lang="et"> <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>
See säästab teid palju trükkimistööd.
Ankru määratlemine
Nagu olete juba näinud, kuidas saate luua hüperlinke teistesse failidesse. Kuid HTML-failis saab määrata ka nn ankurdusi. Seejärel saate viidata nendele ankrutele. Praktiline on see näiteks mahukate lehtede puhul. Nii saab dokumenti alguses määratleda sisukorra, mille kaudu külastajad saavad liikuda nendele olulistele kohtadele, ilma et peaksid kerima brauseriakent.
Ankrud luuakse a-elemendi abil. Kuid ankrute määratlusi ei määrata href atribuudile, vaid sellele omistatakse atribuut name.
<a name="seitenanfang">Sisu</a> <a name="kapitel1">Sisu peatükk 1</a> <p>Siia tuleb palju teksti.</p> <a name="kapitel2">Sisu peatükk 2</a> <p>Siia tuleb palju teksti.</p>
Ankru nimesid saate vabalt valida. Soovitan siiski valida võimalikult lühikesed nimed, kasutada ainult väiketähti ja loobuda erimärkidest.
Viidete loomiseks ankrule määratlete tavalise hüperlingi, nagu algselt selle õpetuse alguses näidatud.
<a href="#seitenanfang">Lehe algusesse</a>
href atribuudile omistatakse ankrule nime väärtus. Oluline on siinjuures, et ankrule eelneb rauamaht.
Ihr könnt Verweise auf Anker übrigens auch dateiübergreifend setzen. Ich gehe im folgenden Beispiel davon aus, dass es eine Datei news.htm gibt, die im selben Verzeichnis wie die eigentliche HTML-Datei liegt. Innerhalb der news.htm wurde der Anker seitenanfang definiert. Um auf diesen zu verweisen, wird hinter dem Namen der Zieldatei (news.htm) ein Rautezeichen notiert. Daran schließt sich wiederum der Ankername an.
<a href="news.htm#seitenanfang">Lehe algusesse</a>
Nii lihtsalt saate luua viited ankrutele igasuguses failis.
