Studieanker

# Links

# Inleiding

Je weet ondertussen dat HTML staat voor Hyper Text Markup Language. De "Hyper" staat voor hyperlinks: links tussen pagina's op het web. Het spreekt dus ook voor zich dat deze functionaliteit goed voorzien is binnen HTML.

Je hebt vier verschillende soorten links:

  • Links naar externe pagina's: deze links brengen de bezoeker naar een volledig andere website. Bv. naar Wikipedia.org.
  • Links naar interne pagina's: deze links brengen de bezoeker van het ene deel van je website naar een ander deel. Bv. van de homepagina naar de contactpagina.
  • Bladwijzerlinks: deze links doen de browser naar een ander stuk op een pagina springen. Bv. een inhoudsopgave bij een lang artikel of een link om terug naar boven te gaan.
  • E-mail links: deze links hebben een ander formaat en laten de bezoeker toe een e-mail te versturen.

Het HTML-element voor het maken van eender welk type link is het anchor element <a>. Het is een inline element dat de tekst tussen de openings- en sluitingstag klikbaar maakt om de link te activeren.

Bij een <a> element hoort altijd een href attribuut. Dit attribuut neemt als waarde een URL (Uniform Resource Locator) aan die verwijst naar de locatie van de interne of externe pagina waarnaar de gebruiker kan navigeren.

Een externe link is een link naar een webpagina die geen deel uitmaakt van jouw website. Voor zulke links is de waarde van het href attribuut gelijk aan de URL van de webpagina waarnaar je wil linken.

<p>Meer informatie op <a href="https://nl.wikipedia.org/">Wikipedia</a>.</p>

Een interne link is een link naar een webpagina die deel uitmaakt van jouw website. Voor zulke links is de waarde van het href attribuut gelijk aan het pad naar de pagina. Het pad kan een absoluut of relatief pad zijn, waarbij in de meeste gevallen een relatief pad de voorkeur geniet.

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="producten/lijst.html">Producten</a></li>
</ul>

# Openen in nieuw tabblad

Om een link te openen in een nieuw tabblad van de browser voeg je het target attribuut toe aan een <a> element, met als waarde _blank. Dit is vooral handig voor externe links, anders zou de gebruiker (te snel) wegnavigeren van jouw website.

<p>Meer informatie op <a href="https://nl.wikipedia.org/" target="_blank">Wikipedia</a>.</p>

Wanneer je rechtstreeks linkt naar een bestand (geen HTML-pagina) kan de browser dit op twee manier interpreteren:

  • Probeert het type bestand te openen in de browser. Voorbeelden hiervan zijn afbeeldingen, PDF-bestanden, audio- en videobestanden, ...
  • Geeft je de mogelijkheid het bestand op te slaan op een zelfgekozen locatie

Soms wil je echter de gebruiker de mogelijkheid geven op een link te klikken die altijd zal geïnterpreteerd worden als een downloadlink. Zo kan je de gebruiker dan ook rechtstreeks afbeeldingen, PDF-bestanden, ... laten downloaden naar hun computer. Om dit gedrag te forceren gebruik je het attribuut download. Het is voldoende het attribuut op te nemen binnen het <a> element, maar het kan ook een optionele waarde krijgen. Wanneer je het download attribuut een waarde geeft zal deze waarde gebruikt worden als bestandsnaam voor het gedownloade bestand. De gebruiker kan dit alsnog veranderen als hij of zij dat wilt!

Download het verlag van de vergadering
<a href="verslagen/vergadering_12_03_2018.pdf" download>hier</a>.

# Relatieve paden

Relatieve paden staan relatief ten opzichte van het pad van de huidige pagina. Bekijk het volgende voorbeeld van een mogelijke mappenstructuur voor een website:

Mappenstructuur

Wanneer er geen exacte pagina wordt opgegeven in de url, wordt er in de map waarnaar de url linkt gezocht naar een index.html bestand. Dit kan gelden voor de root map (hoogste niveau, de bronmap), zowel als de onderliggende mappen van de mappenstructuur.

In de voorbeelden die volgen zal er toch steeds expliciet naar een index.html pagina verwezen worden om de structuur van paden duidelijk te maken.

In dit voorbeeld zal de gebruiker bij het betreden van je website eerst naar de index.html pagina geleid worden.

De mappen onder de root-map noemt men "submappen" van de hoofdmap. Deze structuur dient om de organisatie van grotere websites overzichtelijk te maken. Om interne links en relatieve URL's beter te begrijpen gaan we naar een aantal voorbeelden kijken gebaseerd op de mappenstructuur uit de bovenstaande afbeelding:

Op de hoofdpagina index.html in de hoofdmap staat de volgende interne link naar het contactformulier op je website:

<a href="contacteer.html">Contacteer ons</a>

De pagina contacteer.html bevindt zich in de hoofdmap "root". Omdat we met relatieve URL's werken, moeten we geen volledig pad ingeven zoals bij een absolute (volledige) URL. De browser zoekt naar de pagina binnen de huidige map.

Op de hoofdpagina index.html in de hoofdmap staat de volgende interne link naar het overzicht van de lessen:

<a href="lessen/index.html">Overzicht lessen</a>

We navigeren naar de onderliggende map "lessen" door de mapnaam eerst op te geven in de relatieve url, gevolgd door een schuine streep en de paginanaam.

Als tweede stap klikt de gebruiker nu op een link die hem of haar naar de tweede les brengt vanuit het overzicht:

