2.3: Anker / boekenlegger
§ 1: Link plaatsen naar een ander gedeelte in hetzelfde bestand
Soms kan het handig zijn, vooral bij webpagina's die veel tekst bevatten, als we onze bezoekers via een link naar bijvoorbeeld het midden of de onderkant van die pagina laten springen. De bezoeker hoeft dan niet de hele pagina door te lezen op zoek naar de bedoelde informatie. Op de plaats waar we onze bezoeker naar toe willen laten springen plaatsen we een zogenaamd anker. In HTML is de algemene schrijfwijze voor een anker als volgt:
<a id="naam"></a>
We noemen dit anker ook wel een boekenleggen omdat het deze functie vervult; je legt de boekenleggen op de plaats waar je uiteindelijk naartoe wilt.
We gebruiken hiervoor dus weer het <a></a> element. Ditmaal echter met het attribuur 'id' en als waarde een zelf bedachte naam.
Voor naam mag je iedere willekeurige naam bedenken maar het mag duidelijk zijn dat een zinvolle naam de voorkeur geniet.
Een zinvol anker zou er bijv. als volgt uit kunnen zien:
<a id="paragraaf2"></a>
Een anker is echter zinloos als er geen link is waarop je kunt klikken om zodoende bij de boekenlegger / het anker te komen!!! Een anker is dus altijd verbonden met een link. Samenvattend: Je klikt op een link om bij een anker uit te komen.
De link naar dit anker ziet er dan als volgt uit:
<a href="#paragraaf2">Link naar paragraaf 2</a>
- Bij een link komt vóór de gekozen naam dus een hekje (#).
- Het hekje is eigenlijk het scheidingsteken tussen de bestandsnaam en het anker. Er had dus in dit geval ook kunnen staan
<a href="ankers.html#paragraaf2">Link naar paragraaf 2</a>
Voorbeeld van een werkende link-anker combinatie:
Als je klikt op deze link dan spring je binnen deze pagina naar het betreffende anker. In dit geval 'paragraaf2' genoemd.
Ps: Als de interne link niet lijkt te werken kun je het browservenster verkleinen zodat er rechts een scrollbalk verschijnt.
..
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
§ 2: Link naar een bepaald gedeelte van een andere pagina binnen je eigen website
Als je op een pagina van jouw website een bezoeker wil laten springen naar een bepaald punt (dus niet gewoon bovenaan) in een andere pagina van jouw website dan gelden de volgende regels:
- Maak éérst een anker op de plaats in het bestand waar je naartoe wilt laten springen (boekenlegger).
- Maak dan een interne link naar de betreffende pagina, gevolgd door een hekje(#) en dan de naam van het anker dat zich op die pagina bevindt.
<a href="opstel.html#hfdst3">Hoofdstuk 3</a>
Via deze link (<a href="linkintern.html#belangrijk">Interne link - belangrijk</a>) kun je rechtstreek springen naar het blauwe vak van het hoofdstuk Interne Links.
De link naar het anker kan vooraf gegaan worden door een relatieve verwijzing naar de betreffende pagina.
Voorbeeld:<a href="links/intern/linkintern.html#belangrijk">Interne link - belangrijk</a>
- Een anker bestaat uit twee elementen <a> en </a>. Tussen het begin- en eindelement hoef je geen tekst op te nemen
- In het open-element van het anker staat de waarde achter het attribuut id tussen dubbele aanhalingstekens
- In een hyperlink naar een anker staat een # gevolgd door de naam (name) van het anker
- Het # kan vooraf gegaan worden door een bestandsnaam als het anker zich buiten de huidige pagina bevindt
- De bestandsnaam kan vooraf gegaan worden door een relatief pad naar het bestand als het bestand zich in een andere map bevindt
Opdracht 7: Ankers
In deze cursus is ook het bestand rijm.html opgenomen. Open dit bestand en sla het op bij je eigen bestanden van je website ter hoogte van je index.html bestand. Noem het bestand rijm.html. Open de broncode van rijm.html en maak de volgende opdrachten:- Maak in de alinea over volrijm een anker.
- Maak bovenaan in deze html-pagina van het woord volrijm een hyperlink naar dit anker.
- Open index.html en maak op deze pagina een link naar het anker op de pagina rijm.html
- Wanneer blijkt dat beide hyperlinks werken bewaar dan beide html-pagina's.
Via bovenstaande link kun je weer terugspringen naar de bovenkant van deze pagina waar dus ook weer een anker geplaatst is.