Websites met stijl

10. Duin.html

In dit hoofdstuk

In dit hoofdstuk wordt webpagina duin.html af gemaakt.

Het afmaken van de webpagina's duin.html, polder.html en index.html lijkt veel op het afmaken van wad.html. Daarom vind je hier in dit hoofdstuk en de volgende hoofdstukken minder toelichting, behalve bij enkele nieuwe onderwerpjes. Kijk eventueel nog even terug bij hoofdstuk 9.

Kleine aanpassingen

Open duin.html en breng de volgende aanpassingen aan:

De teksten

figuur 2: duin.html
<!DOCTYPE html>
<html lang="nl">
 
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terschelling - duinen</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="">duinen</a>
<a href="wad.html">wad</a>
</nav>
 
<header> <img src="img/kop3.jpg" alt="kopfoto">
<h1>Terschelling</h1>
</header>
 
<div id="container">
<main>
<article>
<h1>De duinen</h1>
<h2>Heerlijk de ruimte</h2>
<p>
Het Noorden van Terschelling is een breed duingebied.
Kom je in de buurt van de fietspaden nog mensen tegen,
verderop ben je meestal alleen.
</p>
<p>
De meeste duinen zijn begroeid,
maar waar een duin kaal is, licht het fel op in de zon.
Het duinzand is hier op Terschelling (en in het Noorden
van Noord Holland) veel lichter van kleur dan elders
in Nederland.
</p>
<p>
Op veel plekken zijn duinmeertjes, vaak met vogels: meeuwen,
scholeksters, lepelaars. Boven de duinen zie je regelmatig een
kiekendief of buizerd op zoek naar een prooi.
</p>
 
<h2>Cranberries</h2>
<p>
En in de duinvalleien groeien cranberries.
In september en begin oktober plukt een bedrijf de bessen.
Maar als de napluk vrijgegeven wordt, mag iedereen overal plukken.
En er is meestal nog heel wat te vinden!
</p>
</article>
</main>
 
<aside>
 
<figure>
<img src="img/duin1.jpg" alt="">
<figcaption>duinmeertje</figcaption>
</figure>
 
<figure>
<img src="img/duin2.jpg" alt="">
<figcaption>op weg naar de cranberries</figcaption>
</figure>
 
<figure>
<img src="img/duin3.jpg" alt="">
<figcaption>cranberries: nog aan de struik</figcaption>
</figure>
 
<figure>
<img src="img/duin4.jpg" alt="">
<figcaption>cranberries: de oogst</figcaption>
</figure>
 
</aside>
 
<div class="naarboven"> <a href="#" title="naar de bovenkant van de pagina">naar boven</a> </div>
 
</div> <!-- einde div#container -->
 
<footer>Terschelling - parel der Wadden</footer>
</body>
</html>