## 11. Een hyperlink maken

Wanneer je een website bouwt zijn links heel belangrijk. Een link maakt het mogelijk om:

- Verschillende html-pagina's met elkaar te verbinden
- Naar een ander stuk tekst van dezelfde html-pagina te springen
- Naar een stuk tekst binnen een ander html-pagina te springen

Je gebruik hiervoor de a-tag (anchor). Je kunt een a-tag niet gebruiken zonder attribuut. In dit geval hebben we het href-attribuut nodig. Met het href-attribuut kun je namelijk aangeven wat er moet gebeuren als er op de hyperlink geklikt wordt. Als je een stukje tekst 'klikbaar' maakt wordt die tekst door de browser blauw en onderstreept getoond.

Verbinden van verschillende html-pagina's

Stel je voor dat je vanaf je html-pagina naar een andere html-pagina wilt springen. Die andere html-pagina heb je ook gemaakt. De pagina heet tweede.html en je hebt hem neergezet in dezelfde map als de eerste pagina.

Je kunt nu van de eerste naar de tweede pagina springen op de volgende manier:

Je hebt nu een stukje tekst 'klikbaar' gemaakt, maar datzelfde kun je ook met een plaatje doen. Op je webpagina zie je dat het plaatje klikbaar is, doordat je muis verandert in een handje wanneer je er overheen gaat.

Springen naar een ander stuk van de pagina

Je kunt ook aangeven dat je naar een ander stuk van dezelfde pagina wilt springen. Dit is vooral handig bij lange pagina's. Je gebruikt weer de a-tag. Maar je hebt nu nog iets extra's nodig. Je moet de browser namelijk laten weten wáár je naar toe wilt springen. Op de plekt in html-code waar je terecht wilt komen moet ook een anchor staan.

- "<a href="#onder">
  Ga naar het onderste stuk
  </a> "
  Hier geef je aan dat je naar een plek in je pagina wilt
  springen met de naam 'onder'. Let vooral op het hekje!
- "<a name="onder"
  Hier geef je de plek aan waar naartoe gesprongen moet worden. Deze code moet je dus neerzetten op de plek in de html-code waar je heen wilt springen.

Springen naar een stuk tekst van een andere pagina

Hier combineer je allebei de mogelijkheden.

- "<a href="tweede.html#onder">
  ga naar onderen op de tweede blz
  </a>"

Opdracht 11

Waarschijnlijk heb je inmiddels een aardig aantal voorbeeldpagina's. Link drie van deze pagina's aan elkaar. Zorg dat je ook terug kunt naar de vorige pagina.

Maak een link naar een specifiek stuk tekst op een andere pagina.

Laat het resultaat zien aan je docent.

### Gesproken tekst: hyperlink:

Je browser kan dit bestand niet afspelen.