Absolute verwijzingen
Een hyperlink naar een externe webpagina maak je met het A-element (Anchor) en het attribuut href (Hypertext reference).
Het href-attribuut bevat bij een absolute verwijzijng de exacte URI van het op te halen bestand.
Tussen de <A> en de </A>-tag neem je het element op dat voor de gebruiker als hyperlink moet dienen (de gebruiker kan dan bv. op deze plaats klikken om het gekoppelde bestand op te vragen).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
</HEAD>
<BODY>
<h1>Hyperlinks : absolute verwijzingen</h1>
<p>
Lees het nieuws op de website van <a href="http://www.cnn.com">CNN</a>
<p>
Bekijk de <a href="http://www.ivobrugge.be/cursusweb/images/computer.jpg">figuur</a>.
</BODY>
</HTML>
Relatieve verwijzingen
In het href-attribuut kan je het pad naar het gekoppelde bestand ook relatief opbouwen ten opzichte van de locatie van het huidige document.
Wanneer de gekoppelde bestanden zich in dezelfde map bevinden als het document met de hyperlink, kan je een hyperlink maken met enkel de bestandsnaam als waarde voor het href-attribuut
Verwijzen naar submappen doe je door de namen van deze mappen te noteren gescheiden door een slash: /
Verwijs je naar documenten die zich in een hoger gelegen map bevinden dan kan je een map omhoog met ../ (denk aan het vroegere DOS)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
</HEAD>
<BODY>
<h1>Hyperlinks : relatieve verwijzingen</h1>
<p>
Bekijk het voorbeeld over <a href="links1.html">absolute verwijzingen</a>.
<p>
Keer terug naar het <a href="../../index.asp">hoofdscherm</a>.
<p>
Bekijk de <a href="../../images/bos.jpg">figuur</a>.
</BODY>
</HTML>
Een figuur als hyperlink
Je kan een figuur als hyperlink gebruiken door eenvoudig de code voor het invoegen van de
figuur op te nemen tussen de
<a> en
</a>-tags.
<a href="http://www.vbv.be" target="_blank">
<img src="../images/bos.jpg" width="200" height="133" alt="Naar Vereniging voor bos in Vlaanderen" border="0">
</a>
Opmerking: target="_blank" zorgt ervoor dat de hyperlink in een nieuw browservenster opent.
Op een webpagina kan je plaatsen markeren door ze een
name of
id te geven.
Je kan met een hyperlink naar deze plaats in het document 'springen'.
De koppeling maak je door in het
href-attribuut van de hyperlink de
name of
id van de plaats op te geven,
voorafgegaan door een spoorwegteken (
# ).
Zorg ervoor dat de namen en id's die je opgeeft uniek zijn op de pagina.
Het name-attribuut in een A-tag
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
</HEAD>
<BODY>
<A name="top"><h1>Hyperlinks : het name attribuut</h1></a>
<A href="#deel1">deel 1</A> |
<A href="#deel2">deel 2</A> |
<A href="#deel3">deel 3</A> |
<A href="../links.asp#plaats">theorie over het markeren van een plaats op een pagina.</A>
<div style="height:400px;margin-top:50px">
<A name="deel1"><h2>Deel 1</h2></A>
Hier komt een beschrijving voor deel 1...
</div>
<div style="height:400px">
<A name="deel2"><h2>Deel 2</h2></A>
Hier komt een beschrijving voor deel 2...
</div>
<div style="height:400px">
<A name="deel3"><h2>Deel 3</h2></A>
Hier komt een beschrijving voor deel 3...
</div>
<A href="#top">naar boven</a>
</BODY>
</HTML>
Het id-attribuut in een A-tag
Je kan in plaats van het
name-attribuut ook het
id-attribuut gebruiken.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
</HEAD>
<BODY>
<A id="top"><h1>Hyperlinks : het id attribuut</h1></a>
<A href="#deel1">deel 1</A> |
<A href="#deel2">deel 2</A> |
<A href="#deel3">deel 3</A> |
<A href="../links.asp#plaats">theorie over het markeren van een plaats op een pagina.</A>
<div style="height:400px;margin-top:50px">
<A id="deel1"><h2>Deel 1</h2></A>
Hier komt een beschrijving voor deel 1...
</div>
<div style="height:400px">
<A id="deel2"><h2>Deel 2</h2></A>
Hier komt een beschrijving voor deel 2...
</div>
<div style="height:400px">
<A id="deel3"><h2>Deel 3</h2></A>
Hier komt een beschrijving voor deel 3...
</div>
<A href="#top">naar boven</a>
</BODY>
</HTML>
Je kan beide naamgevingen afwisselen en zelfs combineren: een
<A>-tag met zowel het attribuut
name als het attribuut
id.
<A name="a1" id="a1">...<A>
Het is wel belangrijk op te merken dat het
id-attribuut ook gebruikt kan worden voor andere acties dan enkel het doel van een hyperlink.
Plaatsen markeren zonder de A-tag
Je bent niet verplicht een
<A>-tag met het attribuut
name of
id te gebruiken bij het bepalen van een koppelplaats op een pagina.
Je kan het attribuut
id ook gebruiken in zowat alle andere HTML-tags.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
</HEAD>
<BODY>
<h1 id="top">Hyperlinks : id in andere tags
<A href="#deel1">deel 1</A> |
<A href="#deel2">deel 2</A> |
<A href="#deel3">deel 3</A> |
<A href="../links.asp#plaats">theorie over het markeren van een plaats op een pagina.</A>
<div style="height:400px;margin-top:50px">
<h2 id="deel1">Deel 1</h2>
Hier komt een beschrijving voor deel 1...
</div>
<div style="height:400px">
<p id="deel2">Deel 2</p>
Hier komt een beschrijving voor deel 2...
</div>
<div style="height:400px">
<h3 id="deel3">Deel 3</h3>
Hier komt een beschrijving voor deel 3...
</div>
<A href="#top">naar boven</a>
</BODY>
</HTML>
Een
LINK-tag definiëert een koppeling met het huidige document.
In tegenstelling tot de
A-tag mag de
LINK-tag enkel voorkomen in de
HEAD-sectie van de pagina en niet in de
BODY-sectie.
Een
LINK-tag kan gebruikt worden om informatie te verschaffen in verband met documenten die verband houden met het huidige document. Deze informatie wordt door de User Agent al dan niet grafisch weergegeven. In de browser Opera kan je een werkbalk 'navigatie' activeren waarmee je deze koppelingen kan volgen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Hoofdstuk hyperlinks</TITLE>
<LINK rel="Index" href="../../index.asp">
<LINK rel="Contents" href="../links.asp">
<LINK rel="Next" href="../objecten.asp">
<LINK rel="Prev" href="../lijsten.asp">
</HEAD>
...de rest van het document...
Met de
LINK-tag kan je ook een koppeling maken naar een extern CSS-bestand (zie later).
Meer over het
LINK-element bij het
W3C.
