Een hyperlink (afgekort: link) maakt het in HTML mogelijk om naar een andere locatie te gaan, door op iets (tekst, afbeelding, icoon, ...) te klikken. Een andere locatie kan een plaats zijn in hetzelfde document, ergens in een ander document of zelfs op een andere pagina op het Internet. Je zult ze vast wel kennen, anders had je nooit op deze pagina gekomen! Er zijn veel mogelijkheden die je waarschijnlijk nog niet kent, en die gaan we in dit hoofdstuk bekijken.
Als je een hyperlink plaatst in een document zal deze standaard een blauwe kleur krijgen, en zal onderlijnd zijn. Wanneer deze hyperlink al eens is geactiveerd of "bezocht", zal deze een paarse kleur krijgen. Deze kleuren kun je aanpassen, hier komen we later op terug.
Met het element a kunnen we een hyperlink plaatsen in ons HTML document. Met het attribuut href kunnen we aangeven naar welke locatie de bezoeker moet gaan wanneer er op geklikt wordt.
<a href="http://www.cursushtml.be">Ga naar cursushtml.be</a>
In dit geval hebben we een hyperlink aangemaakt, en als er op geklikt wordt gaat de bezoeker naar http://www.cursushtml.be. De URI in de hyperlink kan op verschillende manieren worden genoteerd.
Als het bestand in dezelfde map staat als het huidig document noteer je enkel de naam van het bestand in het attribuut href:
<a href="afbeeldingen.html">Afbeeldingen</a>
Staat het bestand in een map lager, noteer je de map gevolgd met een slash "/" voor het bestand:
<a href="documenten/afbeeldingen.html">Afbeeldingen</a>
Staat het bestand in een map hoger, gebruik je ../ voor het bestand om een map terug te gaan.
<a href="../afbeeldingen.html">Afbeeldingen</a> <a href="../../afbeeldingen.html">Afbeeldingen</a>
Als het bestand zich in een map bevindt dat een map hoger ligt, gebruik je een combinatie van de vorige twee:
<a href="../documenten/afbeeldingen.html">Afbeeldingen</a>
In vorige paragraaf hebben we een eerste hyperlink aangemaakt. Als we willen dat deze pagina wordt geopend in een nieuw venster, gaan we het attribuut target moeten gebruiken. Als je target als waarde _blank geeft, wordt de pagina geopend in een nieuw venster:
<a href="http://www.cursushtml.be" target="_blank">Ga naar cursushtml.be</a>
Als we naar een document verwijzen d.m.v. een hyperlink word je verwezen naar het begin van dit document (bovenaan). De mogelijkheid bestaat namelijk om de bezoeker ergens naar een andere plaats te verwijzen in het document, bijvoorbeeld helemaal beneden of naar een bepaalde kop. Dit kunnen we realiseren door gebruik te maken van het attribuut name. Vervolgens voegen we een spoorwegteken # toe gevolgd door een bepaalde naam op het einde van de URL.
<a href="http://www.cursushtml.be/cursus/HTML_Hyperlinks#Inleiding" target="_blank"> Inleiding van Hyperlinks</a>
Als we nu ergens in ons document het volgende toevoegen:
<a name="Inleiding">Inleiding</a>
Wordt onze hyperlink verwezen naar de paragraaf "Inleiding". Omdat deze paragraaf op dezelfde pagina bevindt waar we nu zijn is dit ook mogelijk.
<a href="#Inleiding" target="_blank">Inleiding van Hyperlinks</a>
Met het title attribuut kan je een tekst instellen die gebruikers te zien krijgen in een tooltip als ze met de muis op de hyperlink gaan staan.
<a href="http://www.cursushtml.be" title="Cursus HTML">Ga naar cursushtml.be</a>
Deze cursus is afkomstig van Cursus HTML
Het is verboden zonder schriftelijke toestemming deze pagina in welke vorm dan ook te publiceren.