Skip to main content

Les 5 – Pagina's koppelen

Wat ga je leren?​

Je leert hoe je een klikbare link maakt met de <a> tag en hoe je een link in een nieuw tabblad opent.

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 — je kunt ze aanklikken. Let op: de editor is beveiligd, dus sommige sites blokkeren het laden in een klein venster.

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="")?
  • 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.

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.

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 — de browser weet niet waar naartoe te navigeren. Je ziet misschien nog wel de blauwe kleur, maar klikken doet niets. Vergeet href nooit.