Websites met stijl
Naslag: hyperlinks
Op dit naslagblad
Het element a
Het element a definieert een hyperlink, meestal kortweg link genoemd. Met een klik op de hyperlink wordt gesprongen naar het bestand dat vermeld is bij het attribuut href.
In de meeste browsers worden hyperlinks als volgt afgebeeld:
- Een nog niet bezochte link: blauw onderstreept
- Een bezochte link: paars en onderstreept
- Een actieve link: rood en onderstreept (actief: op het moment dat er op geklikt wordt).
Met css kan de opmaak worden aangepast. Zie verder bij De opmaak van een link aanpassen, onderdaan deze pagina.
a is een inline element.
Vorm
<a href="url" target="venster"
title="aanwijzing">tekst</a>
Dit wordt getoond als tekst.
Opmerkingen
- Als achter href een html-bestand staat wordt dit bestand geopend.
- Als achter href een tekstbestand (Word-bestand, pdf-bestand) staat wordt het bestand in het tekstverwekingsprogramma geopend.
- In plaats van tekst kan je ook een afbeelding gebruiken als hyperlink.
- Voor meer info, zie de voorbeelden.
- Zie ook mailto links hieronder.
Mailto links
Je kan ook met een klik op een hyperlink een mailtje naar iemand starten door in href mailto: te zetten gevolgd door het e-mailadres van degene waar het mailtje heen moet.
href="mailto: gebruiker@provider.nl"
Als je ook het onderwerp automatisch wilt toevoegen voeg je achter het e-mailadres ?subject=onderwerp toe:
href="mailto: gebruiker@provider.nl?subject=onderwerp"
Als het onderwerp spaties bevat, dan moet elke spatie worden vervangen door %20. Het onderwerp 'Walvis aangespoeld' wordt dus walvis%20aangespoeld'.
Zie voorbeeld 4.
De spatie heeft code 32. En 20 hexadecimaal is 32 in het decimale stelsel; vandaar.
Voorbeelden
voorbeeld 1
<a href="http://www.google.nl/maps">Google maps</a>
Google maps
- Een link naar www.google.nl/maps
voorbeeld 2
<a href="http://www.google.nl/maps" target="_blank"
title="klik voor de map"><img src="img/nederland.png"></a>
- Een link met een plaatje (nederland.png, in de map img)
- Bij aanwijzing verschijnt de tekst 'klik voor de map'
- Bij aanklikken verschijnt www.google.nl/maps in een nieuw venster.
⇐ Probeer maar te klikken op het kaartje.
voorbeeld 3
<a href="handleiding.pdf">handleiding</a>
handleiding
- Bij aanklikken wordt het bestand handleiding.pdf geopend in de pdf reader.
De link werkt echt, maar het document handleiding.pdf bestaat maar uit enkele regels.
voorbeeld 4
<a href="mailto: gebruiker@provider.nl?subject=aanmelding%20nieuwsbrief">meld je aan</a>
meld je aan
- Bij aanklikken wordt het e-mailprogramma geopend, en verschijnt een nieuw mailbericht aan gebruiker@provider.nl met als onderwerp: aanmelding nieuwsbrief.
Probeer dit door hierboven te klikken op 'meld je aan'.
Gebruik geen hoofdletters in bestandsnamen
Bij Unix-computers wordt in bestandsnamen onderscheid gemaakt tussen hoofdletters en kleine leters. Daar is Webpagina.html een ander bestand dan webpagina.html of WEBPAGINA.HTML
Als je dus op zo'n computer een link <a href="webpagina.html">link</a> hebt, terwijl er alleen een bestand Webpagina.html is, dan wordt er niets gevonden.
Op Windows computers wordt bij bestandsnamen geen onderscheid gemaakt tussen kleine letters en hoofdletters. Daar werkt diezelfde link dus prima.
Veel internet-servers werken met Unix-computers. Dat betekent dat een link die het op je eigen computer prima doet, op internet (op een Unix machine) niet werkt, als je wat slordig bent met het hoofdlettergebruik.
De beste remedie: gebruik uitsluitend bestandsnamen in kleine letters.
Opmaak
Niet bezochte links, bezochte links, met de muis aangewezen links en actieve links kunnen van een aangepaste opmaak worden voorzien.
Zie voorbeeld 5
voorbeeld 5
/* nog niet bezochte link */
a:link {color: aqua;}
/* bezochte link */
a:visited {color: green;}
/* met de muis aangewezen link */
a:hover {color: red;}
/* aangeklikte link */
a:active {color: yellow;}
Opmerkingen:
- In plaats van a:link kan je ook gewoon a gebruiken.
- Je hoeft niet alle selectors te gebruiken, maar als je er verschillende gebruikt moeten ze in de volgorde link, visited, hover, active staan.