Zonder hyperlinks zou het website niet bestaan. het adres (url) kan een volledige url (= externe link) zijn die begint met http://mijnhomepagina.be maar ook een adres binnen de website (= interne link).

De simpele tag <a> ... </a> is zonder twijfel de meest magische van het web. Een hyperlink brengt ons van de ene pagina naar de andere, van de ene website naar de andere. Het attribuut href bevat de naam van het bestemmingsdocument in de vorm van een relatief of absoluut pad.

Een interne hyperlink, ook wel relatieve adressen genoemd, stuurt de bezoeker door naar een pagina binnen dezelfde website.

Een externe hyperlink, ofwel absolute adressen genoemd, stuurt de bezoeker door naar een andere website.

https://www.w3schools.com/tags
https://www.w3schools.com/tags/link_image

1.1 Relatieve adressen

  • Een relatief adres is een adres dat zich verhoudt tot de pagina waarin dit adres wordt opgeroepen, voorbeeld:
    <a href="contact.html"> Contact </a>
    
  • Ligt het bestand dieper, bijvoorbeeld in de map 'inhoud', dan krijgt de url een ander adres:
    <a href="inhoud/contact.html"> Contact </a>
    
  • Iets moeilijker wordt het als vanuit deze pagina moet worden terug gestuurd naar bijvoorbeeld de index.html-pagina. dat gaat als volgt:
    <a href="../index.html"> Contact </a>
    
    Deze vermelding stuurt naar een map omhoog in de mappenstructuur. Je kan dit systeem verder doortrekken: ../../ zijn 2 mappen omhoog. Het werkt, maar is niet ideaal. het laatste voorbeeld kan ook een absoluut adres krijgen wanneer de website online komt.

1.2 Absolute adressen

Een website kan als adres http://pti-ninove.be hebben. de server waarop de site draait weet dat het adres eigenlijk http://pti-ninove.be/index.html is. Daarom benoem je de eerste webpagina altijd index.html, zodat de browser weet dat dit de eerste webpagina wordt!

De adressen zijn als volgt opgebouwd:

  • http:// Een type-indicatie van het internet adres (= voorvoegsel of protocol), andere typen zijn ftp, file en news. Er bestaat ook het protocol https://, dit betreft een pagina die versleutelde informatie verwerkt.
  • www Een niet altijd noodzakelijke toevoeging in een url.
  • pti-ninove.be domeinnaam + taalcode = server-adres Elk adres is gekoppeld aan een numerieke waarde. dit noemen we het ip-adres vb. 87.223.180.85. Dit is het echte unieke adres van de website.

Een hyperlink hoeft niet per se uit tekst te bestaan. Ook een afbeelding kan als hyperlink fungeren. Om van een afbeelding een link te maken moeten we een img-element opnemen binnen een a-element. Vaak wordt op het logo van de website een terug link geplaatst naar de homepagina.

<a href="index.html">
<img src="logo.svg" width="250" alt="logo site" /> 

1.3 E-mailadres als koppeling

Een bijzondere vorm van een hyperlink is een e-mailadres dat een koppeling legt naar het e-mail programma op de computer van de webbezoeker. Bij deze speciale link begint het href-attribuut met het e-mailprotocol mailto: waarna een e-mailadres staat, bijvoorbeeld:

Stuur een <a href="mailto:info@pti-ninove.be"> e-mail </a>

Bij een mailto-koppeling is het mogelijk alvast het onderwerp van het e-mailbericht in te vullen. Schrijf dan na het e-mailadres een vraagteken, de tekst subject= en daarna de onderwerptekst.

Stuur een <a href="mailto:info@pti-ninove.be?subject=webreactie"> e-mail </a>

1.4 Hyperlink naar andere soorten documenten

De meeste hyperlinks verwijzen naar een html-document, maar dat is geen verplichting. Zo kunt u bijvoorbeeld rechtstreeks linken naar een afbeelding, geluidsbestand, pdf-bestand, enz... Levert u informatie als pdf, verwijs de bezoeker dan naar de plaats waar hij de benodigde gratis Reader kan downloaden.

<a href="muziek.mp3"> <img src="luidspreker.gif" alt="beluister fragment" width="20" /> </a>

Levert u informatie als pdf, verwijs de bezoeker dan naar de plaats waar hij de benodigde gratis Reader kan downloaden.

<a href="inschrijvingsformulier.pdf"> Download het inschrijvingsformulier </a>
<a href="https://acrobat.adobe.com/nl/nl/acrobat/pdf-reader.html"> Download
Adobe Reader
</a>