Ga naar hoofdinhoud

Pagina's koppelen

Wat ga je leren?​

Een klikbare link maak je met de <a>-tag. Je ziet ook hoe je hem in een nieuw tabblad laat openen.

Theorie​

Een link maak je met de <a> tag. Het href attribuut bevat het webadres:

<a href="https://www.wikipedia.org">Ga naar Wikipedia</a>

De tekst tussen de tags is wat de gebruiker ziet en kan aanklikken.

Voeg target="_blank" toe om de link in een nieuw tabblad te openen:

<a href="https://www.wikipedia.org" target="_blank">Wikipedia (nieuw tabblad)</a>
info

In de preview hieronder werken links: een link zonder target opent in het voorbeeldvenster zelf, een link mét target="_blank" opent een echt nieuw tabblad. Heb je in het voorbeeld een link gevolgd, dan verschijnt erboven de knop Terug naar je pagina; je code staat nog in de editor. Sommige sites weigeren zich in een klein venster te laten tonen; dan blijft het voorbeeld leeg en helpt target="_blank" juist.

En knoppen?​

Naast links zie je op websites vaak knoppen — die maak je met de <button> tag. Een knop alleen doet niets, je hebt JavaScript nodig om iets te laten gebeuren bij een klik:

<button>Klik mij</button>

In de JavaScript-cursus leer je hoe je een knop interactief maakt. Voor nu: weet dat <button> bestaat en op een gewone knop lijkt.

Predict​

Wat is het verschil tussen een link met en zonder target="_blank"?

Klik hier voor het antwoord
  • Zonder target="_blank": de pagina opent in hetzelfde venster/tabblad. De huidige pagina verdwijnt.
  • Met target="_blank": de pagina opent in een nieuw tabblad. De huidige pagina blijft open.

Probeer en onderzoek​

Probeer eerst zelf, klap dan het antwoord uit.
  1. Maak de href van de Wikipedia-link leeg (href="") en klik erop. Wat gebeurt er? En als je er href="#" van maakt?
    AntwoordIn beide gevallen blijf je op je eigen pagina. Met een lege href laadt de pagina opnieuw, en # springt naar de bovenkant van de pagina. Omdat je pagina kort is, zie je bij allebei niets veranderen.
  2. Vervang de tekst Open Google in een nieuw tabblad door een afbeelding, bijvoorbeeld <img src="https://picsum.photos/id/237/300/200" alt="Een hond" width="150">. Wat gebeurt er als je op de afbeelding klikt?
    AntwoordDe afbeelding is nu de link. Je muis wordt een handje als je erover beweegt, en een klik opent Google in een nieuw tabblad, net als eerst met de tekst.
  3. Verwijder target="_blank" bij de Google-link en klik erop. Wat verandert er?
    AntwoordGoogle opent niet meer in een nieuw tabblad maar in het voorbeeld zelf, en erboven verschijnt de knop Terug naar je pagina. Google weigert zich in zo'n klein venster te laten tonen, dus je ziet een foutmelding in plaats van de zoekpagina.
Editor laden...

Modify​

Opdracht: Voeg een link toe naar de Wikipedia-pagina over jouw favoriete onderwerp. Zorg dat de link in een nieuw tabblad opent.

Editor laden...
Tip

Zoek op Wikipedia naar jouw onderwerp en kopieer de URL uit de adresbalk. Gebruik target="_blank" om in een nieuw tabblad te openen.

Antwoord
<p>
  <a href="https://nl.wikipedia.org/wiki/Hond" target="_blank">
    Meer over honden op Wikipedia
  </a>
</p>

Make​

Opdracht: Maak een navigatiemenu met links naar je 3 favoriete websites. Zet de links in een ongeordende lijst (<ul>) en laat ze openen in een nieuw tabblad.

Editor laden...
Tip

Zet in elke <li> een <a> tag met een correcte href en target="_blank".

Antwoord
<h2>Mijn Favoriete Websites</h2>
<ul>
  <li><a href="https://www.youtube.com" target="_blank">YouTube</a></li>
  <li><a href="https://www.netflix.com" target="_blank">Netflix</a></li>
  <li><a href="https://www.twitch.tv" target="_blank">Twitch</a></li>
</ul>

Er gaat iets mis​

href vergeten

<a>Klik hier</a>

Zonder href is de tekst niet klikbaar, en je ziet het meteen: de browser laat hem zwart en zonder streepje, precies als gewone tekst. Blauw en onderstreept is dus geen opmaak die bij de <a>-tag hoort, maar bij een <a> die ergens naartoe wijst. Zie je je link niet oplichten, dan ontbreekt href.