Hyperlinks, de Hyperlink HTML codes voor je website

Een hyperlink, tegenwoordig gewoon link, is een koppeling naar een ander deel van je website, of naar een andere website. Hyperlinks op websites zijn vaak onderstreept en hebben vaak een andere kleur, meestal blauw. Als je er met de muis overheen gaat verandert de kleur soms of verschijnt er een ballonnetje met meer informatie over de lokatie waar de hyperlink heen linkt. Dit artikel gaat over het gebruik van hyperlinks in HTML.

Hyperlinks en Anchors

Het element van een hyperlink dat je kan activeren wordt “anker”, of in het engels: “anchor” genoemd. Meestal is dit een stukje tekst, maar het kan ook bijvoorbeeld een afbeelding of knop zijn die je aan kan klikken waarna je naar een andere lokatie surft. Na het klikken op een Hyperlink ga je echter niet altijd naar een andere lokatie: Hyperlinks kunnen ook gebruikt worden om een document te laten aanroepen dat je kunt downloaden.

Onderdelen van een Hyperlink

De standaard HTML code voor een hyperlink is bijvoorbeeld de volgende:

<A HREF=”http://www.seopromotiepagina.nl”>Ga naar SEOPromotiepagina.nl</A>

Met het A element (Anchor) maak je een hyperlink. Met het HREF attribuut geef je aan op welke lokatie het bestand of webpagina dat geopend of gedownload moet worden, zich bevindt.

Als je op je website met frames werkt, kun je met het TARGET attribuut aangeven in welk frame een document (webpagina) geopend moet worden. Ook kun je het TARGET attribuut gebruiken om aan teven dat een nieuw document in een nieuw venster geopend moet worden.

Het NAME attribuut  kun je gebuiken om een onzichtbaar anker ergens op je pagina te plaatsen. Dat anker kun je dan gebruiken als bestemming voor je Hyperlink. Vaak wordt dit gebruikt in menu’s bovenaan een lange pagina. Klik je op zon menulink dan scroll je automatisch naar beneden tot het punt waar de verborgen anker staat.

Met het TITLE attribuut kun je je hyperlink voorzien van een korte omschrijving die in een ballonnetje verschijnt als de bezoeker met de muis over de link heen gaat.

Met het BASE element kun je een basisadres voor de webadressen in een document definiëren.

Hyperlinks en directories

Als je link naar een bestand verwijst dat op je eigen webserver staat, dus bijvoorbeeld als je menukoppeling linkt naar een andere webpagina op je eigen website, dan hoef je niet de complete url op te nemen in je hyperlink. Als het bestand in dezelfde directory staat als je huidige document, hoef je slechts de naam van het bestand op te nemen:

<A HREF=”contactpagina.html”>Contact </A>

Staat het document in een subdirectory van de huidige directory, dan geef je ook de subdirectory aan:

<A HREF=”subdirectory/contactpagina.html”>Contact </A>

Als het document in een hogere directory staat dan het huidige, dan neem je voor elke stap omhoog een slash voorafgegaan door twee punten op:

<A HREF=”../contactpagina.html”>Contact </A>

Bestand downloaden

Als je je bezoekers op je website een bestand wilt laten downloaden van je site, kun je een gewone hyperlink gebruiken. Stel je hebt een zipbestand, die in dezelfde directory staat als je huidige HTML document, dan kan de hyperlink er als volgt uit zien:

<A HREF=”bestand.zip”>Download dit bestand</A>

Als je bezoeker nu op deze Hyperlink klikt dan opent zijn browser een nieuw venster waarin gevraagd wordt of het zip-bestand opgeslagen moet worden of moet worden geopend met het bijbehorende programma.

Mailto link

Met behulp van een mailto link kun je een bezoeker van je pagina snel een e-mailbericht naar je laten sturen. In plaats van een url of lokatie gebruik je een mailto url. Dit bestaat uit mailto: en daar direct achter jouw e-mailadres. Bijvoorbeeld:

<A HREF=mailto:jouwnaam@email.nl>Mail de webmaster</A>

Document openen in nieuw venster

Het is ook mogelijk om een nieuw document te laten openen in een nieuw venster in plaats van in het zelfde venster of in een bepaald frame. Hiervoor gebruik je het TARGET attribuut. Bijvoorbeeld:

<A HREF=”contactpagina.html” TARGET=”_blank”>Contact </A>

De waarde _blank geeft aan dat er een nieuw venster geopend moet worden.

Kleur van de Hyperlinks

De kleur van je (tekst) hyperlinks kun je bepalen met de attributen van het BODY element in je HTML pagina, of in een stylesheet als je die gebruikt.

De kleur van de hyperlinks in een bepaal je met de attributen LINK, VLINK, ALINK. LINK is de kleur van een hyperlink die nog niet bezocht is. VLINK is de kleur van een link die wel al bezocht is en ALINK is de kleur van een actieve link, dus die de gebruiker op dat moment selecteert. De gekozen kleuren gelden voor alle links op de webpagina.

Een voorbeeld van het definieren van de kleuren van de hyperlinks in de body:

<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000” LINK=”#0000FF” VLINK=”#FF0000” ALINK=”#FF0000”>