<a href="les2/index.html">Les 2</a>

Omdat we ons al in de map lessen bevinden (het overzicht staat in deze map), moeten we opnieuw enkel de naam van de submap opgeven om er naartoe te navigeren.

In het vorige voorbeeld gingen we altijd maar met één stap vooruit: van hoofdpagina naar overzicht naar les. We kunnen echter ook een interne link maken die rechtstreeks van de hoofdpagina naar een les linkt:

<a href="lessen/les2/index.html">Les 2</a>

Zoals je ziet kunnen we in een relatieve URL meerdere submappen diep navigeren.

Stel: je wil een link maken vanuit het lessenoverzicht (/lessen/index.html) die de bezoeker terug naar de hoofdpagina brengt. Dit doe je als volgt:

<a href="../index.html">Terug naar hoofdpagina</a>

De twee puntjes .. refereren naar de bovenliggende map of oudermap. Je gaat dus van de map lessen naar de hoofdmap root.

We kunnen op dezelfde manier meerdere niveaus van mappen terugkeren. Als we vanuit de tweede les (/lessen/les2/index.html) een link willen maken terug naar de hoofdmap root:

<a href="../../index.html">Terug naar de hoofdpagina</a>

Per niveau dat je wil terugkeren maak je dus gebruik van de twee puntjes .. en de schuine streep /.

Bladwijzerlinks zijn links die de gebruiker niet alleen naar een bepaalde pagina leiden, maar ook naar een bepaald deel van de pagina. Dit heeft als voordeel dat een gebruiker op een lange pagina niet zelf moet zoeken naar een bepaald onderdeel, sectie of hoofdstuk door manueel te scrollen, maar er automatisch naar het juiste punt gesprongen wordt.

Om een bladwijzerlink te faciliteren moet het punt waarnaar gesprongen wordt eerst voorzien worden van een element met een zelfgekozen id. Dit id voeg je toe als attribuut aan het element.

<h2 id="hoofdstuk7">Hoofdstuk 7</h2>
<p>In dit hoofdstuk gaan we...</p>

Vervolgens kan er op een andere plaats op de pagina óf op een gans andere pagina een bladwijzerlink gemaakt worden naar het gekozen id. Indien het gaat om bladwijzerlink op dezelfde pagina is het genoeg het <a> element te voorzien van een href attribuut met waarde #idnaam waarbij 'idnaam' gelijk is aan het gekozen id. Het # symbool is dus de hint die de browser nodig heeft om te weten dat het gaat om een bladwijzerlink. Indien de link naar een bladwijzer op een andere pagina verwijst, wordt de #idnaam verplaatst naar het einde van het href attribuut, geplakt aan het interne of externe webadres.

<!-- Bladwijzerlinks op zelfde pagina -->
<ol id="boven">
    <li><a href="#hoofdstuk1">Hoofdstuk 1</a></li>
    <li><a href="#hoofdstuk2">Hoofdstuk 2</a></li>
    <li><a href="#hoofdstuk3">Hoofdstuk 3</a></li>
</ol>

<!-- De bladwijzerlink kan ook terug naar boven springen -->
<h3 id="hoofdstuk3">Hoofdstuk 3</h3>
<p>In hoofdstuk 3 bespreken we het thema...</p>
<small>Terug naar <a href="#boven">boven</a></small>

<!-- Externe link met bladwijzer -->
<a href="https://nl.wikipedia.org/wiki/Michelin#Geschiedenis">Link</a>
naar de geschiedenis van de Michelin-gids.

Een <a> element kan ook gebruikt worden om de gebruiker de kans te geven een email te sturen naar een bepaald emailadres. Dit gebeurt echter niet automatisch, maar opent voor de gebruiker een venster voor het opstellen van een nieuw bericht in het standaard mailprogramma van de gebruiker. Het is dus niet meer dan een korte binnenweg voor de gebruiker, zeker geen geautomatiseerd mailingsysteem!

Een mail link neemt als href attribuut de waarde mailto: aan, gevolgd door het emailadres van de ontvanger:

Stuur ons een <a href="mailto:info@telenet.be">mailtje</a>.

Je kan ook extra gegevens doorgeven aan de link, met informatie over de volgende optionele onderdelen:

  • cc: CC of BCC adressen
  • subject: Onderwerp
  • body: Lichaam van de mail

Het doorgeven van deze onderdelen gebeurt door een nieuwe URL samen te stellen die achteraan de bestaande mailto: waarde wordt toegevoegd. Om aan te duiden dat de extra info op de mailto volgt, wordt er achteraan het emailadres van de ontvanger eerst een vraagteken ? toegevoegd.

<a href="mailto:adres@ontvanger.be?">Mailen</a>

Vervolgens kunnen de onderdelen toegevoegd worden, één voor één, door ze te benoemen met hun verkorte onderdeelnaam (opgenomen in de lijst bovenaan), gevolgd door een =. Om meerdere onderdelen toe te voegen worden ze gescheiden door een &.

Een volledige email link met alle onderdelen opgenomen in de link zou er als volgt kunnen uitzien:

Mail naar de <a href="mailto:bedrijf@proximus.be?cc=info@proximus.be&bcc=facturatie@proximus.be&subject=klacht over service&body=tav de ombudsdienst">ombudsdienst</a>.

De bovenstaande link in het voorbeeld opent een nieuwe mail met volgende opmaak:

Email link voorbeeld

← Afbeeldingen →