The English, American or U.S. (United States) Flag De Nederlandse Vlag, de vlag van Nederland

Cursus HTML - Les 6: Hyperlinks

Hyperlinks (links) zijn een soort koppelingen, je kunt verschillende pagina's ermee aan elkaar koppelen. Een hyperlink is een tekst waar je op kunt doorklikken, om naar een andere pagina te gaan. Met een hyperlink kun je verwijzen naar andere websites, andere pagina's, naar een bepaalde plek op een pagina, of naar een e-mailadres.

Linken naar andere websites

Links maken gebeurt altijd met het <a>-element. Een link maken naar een andere website gaat als volgt:

<a href="http://host/path">
    Tekst waar de gebruiker op kan klikken
</a>
Daarbij is host de computer (het ip-adres / domeinnaam) waarop het bestand staat, en path het path (de directory / map waarin het bestand staat, en het bestand). Voorbeeld:
<a href="http://nl.wikipedia.org/wiki/Hyperlink">
    Wikipedia over Hyperlinks
</a>
Die code heeft als resultaat: Wikipedia over Hyperlinks

Als er geen speciaal bestand gezocht wordt, maar gewoon een website, kun je path weglaten:

<a href="http://www.google.com/">
    Ga naar www.google.com
</a>
Heeft als resultaat: Ga naar www.google.com

Linken naar andere pagina's, binnen je eigen website

Linken naar andere pagina's binnen je eigen website gaat bijna hetzelfde als linken naar andere websites, alleen kun je dan host weglaten:

<a href="plaatjes.php">
    Terug naar de vorige les
</a>
Geeft als resultaat: Terug naar de vorige les

Linken naar een bepaalde plek

Als je wilt linken naar een bepaalde plek van de pagina, moet je eerst de plek definieeren waar hij naartoe moet springen:

<a name="pleknaam"></a>
Een plek moet dus een naam hebben.
Nadat je een plek hebt gedefinieerd, kun je er als volgt naar linken:
<a href="#pleknaam">
    Naar boven, naar de zojuist gedefinieerde plek
</a>
Probeer het maar eens: Naar boven, naar de zojuist gedefinieerde plek
Zoals je ziet, kun je linken naar een plek door achter de URL '#' (hekje) en dan de naam van de plek te zetten. Op die manier kun je ook linken naar plekken in andere pagina's, of zelfs plekken in hele andere websites.

Plaatjes / afbeeldingen als links gebruiken

Een plaatje als link gebruiken is heel makkelijk: je vult gewoon tussen <a> en </a> een plaatje (met <img src="">) in.
Hier is een voorbeeld:

<a href="http://www.google.com/">
    
<img src="img/google.gif">
</a>
Dat voorbeeld maakt een link naar Google, met het logo van Google als link:
Om de blauwe rand om het plaatje te laten verdwijnen, kun je het attribuut border van het plaatje instellen op "0":
<a href="http://www.google.com/">
    
<img src="img/google.gif" border="0">
</a>
Dat voorbeeld ziet er zo uit:

Als je een link maakt van een plaatje, heet dat een clickable image (een 'aanklikbaar plaatje').

Linken naar een e-mailadres

Je kunt ook een link maken naar een e-mailadres. Als de gebruiker daarop klikt, kan hij een e-mail sturen naar het opgegeven e-mailadres. Het werkt als volgt:

<a href="mailto:emailadres">
    Stuur een e-mail!
</a>
Voor e-mailadres vul je een e-mailadres in:
<a href="mailto:info@simondevries.com">
    Stuur een e-mail naar info@simondevries.com!
</a>
Probeer het maar eens uit: Stuur een e-mail naar info@simondevries.com!

Je kunt nu ook hyperlinks maken. In de volgende les leer je hoe je lijsten kunt maken.

⇒ Ga verder met Les 7: Lijsten
← Ga terug naar Les 5: Plaatjes
↵ Terug naar de HTML-cursus


Was deze informatie nuttig? Zo ja, overweeg dan een linkje op uw website te plaatsen:
Bedankt!