Handleiding HTML - Hyperlinks

Hyperlinks
Handleiding HTML	Inhoud Index

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

Introductie

Zoals de naam al aangeeft, zijn hyperlinks (of hypertext links) 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 met Cascading Style Sheets.

Elementen

Voor het maken van hyperlinks zijn de volgende elementen beschikbaar:

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. 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 op te nemen. In het volgende voorbeeld is alleen een verwijzing naar de te bezoeken site opgenomen. Meestal wordt in dat geval automatisch een bestand met de naam "index.html" geopend.

Bezoek ook eens de <A HREF="http://www.dsdelft.nl">Digitale Stad Delft</A>

In de browser zie je:

Bezoek ook eens de Digitale Stad Delft

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.dsdelft.nl/html/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/css.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="../begin.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>

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).

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.dsdelft.nl/html/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.dsdelft.nl/html/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 moet absoluut zijn en wordt door de browser als basisadres gebruikt voor de relatieve URI's, in plaats van de URI van het huidige document.

Een voorbeeld van het BASE element is:

<BASE HREF="http://www.dsdelft.nl/html/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.dsdelft.nl/html/css/css.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 de mailto-link zoals die onder elk onderdeel van de handleiding HTML staat:

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:

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:html@dsdelft.nl?SUBJECT=Reactie Handleiding HTML&BODY=Dit is mijn reactie:&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.

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.

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

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.

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:

<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>

Klik in een browser die het TABINDEX attribuut ondersteunt op de eerste link en vervolgens op de tab-toets. Als het goed is zie je dat eerst link 4 geactiveerd wordt, dan link 3 en tenslotte link 2. Wanneer je bij een geactiveerde link op de Enter-toets drukt, wordt normaal de bestemming van de link geopend. In dit voorbeeld ga je in alle gevallen naar het begin van dit tekstblokje.

Link 1 Link 2 Link 3 Link 4

Inhoud Handleiding HTML Index Inhoud Hyperlinks