Websites met stijl

8. Springen

In dit hoofdstuk:

Springen allerlei

In hoofdstuk 5 hebben we kennisgemaakt met hyperlinks om naar (het begin van) een andere webpagina te springen. In dit hoofdstuk gaan we wat andere sprongen bekijken

Springen naar een bladwijzer op de pagina

Vooral bij grotere webpagina's is het handg om naar een ander punt op dezelfde webpagina te springen.

Dat kan alleen naar een bladwijzer (engels: bookmark.
Elk element met een id-naam kan dienst doen als bladwijzer.

Met de link van figuur 1 spring je naar het begin van het element met de id-naam container op die pagina toe.

figuur 1 <a href="#container">...</a>

Springen naar het begin van de pagina

Als achter het teken # geen naam is opgegeven, wordt gesprongen naar het begin van de pagina: figuur 2 <a href="#">...</a>

Springen naar een bladwijzer op een andere webpagina

Een link naar de bovenkant van de pagina aanbrengen

In de website over Terschelling willen we met één klik van de onderkant van het document helemaal naar boven kunnen springen. Daartoe zetten we, na de aside een div met daarin een link naar de de bovenkant van de pagina:

figuur 4 <aside>
<figure><img src="img/home1.jpg" alt=""><figcaption>xxx</figcaption></figure>
<figure><img src="img/home2.jpg" alt=""><figcaption>xxx</figcaption></figure>
<figure><img src="img/home3.jpg" alt=""><figcaption>xxx</figcaption></figure>
<figure><img src="img/home4.jpg" alt=""><figcaption>xxx</figcaption></figure>
</aside>
 
<div class="naarboven"> <a href="#" title="naar de bovenkant van de pagina">naar boven</a> </div>
 
</div>
 
<footer>Terschelling - parel der Wadden</footer>
 
</body>
</html>

Opmerkingen:

Hoe zit dat?

Al je de html in figuur 4 nog eens doorkijkt in de buurt van het element div.naarboven, dan zie je daar twee keer achter elkaar de code </div> staan. Hoe zit dat?

Bij nadere beschouwing blijkt de eerste </div> het einde van het element div.naarboven te zijn; het tweede </div> blijkt het einde van het element div#container te zijn.
Dat laatste is minder snel te zien, omdat de begincode <div id="container"> heel wat regels hoger staat. (Die regel valt buiten figuur 4).

We zetten daarom achter die tweede </div> het volgende commentaar: <!-- einde div#container -->.
Zo voorkom je dat je later de tweede </div> wist, omdat je denkt dat die overbodig is.

(Je kan overigens ook aan het inspringen zien dat de laatste </div> bij div#container hoort.)

Index, polder, duin en wad

Je hebt nu alles ingevoerd wat op de verschillende pagina's van de website Terschelling (bijna) gelijk is. We kunnen deze pagina dus ook gebruiken als start voor de pagina's polder.html, duin.html en wad.html. Dat gaat gemakkelijk:

Let op: Zorg ervoor dat alle bestanden worden opgeslagen in de submap terschelling (websitesmetstijl/terschelling)
figuur 5 <!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terschelling</title>
<link rel="stylesheet" href="css/terschelling.css">
</head>
 
<body>
<nav>
<a href="index.html">home</a>
<a href="polder.html">polder</a>
<a href="duin.html">duinen</a>
<a href="wad.html">wad</a>
</nav>
 
<header> <img src="img/kop1.jpg" alt="kopfoto">
<h1>Terschelling</h1>
</header>
 
<div id="container">
<main>
<article> </article>
</main>
 
<aside>
<figure><img src="img/home1.jpg" alt=""><figcaption>xxx</figcaption></figure>
<figure><img src="img/home2.jpg" alt=""><figcaption>xxx</figcaption></figure>
<figure><img src="img/home3.jpg" alt=""><figcaption>xxx</figcaption></figure>
<figure><img src="img/home4.jpg" alt=""><figcaption>xxx</figcaption></figure>
</aside>
 
<div class="naarboven"> <a href="#" title="naar de bovenkant van de pagina">naar boven</a> </div>

</div> <!-- einde div#container -->
 
<footer> </footer>

</body>
</html>


Samenvatting

Links naar een bladwijzer

Een link naar een bladwijzer op dezelfde webpagina:
<a href="#bladwijzer">link-tekst</a>
Een link naar de bovenkant van de webpagina:
<a href="#">link-tekst</a>
Een link naar mijnbladwijzer op mijnwebpagina.html in de submap mijnmap:
<a href="mijnmap/mijnwebpagina.html#mijnbladwijzer">link-tekst</a>