Hyperlinks

Handleiding HTML
Inhoud   Index


In dit onderdeel komen aan de orde Introductie, Elementen, Link naar bestand, Downloaden bestand, Basis-URI, Bestemming binnen document, Document openen in frame, Mailto-links, Karakters in URI's, Weergave hyperlinks, Het gebruik van stijlen en Hyperlinks activeren.


Introductie

Hyperlinks (of hypertext links) zijn een essentieel onderdeel van HTML (Hypertext Markup Language). Ze maken het mogelijk dat je, door een simpele klik van de muis, snel van de ene lokatie naar de andere surft. Een nieuwe bestemming kan zich bevinden op een andere plaats in hetzelfde document, maar het kan ook een ander document betreffen. Dat andere document kan zich bevinden op de lokale server, maar ook op een server elders op de wereld. Naast documenten kan het bovendien gaan om andere soorten bestanden, zoals afbeeldingen en geluidsfragmenten, of software die je wilt downloaden.

Een hyperlink maak je met het A element (Anchor). Met het HREF attribuut definieer je op welke locatie het bestand, dat geopend of gedownload moet worden, zich bevindt. Als je werkt met frames, kun je met het TARGET attribuut aangeven in welk frame een document geopend moet worden.

Het NAME attribuut van het A element gebruik je om een (onzichtbaar) anker in een document te plaatsen. Dat anker kun je vervolgens gebruiken als bestemming van een hyperlink.

Met het BASE element kun je een basisadres voor de URI's in een document te definiëren.

De kleur waarmee de hyperlinks worden weergegeven, kun je bepalen met de attributen van het BODY element. Meer mogelijkheden voor de weergave heb je als je stijlen definieert met behulp van Cascading Style Sheets.


Elementen

Voor het maken van hyperlinks zijn de volgende elementen beschikbaar:

A
BASE



De elementen en bijbehorende attributen worden beschreven in aparte documenten. Voor elk element en attribuut is aangegeven of het deel uitmaakt van een HTML-specificatie en zo ja welke. Bovendien is aangegeven en of het element of attribuut ondersteund wordt door en zo ja vanaf welke versie van Netscape Navigator, Microsoft Internet Explorer en Opera.


Link naar bestand

Een hyperlink maak je met het A element, waaraan je het HREF attribuut toevoegt. Het HREF attribuut geeft aan op welke locatie het bestand, dat geopend of gedownload moet worden, zich bevindt.

De waarde van het HREF attribuut is een zogenoemde Uniform Resource Identifier (URI). Een URI is een compacte reeks karakters, waarmee een bron (resource) geïdentificeerd kan worden. De aanduiding URI is nieuw in HTML 4.0, daarvoor werd gebruik gemaakt van het begrip URL, Uniform Resource Locator. URL's worden nu gezien als een ondergroep van de meer algemene URI's. Bij een URL wordt een bron (bijvoorbeeld het te openen of te downloaden bestand) geïdentificeerd door de wijze waarop je er toegang tot kan krijgen, bijvoorbeeld via welke methode en op welke lokatie op het Internet.

Bij het maken van een hyperlink naar een bestand, hangt de opbouw van een URI af van de methode, welke gebruikt wordt om een bestand te openen of te downloaden. De belangrijkste methoden zijn in dit geval http (HyperText Transfer Protocol) en ftp (File Transfer Protocol). Voor deze methoden is de opbouw van de URI:

protocol://host/path

Het protocol zal meestal http zijn en alleen ftp, als het gevraagde bestand zich op een speciale FTP-server bevindt. Host specificeert het adres van de server, waarop zich het gevraagde bestand bevindt. Het is meestal een domeinnaam, maar mag ook een IP-adres zijn (zie ook de beschrijving van het HREF attribuut). Path geeft aan hoe het gevraagde bestand op de server gevonden kan worden: in welke directory en onder welke bestandsnaam.

Het is niet altijd nodig een complete URI te gebruiken. Wanneer je verwijst naar de beginpagina van een site, dan is het voldoende alleen de domeinnaam op te nemen. Meestal wordt dan automatisch een bestand met de naam "index.html" geopend (mits dat bestaat natuurlijk).

<A HREF="http://www.handleidinghtml.nl">Handleiding HTML</A>

In de browser zie je: Handleiding HTML

Verwijs je niet naar de host, maar naar een directory op de server, dan beëindig je de URI met een slash:

<A HREF="http://www.dto.tudelft.nl/mirhtml/">Mirror Handleiding HTML</A>

In de praktijk wil je vaak een verwijzing naar een specifiek bestand in een bepaalde directory van een server opnemen. Bijvoorbeeld:

