Handleiding HTML - Hyperlinks - Weergave hyperlinks

HTML		Hyperlinks

Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Gerelateerde elementen: A | BASE | BODY | LINK

Weergave hyperlinks

De kleur van de hyperlinks in een document 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 op de attributen van het BODY element in het onderdeel Structuur document.

De weergave van hyperlinks kan niet alleen met het BODY element beïnvloed worden, maar ook met behulp van een stylesheets. 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>Naar <A HREF="frames.html" STYLE="font-style: italic; text-decoration: none; color: red; background-color: yellow">document 1</A></P>

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

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 pseudo-class selectors. Een pseudo-class selector is speciale mogelijkheid om een stijl voor een element te definiëren. De vorm van een pseudo-class selector is de naam van het element gevolgd door een dubbele punt en de naam van een pseudo-class. Voor hyperlinks zijn vier pseudo-classes van belang: link (voor links die nog niet bezocht zijn), visited (voor links die al wel bezocht zijn), active (voor links die op het moment bezocht worden) en hover (voor een link waarboven de muisaanwijzer zich bevindt). Stijlregels met pseudo-class selectors worden geplaatst in een stijlblok in de head van een document of in een extern stijlblad.

In principe hebben de pseudo-class selectors A:link, A:visited en A:active dezelfde functie als de attributen LINK, VLINK en ALINK van het BODY element: ze bepalen de weergave van alle hyperlinks in een document. Een voorbeeld van het gebruik van pseudo-class selectors is het volgende stijlblok:

<STYLE TYPE="text/css">  </STYLE>

De A:hover pseudo-class selector biedt een mogelijkheid die je niet met behulp van attributen van het BODY element hebt: het wijzigen van de weergave van de hyperlink als de muisaanwijzer boven de hyperlink komt. Een stijlregel met de A:hover pseudo-class selector kan er als volgt uitzien:

A:hover { color: #000000; background-color: #66FFCC; }

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Wanneer je bepaalde hyperlinks in het document (bijvoorbeeld links andere sites) op een andere manier wilt weergeven dan standaard, dan kun je gebruik maken van een 'echte' class-naam. Je neemt dan naast de voorgaande algemene stijlregels bijvoorbeeld ook de volgende stijlregel op het stijlblok of stijlblad:

A.extern:hover { color: #FFFFFF; background-color: #336699; }

Aan het A element waarmee de hyperlink gemaakt wordt moet nu het CLASS attribuut met de waarde extern toegevoegd worden:

<P>Naar <A HREF="http://www.w3.org/" CLASS="extern">World Wide Web Consortium</A></P>

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Zie voor meer informatie over pseudo-classes het onderdeel Selectors.

Vervolg: Toelichting in tooltip

Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin