HTMLboek
Hyperlinks
Eén van de meest belangrijke onderdelen van HTML is de Hyperlink. Hyperlinks maken het mogelijk om van de ene pagina naar de andere pagina te navigeren. Ze maken het mogelijk om van je website één samenhangend geheel te maken. En zorgen er voor dat je kunt doorverwijzen naar andere websites op internet.
Het a-element
Hyperlinks worden gemaakt door middel van het element <a>. De a staat voor Anker (Anchor) en dat heeft vooral een historische achtergrond. Om van het element een klikbare hyperlink te maken, moet het attribuut href worden toegevoegd, met als waarde het webadres waar de link naar moet verwijzen. Het element kent een eindtag en de inhoud van het element wordt klikbaar gemaakt. Vaak is de inhoud van <a> een of enkele woorden, maar je kunt er ook hele alinea's, tabellen, afbeeldingen etc. in stoppen die dan in hun geheel klikbaar zijn en verwijzen naar het opgegeven webadres.
Onderstaand voorbeeld plaatst een hyperlink in een tekstalinea:
Als je HTML wil leren, kijk dan eens in HTMLboek!
Absolute URL's
In het voorgaande voorbeeld zagen we een absolute URL. Dit is een volledige URL inclusief http:// of https:// en wordt meestal gebruikt voor verwijzingen naar andere websites. http:// of https:// moet er bij, omdat de hyperlink anders niet werkt.
Relatieve URL's
Naast absolute URL's, kun je ook relatieve URL's gebruiken. Dit is een URL die relatief is ten opzichte van de huidige pagina. Dit is handiger om te verwijzen naar andere pagina's van je website dan absolute URL's, omdat relatieve URL's korter zijn en dus overzichtelijker. En het is handiger omdat je je website makkelijk kunt verhuizen zonder iedere URL te moeten wijzigen, wat vooral van waarde is als je je website vooraf op je eigen computer wil testen voordat je hem online zet.
Wanneer je al je HTML-documenten van je website in dezelfde map hebt staan, zijn relatieve URL's heel eenvoudig: je hoeft als href alleen maar de bestandsnaam van de pagina op te geven waar je naar wilt verwijzen.
Wanneer je gebruik maakt van meerdere mappen, dan is het belangrijk om altijd vanuit de huidige pagina te redeneren. Staat de pagina waarnaar je wil verwijzen in een submap, dan geef je als href de naam van de map, een slash, en tot slot de bestandsnaam van het HTML-document in de betreffende map. Staat de pagina echter in een bovenliggende map, dan gebruik je in plaats van de naam van de map twee puntjes (..) om aan te geven dat je één map naar boven wil.
Hieronder een aantal voorbeelden van absolute en relatieve URL's. Ze verwijzen niet noodzakelijkerwijs naar bestaande pagina's, maar kijk vooral hoe ze door je browser geïnterpreteerd worden:
<a href="http://www.phpboek.net">absolute URL</a><br>
<a href="www.phpboek.net">wat gebeurt er als je http:// vergeet?</a><br>
<a href="index.html">relatieve URL in dezelfde map</a><br>
<a href="map/bestand.html">relatieve URL in onderliggende map</a><br>
<a href="../bestand.html">relatieve URL naar bovenliggende map</a><br>
<a href="map1/map2/bestand.html">relatieve URL naar onderliggende mappen twee niveau's diep</a><br>
<a href="../../bestand.html">relatieve URL naar bovenliggende map twee niveau's naar boven</a><br>
<a href="../map/bestand.html">relatieve URL naar naastgelegen map</a><br>
<a href="map/../bestand.html">relatieve URL naar huidige map; 'map' hoeft niet te bestaan!</a>
</p>
absolute URL
wat gebeurt er als je http:// vergeet?
relatieve URL in dezelfde map
relatieve URL in onderliggende map
relatieve URL naar bovenliggende map
relatieve URL naar onderliggende mappen twee niveau's diep
relatieve URL naar bovenliggende map twee niveau's naar boven
relatieve URL naar naastgelegen map
relatieve URL naar huidige map; 'map' hoeft niet te bestaan!
Openen in een nieuw tabblad
Hyperlinks worden standaard geopend in hetzelfde tabblad (of hetzelfde venster als geen tabbladen worden gebruikt). Voor andere pagina's van je website is dat meestal prima, maar voor hyperlinks naar andere websites wil je deze misschien liever in een nieuw tabblad openen, zodat bezoekers jouw website niet meteen kwijt zijn. Dit kan door aan het <a>-element nog een extra attribuut toe te voegen. Dit is het attribuut target wat je als waarde _blank mee moet geven om er voor te zorgen dat de hyperlink in een nieuw tabblad wordt geopend.
Veel websites kiezen er tegenwoordig voor om ook hyperlinks naar externe websites toch in hetzelfde tabblad te openen. Hierdoor heeft de bezoeker zelf de keuze om al dan geen nieuw tabblad te willen, in plaats van dat jij dat bepaalt. Vaak wordt een externe link dan wel voorzien van een extra icoontje zodat duidelijk is dat de link naar een externe website leidt. De bezoeker kan dan bij het aantreffen van een link naar een andere website zelf kiezen om deze met behulp van de linkermuisknop in hetzelfde tabblad te openen, of juist met behulp van de middelste muisknop (scrollwiel indrukken) er voor te kiezen om de link in een nieuw tabblad te openen.
HTMLboek ©2018 Jasper Vries.
HTMLboek mag vrij gebruikt worden, zie de pagina Licentie voor meer informatie.
Deze pagina is het laatst bijgewerkt op 03-07-2018.
htmlboek.net