Mi-Soft.nl



avatar Hyperlinks 13-10-2013
Hallo allemaal!
In deze tutorial gaan we kijken hoe we links op de website kunnen zetten.



U kunt in het menu hieronder kiezen welk deel van de tutorial u wilt lezen:

De basis

Het maken van een link doen we met de <a> tag.
Het meeste belangrijke attribuut is de "href" , hier plaatsen we namelijk de link in.
De standaard opmaak van een link is als volgt:
<a href = "link hier plaatsen">Tekst voor op de website hier plaatsen</a>
Als we dus een link op de website willen zetten die verwijst naar http://mi-soft.nl dan doen we dat op de volgende manier:
<a href = "http://mi-soft.nl">Klik hier om naar http://mi-soft.nl te gaan</a>
Op uw website ziet u dan het volgende: Klik hier om naar http://mi-soft.nl te gaan
Het is ook mogelijk om een relatieve link (bijv. paginas/pagina2.html) te gebruiken.

Een foto als link gebruiken

Een foto van een link voorzien is voor 2 dingen handig:
We zullen beide dingen behandelen, als eerste de foto met een link naar een andere pagina.
Om dat te doen plaatsen we de code van de img tussen de 2 <a> </a> tags.
Dat zier er dan als volgt uit:
Het logo van google.
En de code
<a href = "http://google.nl"><img src ="images/google.png" alt="Het logo van google." width="317" height="110" /> </a>
U kunt ook de thumbnail gebruiken om naar een groter exemplaar te linken, dat doet u op de volgende manier:
<a href = "images/googlebig.png"><img src ="images/google.png" alt="Het logo van google." width="317" height="110" /> </a>
Het resultaat is dan als volgt:
Het logo van google.

Nog een voorbeeld

U kunt naast images ook de span tag voorzien van een link, dat zal er dan ongeveer zo uit zien:
Dit is een span tag met daar een link tag omheen, dit resulteerd in een klikbare span tag.
De span tag wordt hier uitgebeeld met een gekleurde achtergrond, dit om aan te tonen dat de gehele span klikbaar is.

En de code:
<a href = "http://google.nl">
	<span style ="background:#FFB51D;width:100%;height:35px; float:left; padding:10px; margin:5px;">
			Dit is een span tag met daar een link tag omheen, dit resulteerd in een klikbare span tag.<br />
			De span tag wordt hier uitgebeeld met een gekleurde achtergrond, dit om aan te tonen dat de gehele span klikbaar is.
	</span>
</a>

Linken naar een deel van de pagina

Herrinert u zich nog het kleine menu boven aan de pagina waarmee u gelijk naar delen van de tutorial kunt springen?
Dat zijn links die verwijzen naar een deel van de pagina, en die zijn erg handig.
We kunnen een link op dezelfde pagina maken met behulp van het "name" attribuut in de <a> tag.
Dat ziet er dan zo uit:
< name ="hoofdstuk1"></a><h3> test </h3>
De bovenstaande code plaatst u voor het deel van de website waar u naar toe wilt springen.
Een link maken om er naar toe te springen doet u dan als volgt:
<a href = "#hoofdstuk1">Spring naar hoofdstuk 1</a>
Ik heb hiervoor een voorbeeldpagina gemaakt die u kunt bekijken door hier te klikken.
U kunt de pagina (een .html bestand) ook downloaden door er met de rechtermuisknop op te drukken en te kiezen voor "Doel opslaan als" (save target as).

Het gebruiken van het "name" attribuut is volgens HTML 5 "obsolete", en het gebruiken van een id is nu de beste manier. De correct manier is dus voortaan als volgt:
<h3 id = "hoofdstuk1"> test </h3>
En dit doet exact hetzelfde als:
<a href = "#hoofdstuk1">Spring naar hoofdstuk 1</a>

downloadimage Klik hier om de project bestanden te downloaden.

Gerelateerde artikelen

Over de auteur:
Rick's headshot
Rick van Lieshout
Rick van Lieshout is de eigenaar en administrator van Mi-Soft.nl
Ook is hij een manusje van alles en kan daarom in veel categorieen een steentje bijdragen.
U kunt meer over Rick te weten komen op zijn portfolio.
Rick@Mi-Soft.nl | Portfolio | Facebook | Twitter | Google+ | Youtube | Flickr | LinkedIn