Websites met stijl
13. Index.html
In dit hoofdstuk
In dit hoofdstuk wordt webpagina index.html afgemaakt:
- Open index.html in de editor en breng de volgende
wijzigingen aan:
Het eerste artikel invoeren
In het element main van index.html komen twee artikelen. Er
staat er nog maar een.
Het tweede artikel invoeren
- Voer nu de inhoud van het tweede article in. Zie figuur
4. figuur 4
<main> <article>
...
</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>
- Toelichting
- Het videodeel komt grotendeels overeen met het voorbeeld in het
vorige hoofdstuk. Alleen zorgt de regel <img src="img/film-vlag.jpg" alt="vlag">
ervoor dat een afbeelding van de vlag wordt getoond als de browser
geen video ondersteunt. Daar merkt de bezoeker van de website
niets van. Die ziet een stilstaande vlag, maar weet niet dat in
andere browsers een flimpje van de vlag wordt afgespeeld.
- Aan het eind van het tweede element article staat de ongenummerde
lijst ul.
Afbeeldingen met hyperlinks
De afbeeldingen in het element aside moeten van
hyperlinks en onderschriften worden voorzien. Dat gaat in een aantal
stappen.
- Als het goed is, ziet aside er uit als figuur 5: figuur
5
<aside>
<figure><img src="img/home1.jpg"
alt=""><figcaption>xxx</figcaption></figure>
<figure><img src="img/home2.jpg"
alt=""><figcaption>xxx</figcaption></figure>
<figure><img src="img/home3.jpg"
alt=""><figcaption>xxx</figcaption></figure>
<figure><img src="img/home4.jpg"
alt=""><figcaption>xxx</figcaption></figure>
</aside>
- Wis de onderste van de vier regels die beginnen met <figure>.
Reden: index.html heeft drie afbeeldingen in de <aside>,
niet vier, zoals de andere pagina's van de website.
Die vierde regel moet dus weg.
- De ondertitels van de foto zijn respectievelijk "polder", "duinen"
en "wad". Vul die in op de plaats van de xxx-jes;
aside
moet er nu uitzien als figuur 6: figuur 6
<aside>
<figure><img src="img/home1.jpg"
alt=""><figcaption>polder</figcaption></figure>
<figure><img src="img/home2.jpg"
alt=""><figcaption>duinen</figcaption></figure>
<figure><img src="img/home3.jpg"
alt=""><figcaption>wad</figcaption></figure>
</aside>
-
Nu moet het img element worden omsloten door de link-tags <a> en <a>:
<figure><a><img src="img/home1.jpg" alt=""></a>
<figcaption>polder</figcaption></figure>
Omdat de regel nu wel heel lang en onoverzichtelik wordt verdelen we die over zeven regels:
- <figure>
- <a>
- <img src="img/home1.jpg"
alt="">
- </a>.
- <figcaption>polder</figcaption>
- </figure>.
- Sluit af met een lege regel
- Herhaal deze procedure voor de andere twee figure regels.
Het element asideziet er dan uit als figuur 7: figuur 7
<aside>
<figure> <a>
<img src="img/home1.jpg" alt="">
</a>
<figcaption>polder</figcaption> </figure>
<figure> <a>
<img src="img/home2.jpg" alt="">
</a>
<figcaption>duinen</figcaption> </figure>
<figure> <a>
<img src="img/home3.jpg" alt="">
</a>
<figcaption>wad</figcaption> </figure>
</aside>
- Maak nu de a elementen af. In plaats van <a>
moet er respectievelijk <a href="polder.html">,
<a href="duin.html"> en
<a href="wad.html">
staan.
De aside ziet er dan uit zoals finguur 8.
figuur 8
<aside>
<figure> <a href="polder.html">
<img src="img/home1.jpg" alt="">
</a>
<figcaption>polder</figcaption> </figure>
<figure> <a href="duin.html">
<img src="img/home2.jpg" alt="">
</a>
<figcaption>duinen</figcaption> </figure>
<figure> <a href="wad.html">
<img src="img/home3.jpg" alt="">
</a>
<figcaption>wad</figcaption> </figure>
</aside>
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 Terschellinggangers: '
<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>
- Hiermee is het html-gedeelte van de website helemaal klaar.
- In het volgende hoofdstuk beginnen we met de css voor de opmaak van
de website.