<A HREF="http://www.handleidinghtml.nl/frames.htm">
Frames</A>

Wanneer de link verwijst naar een bestand op de lokale server, is het voldoende om alleen het path op te nemen. Daarbij zijn er de volgende mogelijkheden:

  • staat het bestand in dezelfde directory als het huidige document, dan hoef je slechts de naam van het bestand op te nemen:

    <A HREF="frames.htm">Frames</A>

  • staat het bestand in een subdirectory van de huidige directory staat, dan geef je eerst de namen van de achtereenvolgende subdirectories met achter elke naam een slash en daarna de naam van het bestand:

    <A HREF="css/cssbegin.htm">Cascading Style Sheets</A>

  • bevindt het bestand zich in een hogere directory dan de huidige, dan neem je voor elke stap omhoog een slash voorafgegaan door twee punten op:

    <A HREF="../start.htm">Inhoud</A>

  • een combinatie van de laatste twee mogelijkheden gebruik je bijvoorbeeld als je moet verwijzen naar een bestand in een directory op hetzelfde niveau:

    <A HREF="../element/frameset.htm">FRAMESET</A>

  • verwijs je niet naar een bestand, maar naar een directory, dan beëindig je de URI met een slash:

    <A HREF="css/">Begin</A>


Onderbreek een hyperlink, ook al is de URI nog zo lang, niet met harde returns (met Enter naar de volgende regel gaan). Zo'n harde return kan door de browser opgevat worden als spatie die ook onderstreept wordt. Bijvoorbeeld:

<A HREF="frames.htm">Frames
</A>

wordt door de browser weergegeven als: Frames en niet zoals bedoeld als Frames.


Het A element is een inline element en moet dus geplaatst worden binnen een element op blokniveau (bijvoorbeeld P).


Downloaden bestand

Om een bezoeker in de gelegenheid te stellen een bestand te downloaden, hoef je in principe niet meer te doen dan het maken van een hyperlink zoals hiervoor beschreven. Voor een zip-achiefbestand, dat in dezelfde directory op de server staat als het HTML-document, ziet zo'n hyperlink er als volgt uit:

<A HREF="bestand.zip">Download bestand</A>

Als de bezoeker op een hyperlink van een zip-bestand klikt, zal vrijwel elke browser een venster openen waarin gevraagd wordt of het bestand moet worden opgeslagen of geopend met het bijbehorende programma. Dat zal echter niet bij alle bestandstypen het geval zijn. HTML-documenten en bijvoorbeeld afbeeldingen van het type "gif" en "jpg" zal de browser normaal gesproken zelf openen. Voor geluidsfragmenten en andere multimedia objecten geldt dat over het algemeen ook als de juiste plug-in geïnstalleerd is. Afhankelijk van de programma's waarover een bezoeker beschikt en de instellingen van de browser kunnen bestanden ook geopend worden in een extern programma, bijvoorbeeld in Windows Media Player.
Als auteur kun je niet beïnvloeden wat de browser met een bepaald type bestand doet. Wil je er zeker van zijn dat de bezoeker het bestand kan opslaan, dan is het de beste oplossing het bestand te verpakken in een zip-archief. Heb je daar geen mogelijkheid voor, of verwacht je dat de bezoeker het zip-bestand niet kan uitpakken, dan rest je weinig anders dan de bezoeker via de tekst van de hyperlink te adviseren de rechter muisknop te gebruiken en te kiezen voor 'Opslaan als'.


Basis-URI

De URI van een hyperlink kan absoluut of relatief zijn. In een absolute URI zijn in ieder geval het te gebruiken protocol en het adres van de server opgenomen, een relatieve URI bevat alleen het path op de server. Wanneer een hyperlink met een relatieve URI geopend moet worden, gebruikt de browser de URI van het huidige document als basisadres en bepaalt daarmee de absolute URI van de link. Is de URI van het huidige document:

http://www.handleidinghtml.nl/hyplinks.htm

en is deze hyperlink opgenomen:

<A HREF="frames.htm">Frames</A>

dan weet de browser dat de absolute URI van de link de volgende is:

http://www.handleidinghtml.nl/frames.htm


Wanneer veel links in een document verwijzen naar dezelfde site of directory, dan kan het handig zijn in de head van het document het BASE element op te nemen en met het HREF attribuut een basis-URI definiëren. Deze basis-URI wordt door de browser als basisadres gebruikt voor de relatieve URI's, in plaats van de URI van het huidige document. De basis-URI moet absoluut zijn en eindigen met een "/".

Een voorbeeld van het BASE element is:

