Websites met stijl

9. Wad.html

In dit hoofdstuk

In dit hoofdstuk wordt webpagina wad.html af gemaakt.

Enkele kleine veranderingen aanbrengen

In dit hoofdstuk gaan we wad.html afmaken. Verreweg het meeste werk is het invoegen van de tekst. Maar eerst brengen we wat kleine veranderingen aan op die plaatsen waar de vier webpagina's onderling verschillen. Open dus wad.html in de editor en breng de volgende wijzigingen aan:

De tekst aanbrengen

We gaan nu tekst van het element article binnen het element main invoeren.

Waarom staat alle tekst achter elkaar?
Dat komt omdat de browser van een regelovergang (een 'return') een spatie maakt. Ook maakt de browser van verschillende spaties achter elkaar één spatie.
Je kunt dus een webpagina niet opmaken met extra spaties en regelovergangen. De browser trekt zich niets aan van de manier waarop de tekst in de editor over de regels is verdeeld.

Alinea's en koppen aanbrengen

Hoe zorg je dan wel voor een goede verdeling van de tekst over de regels?
Daarvoor zijn drie elementen:

Klaar!

Hiermee is de pagina wad.html klaar. In de volgende 3 hoofdstukken maken we ook de andere pagina's van de website af.

Bekijk hieronder nog of jouw document overeen komt met figuur 7. Verbeter eventuele foutjes.

figuur 7: wad.html <!DOCTYPE html>
<html lang="nl">
 
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terschelling - wad</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</a>
</nav>
 
<header> <img src="img/kop4.jpg" alt="kopfoto">
<h1>Terschelling</h1>
</header>
 
<div id="container">
<main>
<article>
<h1>Het wad</h1>
<p>
Het wad is grensgebied tussen land en water.
Bij vloed staat het water tot aan de dijk,
bij eb trekt het water zich terug en valt de bodem droog, soms kilometers ver.
</p>
<p>
Overal zie je vogels in de weer om de wormpjes, slakken, zeesterretjes en visjes
te vangen die nu aan de oppervlakte komen
en overal hoor je hun geluiden: het knorren van ganzen, het gekrijs van meeuwen,
het piet-e-piet-e-piet van de scholeksters.
</p>
<p>
Op het wad is het <i>licht</i> misschien wel op zijn mooist:
bij zonnig weer met weinig wind weerkaatsen het blauw van de lucht en het wit
van de wolken in het water.
Bij nevel zie je enkel zachte tinten grijs.
En bij buiig weer is er het grijs van de regenvlagen onder de donkere wolken,
met hier en daar een plek zonlicht tussen de wolken door. Prachtig.
</p>
</article>
</main>
 
<aside>
<figure>
<img src="img/wad1.jpg" alt="">
<figcaption>zonsopgang boven het wad</figcaption>
</figure>
 
<figure>
<img src="img/wad2.jpg" alt="">
<figcaption>buitendijks land bij Striep</figcaption>
</figure>
 
<figure>
<img src="img/wad3.jpg" alt="">
<figcaption>scholeksters op de waddendijk</figcaption>
</figure>
 
<figure>
<img src="img/wad4.jpg" alt="">
<figcaption>paardrijden op het wad, wat wil je meer?</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>

Samenvatting

Het element i