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:
Verander de title in: <title>Terschelling - duinen</title>
De kopfoto is kop3.jpg. Verander dus kop1 in kop3: <img src="img/kop3.jpg" alt="kopfoto">
In het menu (nav) moet het
actieve menu-item duin worden aangepast:
verander
<a href="duin.html">duinen</a> in:
<a href="">duinen</a>
Verander de namen en de onderschriften van de foto's in aside.
De namen moeten zijn duin1.jpg t/m duin4.jpg;
de onderschriften "duinmeertje", "op weg naar de cranberries", "cranberries nog aan de struik", "cranberries: de oogst".
De teksten
- Ook bij duin.html staat de tekst in het element article binnen main. Voer die in zoals te zien is in figuur 1.
- Je kan de tekst zo van het scherm kopiƫren en plakken in de editor.
figuur 1
<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>
- Controleer het hele document aan de hand van figuur 2 en verbeter eventuele foutjes.
Zoals je weet zijn lege regels en inspringen niet van invloed op het resultaat.
- Sla het document op. Klaar
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>