<BASE HREF="http://www.handleidinghtml.nl/css/">

Staat in het document, dat bovenstaand BASE element bevat, deze hyperlink:

<A HREF="css.htm">Cascading Style Sheets</A>

dan gaat de browser uit van de volgende absolute URI:

http://www.handleidinghtml.nl/css/cssbegin.htm

Wanneer de basis-URI betrekking heeft op een site op een andere server, kunnen naar bestanden op deze server relatieve URI's opgenomen worden. Verwijzingen naar bestanden op de lokale server mogen in dit geval uiteraard niet meer relatief zijn.


Bestemming binnen document

Soms wil je niet zomaar verwijzen naar een ander document, maar naar een specifieke plaats in een document. Dat kan als je eerst de plaats, waarnaar je wilt verwijzen, markeert met het A element waaraan het NAME attribuut is toegevoegd. Zo'n markering (of anker) ziet er bijvoorbeeld als volgt uit:

<A NAME="inhoud"></A>

Binnen een document bestaat de URI uit een "#" gevolgd door de waarde van het NAME attribuut. Bijvoorbeeld:

<A HREF="#inhoud">Inhoud Hyperlinks</A>

De link wordt door de browser weergegeven als: Inhoud Hyperlinks.

Volg je deze link, dan kom je bij de inhoud van dit onderdeel van de Handleiding HTML.

Dit soort linken werken overigens niet alleen binnen een document. Het is ook mogelijk te verwijzen naar een gemarkeerde plaats in een ander document, in dezelfde of een andere directory, of op een andere server. Bijvoorbeeld:

<A HREF="element/a.htm#HREF">Beschrijving HREF attribuut</A>

Linken naar een plaats binnen een document zorgen ervoor dat de gebruiker niet het hele document hoeft door te scrollen, maar snel naar de gewenste informatie kan springen.


Document openen in frame

Wanneer je een document in een bepaald frame wilt openen, dan moet je het TARGET attribuut aan het A element toevoegen. Bijvoorbeeld:

<A HREF="tabellen.htm" TARGET="handleiding">Tabellen</A>

Een uitgebreide toelichting op het gebruik van het TARGET attribuut is te vinden bij het onderdeel Frames.

Als veel documenten geopend moeten worden in hetzelfde frame, kan het handig zijn het BASE element in de head van het document op te nemen en met het TARGET attribuut een basis-frame te definiëren. Alle hyperlinks worden dan automatisch in het frame met de via het TARGET attribuut opgegeven naam geopend en alleen aan links die in een ander frame geopend moeten worden moet aan het A element het TARGET attribuut worden toegevoegd.

Een voorbeeld van het BASE element is:

<BASE TARGET="handleiding">

Volgens de regels moet aan het BASE element altijd het HREF attribuut worden toegevoegd met een absolute URI. Dat is geen probleem als het document online bekeken wordt, maar offline leidt de absolute URI tot de foutmelding dat er geen verbinding is (of de browser gaat automatisch online). Daarom wordt het BASE element vaak alleen met het TARGET attribuut gebruikt.


Mailto-links

Met behulp van een mailto-link kun je een bezoeker van je pagina snel een bericht naar je laten sturen. In plaats van een http-URI in de eerdere voorbeelden, gebruik je nu een mailto-URI. Als voorbeeld een mailto-link naar de auteur van de Handleiding HTML staat:

<A HREF="mailto:info@handleidinghtml.nl">Hans de Jong</A>

In de browser zie je: Hans de Jong.

Wanneer je op deze link klikt, dan opent een browser die deze mogelijkheid ondersteunt, het (via de instellingen opgegeven) e-mailprogramma en plaats het e-mailadres is in het To-veld.

Sommige browsers en e-mailprogramma's ondersteunen parameters bij een mailto-URI, bijvoorbeeld om het onderwerp (subject) van het e-mailbericht vast te leggen:

<A HREF="mailto:info@handleidinghtml.nl?SUBJECT=Reactie%20Handleiding%20HTML">Hans de Jong</A>

Bekijk de weergave van de link in de statusbalk van de browser: Hans de Jong

In de code van de URI zijn de spaties vervangen door "%20". Dat is omdat een URI niet alle beschikbare tekens mag bevatten. Zie de toelichting hierna.

Enkele van de nieuwste browsers en e-mailprogramma's ondersteunen ook de mogelijkheid tot het opnemen van parameters om (een deel van) de inhoud van het bericht te bepalen, of een kopie naar een tweede e-mailadres te sturen:

