De link is de methode om webpagina's of documenten aan elkaar te koppelen. Het is hierdoor mogelijk om op een eenvoudige manier van pagina naar pagina of website te gaan.
Een link item wordt tussen een <a> en </a> tag geplaatst waardoor dit een link wordt.
Om de browser te vertellen waarnaar de link verwijst wordt het href attribuut gebruikt. De code wordt dan:
<a href="target.html">Dit is een link</a>
We kunnen aan de code zien dat in dit geval de target pagina in dezelfde map staat als deze pagina. We noemen dit een relative link. Ook kunnen we path informatie toevoegen als we een pagina in een ander map willen bereiken.
Naast de relative link is er ook nog de absolute link. Hierbij wordt dan ook de URL toegevoegd. Dit kunt u in de onderstaan code zien.
<a href="http://www.anderesite.nl">Dit is een link naar een andere site</a>
<a href="http://www.anderesite.nl/map/index.html">Dit is een link naar een pagina op een andere site</a>
Dit geeft het onderstaande resultaat.
Dit is een link naar een andere site
Dit is een link naar een pagina op een andere site
We zien dat een link een afwijkende kleur krijgt en standaard wordt deze dan ook onderstreept.
De kleur van de tekst is standaard blauw wanneer de pagina nog niet bezocht is. Hebben we een pagina al eens eerder bezocht dan krijgt de link de kleur magenta en is ook standaard onder streept.
Naast de opties is er ook nog de mogelijkheid om wanneer men de muiscursor op de link plaats deze een ander kleur te geven. De kleur is rood en is standaard ook ook onderstreept.Naast andere pagina's kunnen ook afbeeldingen of documenten dienst doen als doel. Om dit te bereiken gebruiken we dan de documentnaam zoals document.pdf.
Een voorbeeld om een PDf document als doel te gebruiken gaat als volgt:
<p>U kunt meer lezen in onze <a href="flyer.pdf">flyer</a>.</p>
We gaan ervan uit dat de flyer in dezelfde map staan als de teksts naar deze map.
Willen we een afbeelding als thumbnail gebruiken met een link naar de fullsize versie dien we dat als volgt:
<p><a href="foto01.jpg"><img src="foto01_thumb.jpg ..... /></a></p>
De thumbnail van de afbeelding wordt nu een link naar de fullsize afbeelding. Thumbnails zelf maken van de afbeelding.
Naast de verplichte href zijn er ook nog enkele optionele attribuuts.
Een hiervan is title, welke als effect heeft dat het een tekst laat zien als men er met de muiscursor op gaat staan. Hierin kun je dan een hulptekst in zetten.
<a href="http://www.anderesite.nl" title="Dit staat in de title">
Een voorbeeld hiervan staat hier.
De mail link is een link die de mailclient op de pc van de gebruiker opstart. Hierbij wordt tegelijk het mailadres geplaats op de aanregel.
De code wordt als volgt gemaakt:
<a href="mailto:info@mijnsite.nl">Link tekst</a>
U kunt ons mailen en we zullen zo snel mogelijk contact met u opnemen.
Een anker is een punt op de pagina waar een link op gericht kan worden. Handig als je onder aan de pagina referenties hebt waar je in de tekst naar toe verwijst. Ook kun je naar een ander pagina verwijzen en de browser direct het juiste punt boven in het venster plaatsen.
De code voor een anker is:
<a id="note22"></a>
Om naar dit punt te springen maken we de volgende link aan:
<a href="#note22" class="note">(22)</a>
U kunt zien dat in de href een # staat, waarmee wordt aangegeven dat dit het ankerpunt is. Voor het # teken kan ook een paginanaam worden geplaatst.