Websites met stijl

8. Springen

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.

• De # voor de naam geeft aan dat het om een bladwijzer gaat.

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

• Met een link kan je ook naar een bladwijzer op een andere pagina springen:
  figuur 3 <a href="polder.html#hup">hupsakee</a> Met de link van figuur 3 spring je naar de bladwijzer #hup op de webpagina "polder.html".
  Op de webpagina polder.html moet dan een element staan met het attribuut id="hup"
  Je ziet die link in je browser als hupsakee.

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:

• Tik de gekleurde tekst in.
• Let goed op de plaats: na de sluittag </aside> en vóór de sluittag </div>.
• Sla het document op, maar sluit het niet.

Opmerkingen:

• Het attribuut title geeft de hint aan die je ziet als je met de muis over de link beweegt: 'Naar de bovenkant van de pagina'.
• Het element krijgt de class-naam naarboven. Die wordt later gebruikt om het element zijn opmaak te geven.
  Het element had ook een id-naam kunnen krijgen, maar gekozen is voor een class-naam, omdat er in principe op verschillende plaatsen op de webpagina links naar boven zouden kunnen worden gezet. Die kunnen dan allemaal de class-naam naarboven krijgen.
• Bekijk het document ook nog maar eens in je browser. Hoewel de lay-out nog weinig voorstelt zijn er al wel wat plaatjes te zien.

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

• Controleer nauwkeurig of je document eruit ziet zoals in figuur 5.
• Verbeter eventuele foutjes.

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:

• Sla het document op onder de naam index.html, maar sluit het nog niet.
• Sla het document opnieuw op (kies 'opslaan als...'), nu onder de naam polder.html in de submap terschelling, maar sluit het nog niet.
• Sla het document nogmaals op in de submap terschelling, nu onder de naam duin.html, maar sluit het nog niet.
• Sla het document nogmaals op in de submap terschelling, nu onder de naam wad.html.
• Sluit de editor of ga door naar het volgende hoofdstuk.