<A HREF="mailto:info@handleidinghtml.nl?SUBJECT=Reactie%20Handleiding%20HTML&BODY=Dit%20is%20mijn%20reactie&CC=iemand@anders.nl">Hans de Jong</A>

Omdat niet elke browser andere parameters dan SUBJECT correct ondersteunt (Opera lager dan versie 3.5 plaatst bijvoorbeeld alles achter het vraagteken in de Subject-veld), wordt het gebruik ervan niet aangeraden.


Karakters in URI's

Een URI mag alleen alfanumerieke karakters (de cijfers 0-9 en de letters a-z en A-Z), de speciale karakters $ - _ . + ! * ' ( ) , en een aantal zogenaamde gereserveerde karakters bevatten. Bij de gereserveerde karakters gaat het om karakters die een bijzondere betekenis hebben bij het definiëren van de URI: ; / ? : @ = &.
Wil je in een URI de gereserveerde karakters gebruiken op een andere wijze dan waarvoor ze bedoeld zijn, of wil je karakters opnemen die door de browser verkeerd geïnterpreteerd kunnen worden (een spatie en > < " # % { } | \ ^ ~ [ ] `), dan moet je ze coderen. Meestal gebeurt dat in de vorm van een %-teken gevolgd door een ASCII-waarde in hexadecimale notatie. In sommige gevallen, zoals voor & en ", kan ook &sleutelwoord; gebruikt worden (zie het onderdeel Speciale tekens).
In het volgende overzicht vind je voor een aantal karakters de code.

; %3B > %3E
/ %2F < %3C
? %3F " %22 of &quot;
: %3A # %23
@ %40 % %25
= %3D | %7C
& %26 of &amp; \ %5C
spatie %20 ~ %7E


Weergave hyperlinks

De wijze waarop hyperlinks worden weergegeven bepaal je met de attributen LINK, VLINK en ALINK van het BODY element. Het LINK attribuut bepaalt de kleur van een link die nog niet bezocht is, het VLINK attribuut bepaalt de kleur van een link die al wel bezocht is en het ALINK attribuut bepaalt de kleur van een (actieve) link op het moment dat deze wordt geselecteerd door de gebruiker. De gekozen kleur geldt voor alle linken in een document.
Een voorbeeld van de opbouw van het BODY element is:

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#FFOOOO" ALINK="#FFOOOO">

Zie ook de toelichting het onderdeel Structuur document.


Het gebruik van stijlen

De weergave van hyperlinks kan niet alleen met het BODY element beïnvloed worden, maar ook met behulp van Cascading Style Sheets. Behalve de kleur zijn er dan ook andere mogelijkheden, zoals het lettertype, de lettergrootte, wel of niet onderstreept en een achtergrondkleur. In het volgende voorbeeld is met behulp van het STYLE attribuut een inline stijl gedefinieerd, waarbij gebruikt gemaakt wordt van de stijleigenschappen color, font-family, font-size, text-decoration en background-color.

<P><A HREF="frames.htm" STYLE="font-size: 13pt; color: red; font-family: monospace; text-decoration: none; background-color: yellow">Frames</A></P>

Van de weergave van dit voorbeeld door Microsoft Internet Explorer 4 is een afbeelding opgenomen. Klik op de afbeelding en bekijk in een nieuw venster of de browser het gebruik van stijlen (correct) ondersteunt.

Voorbeeld gebruik stijlen.

Wanneer je de eigenschap text-decoration: none gebruikt om de hyperlink niet onderstreept weer te geven, is het verstandig er wel voor zorgen dat de bezoeker in de gaten heeft dat het gaat om een link.

Voor de weergave van hyperlinks kan ook gebruik gemaakt worden van enkele zogenaamde pseudo-classes. Zie voor meer informatie het onderdeel Structuur CSS.


Hyperlinks activeren

In een document kun je snel van de ene hyperlink naar de andere gaan door gebruik te maken van de tab-toets. Normaal worden de verschillende links afgewerkt in de volgorde, waarin ze in het document staan. Met behulp van het TABINDEX attribuut kan deze volgorde beïnvloed worden. In het volgende voorbeeld is dat te zien:

<P><A HREF="#A1" TABINDEX="1">Link 1</A>
<A HREF="#A2" TABINDEX="4">Link 2</A>
<A HREF="#A3" TABINDEX="3">Link 3</A>
<A HREF="#A4" TABINDEX="2">Link 4</A></P>

Bekijk in een nieuw venster of de browser het TABINDEX attribuut ondersteunt.


  Inhoud Handleiding HTML   Index   Inhoud Hyperlinks

Laatste wijziging 6 februari 2001
Copyright © 1995-2001 Hans de Jong