Definisjonen av referanser skjer i HTML via a-elementet. Før jeg viser deg bruken av dette, noen generelle tips om hyperlenker. Tenk absolutt på gode referansetekster. Med en banal tilbake hjelper man vanligvis ingen. (Når en besøkende kommer fra en ekstern side, vet han vanligvis ikke hva som menes med tilbake). Forsøk å velge beskrivende referansetekster.
Hyperlenker følger alltid samme prinsipp i HTML.
<a href="videos.html">Aktuelle videoer</a>
Til a
-elementet tildeles attributtet href
. Dette href
forventer igjen destinasjonen som verdi. I det forrige eksempelet ble filen videos.html referert. Denne befinner seg i samme mappe som HTML-filen der hyperlenken ble definert.
Ved definisjonen av hyperlenker gjelder ellers de samme reglene som ble presentert i forbindelse med innlemming av bilder.
Dere kan for øvrig ikke bare definere prosjektinterne referanser. Likeså kan hyperlenker også settes til eksterne filer og domener.
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>
Teksten som står mellom åpnings <a>
og avsluttende </a>
er til syvende og sist referanseteksten. Standardvisning av denne teksten er normalt med understrykning i nettlesere.
Angi målvindu
Når man klikker på en hyperlenke, åpnes destinasjonen i gjeldene nettleservindu. Dette er helt normalt og vanligvis helt greit. Det kan imidlertid være at man for eksempel har satt en referanse til et eksternt domene. Klikker en besøkende på denne lenken, bør destinasjonen åpnes i et nytt nettleservindu eller fane. Fordelen med denne varianten er at nettsiden deres forblir åpen i bakgrunnen.
Dere bør imidlertid ikke åpne hver eneste lenke på siden deres i et eksternt vindu, da besøkende fort kan bli irritert av det.
Ved hjelp av target
-attributtet til a
-elementet kan målvinduet bestemmes der destinasjonen skal åpnes. HTML tilbyr til å begynne med tre standardverdier for target
.
• _blank
– Destinasjonen vises i et nytt nettleservindu.
• _self
– Åpner destinasjonen i gjeldende nettleservindu.
• _parent
– Her kan man bryte ut av rammene. (Vær oppmerksom på at rammer ikke støttes i HTML5. Uansett bør man ikke lenger bruke denne teknikken, da det i dag finnes bedre alternativer. Den som ønsker å lære mer om rammer, vil for eksempel finne informasjon på siden http://de.wikipedia.org/wiki/Frame_(HTML)).
• _top
– Dette brukes også i forbindelse med rammer. Dere kan dermed åpne destinasjonen utenfor rammesettet.
Her er et eksempel på hvordan man bruker target-attributtet:
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>
I dette tilfellet vil destinasjonen http://www.psd-tutorials.de åpnes i et nytt vindu/fane. Samme effekt ville man for øvrig oppnå hvis man i stedet for den reserverte navnet _blank
bruker et fantasinavn som halligalli
. Hvis dere imidlertid bruker target, vil jeg faktisk anbefale å bruke en av de reserverte navnene.
Definere referansegrunnlaget
Dere kan i head
-delen av HTML-filen definere et såkalt referansegrunnlag. Et slikt referansegrunnlag sørger for at alle destinasjoner vises i et bestemt nettleservindu. Dette er igjen naturligvis mest interessant i forbindelse med rammer.
Dette er imidlertid også praktisk hvis dere for eksempel vil vise alle lenker i et nytt nettleservindu ved hjelp av _blank
. Forestill dere en lenkeliste. Hvis destinasjonene alltid skal åpnes i et nytt vindu, ville det se slik ut:
<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>
Dere må derfor tildele et target
-attributt til hver a
-definisjon.
Dette er ikke spesielt effektivt, som dere ser. Det blir enda mindre effektivt hvis dere om noen måneder bestemmer dere for at destinasjonene likevel ikke skal åpnes i et nytt vindu. Da må dere tilpasse target
-attributtene for alle lenker. Dette kan unngås ved hjelp av nevnte målvindusbasis. Denne defineres via base
-elementet inne i head. Man tildeler target
-attributtet til base
-elementet med ønsket verdi. Her er et eksempel på hvordan det kan se ut:
<!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>
Dette sparer deg for mye tastearbeid.
Definere anker
Slik du kan sette hyperkoblinger til andre filer, har du allerede sett. På samme måte kan du imidlertid også definere såkalte ankre innenfor en HTML-fil. Deretter kan du opprette referanser til disse ankerene. Dette er praktisk for omfattende sider. På begynnelsen av dokumentet kan du for eksempel definere en innholdsfortegnelse, via hvilken besøkende kan hoppe til de relevante stedene for dem, uten å måtte rulle gjennom nettleservinduet.
Ankre opprettes via a
-elementet. Imidlertid tildeles ankerdefinisjoner ikke href
, men en name
-attributt.
<a name="seitenanfang">Inhalt</a> <a name="kapitel1">Inhalt Kapitel 1</a> <p>Her følger mye tekst.</p> <a name="kapitel2">Inhalt Kapitel 2</a> <p>Her følger mye tekst.</p>
Ankernavnene kan du velge fritt. Jeg anbefaler imidlertid å velge dem så korte som mulig, kun bruke små bokstaver og unngå spesialtegn.
For å henvise til en anker, definerer du en vanlig hyperkobling på samme måte som vist tidligere i denne opplæringen.
<a href="#seitenanfang">Til startsiden</a>
Ankerdefinisjoner gis som verdi til attributtet href
. Det avgjørende her er imidlertid at ankerens navn har et firkanttglasurmerke foran seg.
Du kan også sette referanser til ankre på tvers av filer. Jeg antar i det følgende eksemplet at det finnes en fil news.htm som ligger i samme mappe som den faktiske HTML-filen. Inne i news.htm ble ankeren seitenanfang definert. For å henvise til denne, skrives et firkanttegn bak navnet på målfilen (news.htm). Deretter følger ankerens navn igjen.
<a href="news.htm#seitenanfang">Til startsiden</a>
Så enkelt kan du sette referanser til anker i hvilken som helst fil.