Hyperlinks

Een van de belangrijkste voordelen van webpagina’s boven boeken, is het gebruik van hyperlinks. Een hyperlink – vaak kortweg link genoemd – verwijst naar een andere webpagina of naar een ander stuk op dezelfde webpagina. Door op de hyperlink te klikken, open je die andere webpagina automatisch.

Een hyperlink maak je met het <a>-element. (anchor)

<html>

<head>

     <title>Voorbeeld van een hyperlink</title>

</head>

 <body>

     <a href=”simpel.html”>Lees verder bij simpel</a>

     voor een voorbeeld van een simpele webpagina.

</body>

</html>

 

In bovenstaand voorbeeld staat ‘Lees verder bij simpel’  tussen de begintag en de eindtag. Hierdoor wordt dat een hyperlink.

Parameter

Waarheen de hyperlink verwijst, wordt in de begintag aangegeven met een zogenoemde parameter. Deze parameter heeft de naam href, een afkorting van ‘hyperlink reference’.

De waarde die je meegeeft aan de href-parameter is een zogeheten URL: Universal Resource Locator. Elk bestand op het World Wide Web – of dat nu een HTML-document, een afbeelding, een videofragment of een programma is – heeft zijn eigen URL. Met een URL kun je dus verwijzen naar een bestand op het World Wide Web.

 

HTML Links - kleuren

Als je met je muis over de link gaat, gebeuren er twee dingen:

1. de pijl verandert in een handje

2. de kleur van de link verandert

Standaard geldt dit voor alle browsers:

1. een niet bezochte link is onderstreept en blauw

2. een bezochte link is onderstreept en paars

3. een actieve link (dus als je er met je muis opstaat) is onderstreept en rood.

Later zullen we zien dat we dit met CSS kunnen veranderen.

Een tweede pagina

Uiteraard kun je een hyperlink ook gebruiken om naar een tweede pagina van je website te gaan. Ook hiervoor gelden de beperkingen ten aanzien van directories (mapjes), de verwijzing is het makkelijkste als de pagina's allemaal in hetzelfde mapje staan.

Voorbeeld:

de verwijzing naar je tweede pagina die bijvoorbeeld index2.html heet is als volgt:

<a href = "index2.html">pagina 2</a>

Navigatie

Let er op dat als je site uit meerdere pagina's bestaat, het gevaar bestaat dat de bezoeker verdwaalt.

Zorg altijd voor goede navigatie, maak op iedere pagina in ieder geval een home knop.

Opdrachten

1. Geef aan welke fouten er zitten in onderstaande broncode. Herschrijf de broncode zodat hij wel in orde is. Sla het bestand op onder de naam instruct.html.

 

<html> 

<title>Titel</title>

 

<body>

     Breng een bezoekje aan de website van<a URL=”www.instruct.nl”>Instruct</a>.

</body>

</html>

 

2. Maak deze webpagina zo nauwkeurig mogelijk na. Sla het bestand op onder de naam beginner.html. De koppeling is met http://www.handleidinghtml.nl/

3. Maak deze webpagina zo nauwkeurig mogelijk na. Zet vervolgens de plaatjes in het midden.

Sla het bestand op onder je naam met het volgnummer 2 dus als je Jos heet Jos2.html en stuur het naar leerbeer@gmail.com met als onderwerp html4

 

 

 

 

 

©jw webdesign