HTML-links

HTML-links zijn hyperlinks die ervoor zorgen dat je van de ene pagina naar de andere kan navigeren door te klikken op een stukje tekst of een afbeelding. Deze koppelingen zijn noodzakelijk om een website op te bouwen, want een site bestaat nu eenmaal uit een verzameling van webpagina's die met elkaar verbonden zijn door middel van hyperlinks.

Een hyperlink wordt gedefinieerd door de <a> tag. Binnen die tag komt minstens het attribuut href (= hypertext reference) waarmee je verwijst naar het bestemmingsadres.

Absolute en relatieve koppelingen

Een absoluut pad

Dit is een koppeling naar een document (pagina) op een andere website. Concreet wil dit zeggen dat de hyperlink ons brengt naar een webpagina, document, afbeelding ... op een andere server dan degene waar onze website gehost wordt. Een absoluut pad begint altijd met http:// (of https:// of ftp://).

Voorbeeld van een absolute hyperlink

<!DOCTYPE html>
<html>
  <head>
    <title>HTML-links</title>
  </head>
  <body>
    <h1>Absolute hyperlink</h1>
    <a href="http://www.onderwijsweb.net/">Onderwijsweb</a>
  </body>
</html>

Een relatief pad

Dit is een koppeling tussen verschillende pagina's, afbeeldingen of documenten binnen onze eigen website. De verbinding gebeurt binnen dezelfde server.

Stel je voor dat je twee pagina's hebt gemaakt en plaatst die binnen eenzelfde map (op je computer of op een server). De ene genaamd pagina1.html en de andere pagina2.html. Dan kan je in het document pagina1.html een hyperlink opnemen naar pagina2.html en omgekeerd.

Code pagina1.html | Voorbeeld

<!DOCTYPE html>
<html>
  <head>
    <title>Pagina 1</title>
  </head>
  <body>
    <h1>Pagina 1</h1>
    <a href="pagina2.html">Ga naar pagina 2</a>
  </body>
</html>

Code pagina2.html | Voorbeeld

<!DOCTYPE html>
<html>
  <head>
    <title>Pagina 2</title>
  </head>
  <body>
    <h1>Pagina 2</h1>
    <a href="pagina1.html">Ga naar pagina 1</a>
  </body>
</html>

Het target attribuut

Het target attribuut wordt gebruikt om aan te duiden hoe (in welk venster) de hyperlink geopend moet worden.

Target	Beschrijving
_blank	Opent het gekoppelde document in een nieuw venster of tabblad.
_self	Opent het gekoppelde document in hetzelfde frame/venster als hetgeen waarin geklikt werd (standaard optie).
_parent	Opent het gekoppelde document in het bovenliggende frame.
_top	Opent het gekoppelde document in het volledige venster van de browser.
framenaam	Opent het gekoppelde document in het benoemde frame.

Voorbeeld van een absolute hyperlink die opent in een nieuw venster

<!DOCTYPE html>
<html>
  <head>
    <title>HTML-links</title>
  </head>
  <body>
    <h1>Absolute hyperlink die opent in een nieuw venster</h1>
    <a href="http://www.onderwijsweb.net/" target="_blank">Onderwijsweb</a>
  </body>
</html>

Download: bovenstaande oefeningen (.zip)