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 het zelf.​

Editor laden...

Investigate​

Experimenteer met de code:

  • Wat gebeurt er als je href leeg laat (href=""), en wat als je er een # in zet (href="#")?
  • Wat zie je als je de tekst tussen de <a> tags vervangt door een <img> tag? (Afbeelding als link.)
  • Verwijder target="_blank" — wat verandert er?

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.