Pagina met inhoudsopgave; Top- of Bottom-knop
Op pagina's met veel grote stukken tekst vind je vaak een inhoudsopgave met links naar hoofdstukken in
dezelfde pagina. Daarbij vind je ook wel knoppen waarmee je en één keer
naar het begin of het einde kunt springen. Deze techniek wordt o.a. toegepast in de pagina die onder de knop
zit.
Hier staat beschreven hoe je dat kunt maken.
Er wordt gebruik gemaakt van "markeringen" in combinatie met "gewone" hyperlinks. Je markeert plaatsen
in de tekst waar je naartoe springt met een hyperlink.
Een markering geef je op met:
<a id="waarde">Tekst</a>In HTML 4 kan het ook met:
<a name="waarde">Tekst</a>Een hyperlink geef je als volgt op:
In HTML5 is dit niet toegestaan. De meeste browsers accepteren het wel.
<a href="#waarde">Tekst</a>De waarde is case-sensitive, dat wil zeggen dat er verschil is tussen hoofd- en kleine letters. "BB" is dus iets anders dan "bb". Waarde mag maar één keer als markering gebruikt worden in een document.
In de browser blijft de markering onzichtbaar. Het is in dit geval niet nodig om tekst tussen beide delen van de <a id="waarde">-tag te zetten, maar het mag wel. Bij de <a href="#waarde">-tag moet je wel tekst tussen de twee delen van de tag zetten, anders zie je de hyperlink niet.
- Het wordt aanbevolen om de werking binnen verschillende browsers uit te proberen. De "top"-knop zal het meestal wel goed doen. Bij de "bottom"-knop verdwijnt de tekst soms helemaal van het scherm. Bij de "Inhoudsopgave" verschijnt de plaats van de markering de ene keer bovenaan het scherm, de andere keer halverwege het scherm of onderaan.
- Boven aan de inhoudsopgave zet je een markering:
<a id="INHOUD">Inhoudsopgave</a> - Vervolgens maak je een serie hyperlinks; let op het #-teken.
<a href="#HOOFDSTUK1">Hoofdstuk 1: Inleiding</a>
<a href="#HOOFDSTUK2">Hoofdstuk 2: Hoe lang het was...</a>
<a href="#HOOFDSTUK3">Hoofdstuk 3: Hoe ver het was....</a>
enzovoort. De inhoudsopgave is nu klaar. - De titel van elk hoofdstuk krijgt een id-markering; merk op dat er géén #-teken wordt gebruikt
in de naam.
<a id="HOOFDSTUK1">Hoofdstuk 1: Inleiding</a>
<a id="HOOFDSTUK2">Hoofdstuk 2: Hoe lang het was...</a>
<a id="HOOFDSTUK3">Hoofdstuk 3: Hoe ver het was...</a>
enzovoort. - Onderaan elk hoofdstuk maak je een hyperlink naar de inhoudsopgave:
<a href="#INHOUD">Terug naar de inhoudsopgave.</a>
Een knop "top" maak je als volgt:
- Zet een markering (id=) helemaal boven in de <BODY>.
- Zet een hyperlink (href=) naar de markering op de plaats waar je die hebben wilt.
Merk op dat je meerdere hyperlinks naar dezelfde markering kunt laten verwijzen.
Een "bottom"-knop maak je op dezelfde manier als een "top"-knop. Zet de markering helemaal onderin de <BODY>. Zet de markering een paar regels omhoog als blijkt dat de tekst uit beeld verdwijnt.
Je bent voor het maken van een bladwijzer niet gebonden aan de <a>-tag. Je kunt hiervoor vrijwel elke tag gebruiken: <p>, <h1>, <h2>, … enz.
Opmerking:
Deze techniek is heel geschikt voor het publiceren van verenigings-krantjes op internet.
Je kunt ook vanuit een bladzijde direct naar een id= markering in een andere pagina springen. Je gebuikt dan de volledige
URL in de hyperlink, gevolgd door de markering (met #). Bijvoorbeeld:
<a href="http://www.mooi-boek.com/boek.htm#hoofdstuk1">Lees hoofdstuk 1 van boek</a>.
Je kunt de tekst van zowel de markering (id= of name=) als de hyperlink (href=) tag vervangen door
een plaatje of een windows-style knop. Zie het item "Terug- en Vooruit-knop".
