Websites met stijl

13. Index.html

In dit hoofdstuk

In dit hoofdstuk wordt webpagina index.html afgemaakt:

Het eerste artikel invoeren

In het element main van index.html komen twee artikelen. Er staat er nog maar een.

Het tweede artikel invoeren

Afbeeldingen met hyperlinks

De afbeeldingen in het element aside moeten van hyperlinks en onderschriften worden voorzien. Dat gaat in een aantal stappen.

Een alinea onderaan de aside toevoegen

Tenslotte komt er nog een alinea onder het laatste figure element in de aside. De tekst staat in figuur 9.

Die laatste alinea is niet opgenomen omdat de tekst enig belang heeft, maar het geeft later een mooie gelegenheid om te illustreren hoe je zo'n alinea efficient van een afwijkende opmaak kan voorzien.

figuur 9 ...
</figure>
 
<p>
Klik op de afbeelding polder, duinen, wad om naar de betreffende pagina te springen.
(Dit werkt alleen op deze pagina.)
</p>
 
</aside>

Klaar

Daarmee is het document index.html klaar!

Controleer het nog eens goed aan de hand van figuur 10.
Verbeter eventule foutjes en sla het dan op.

figuur 10: index.html
<!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="">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>
<h1>Terug naar Terschelling</h1>
<p>
Welkom op deze website over Terschelling,
dat mooie Waddeneiland van rust en zon en zee,
met zijn onbedorven lucht, zijn strand en zijn Wad,
zijn dorpjes en zijn vriendelijke bevolking.
</p>
<p>
Welkom op Terschelling, waar je kunt windsurfen en strandzeilen,
zwerven over de Noordsvaarder of de Boschplaat,
fietsen door de duinen of in de polder,
vogels kijken op het strand, in de polder of op het wad.
</p>
<p>
Welkom in een van de gezellige restaurants of café's
waar je kunt uitrusten na een strandwandeling.
En kom je in café De Groene Weide in Hoorn
dan loop je de kans te worden toegezongen door Hessel,
Terschellings meest bekende kroegbaas,
de zanger van het lijflied van veel Terschelling­gangers: '
<a href="https://www.youtube.com/watch?v=YlToR7RdfFQ" target="_blank"
title="opent in een nieuw venster" >
Terug naar Terschelling </a>'.
</p>
</article>
 
<article> <h1>De Terschellinger vlag</h1>
<p>
Ben je ook een fan van Terschelling?<br>
Plak dan een sticker met de Terschellinger vlag
op de achterruit van je auto.
En onthoud waar de kleuren van de vlag voor staan:
  <video autoplay loop muted> <source src="img/vlag.mp4" type="video/mp4">
<img src="img/film-vlag.jpg" alt="vlag">
</video>
<ul> <li>Rood zijn de daken,</li>
<li>blauw is de lucht,</li>
<li>geel zijn de halmen,</li>
<li>groen is het gras,</li>
<li>wit is het zand.</li>
<li>Dat zijn de kleuren van Schellingerland.</li>
</ul>
</p>
</article>
 
</main>

<aside>
<figure>
<a href="polder.html">
<img src="img/home1.jpg" alt="polder" title="klik voor de pagina 'polder'" >
</a>
<figcaption>polder</figcaption>
</figure>
 
<figure>
<a href="duin.html">
<img src="img/home2.jpg" alt="duinen" title="klik voor de pagina 'duinen'" >
</a>

<figcaption>duinen</figcaption>
</figure>
 
<figure>
<a href="wad.html">
<img src="img/home3.jpg" alt="wad" title="klik voor de pagina 'wad'" >
</a>
<figcaption>
wad</figcaption>
</figure>
 
<p>
Klik op de afbeelding polder, duinen, wad om naar de betreffende pagina te springen.
(Dit werkt alleen op deze pagina.)
</p>
 
</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>