Websites met stijl

9. Wad.html

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 titel (in de head in een van de bovenste regels)
  Er staat: <title>Terschelling</title>.
  Maar hiervan: <title>Terschelling - wad</title>.
  Zo kan je op de titelbalk zien dat het om de pagina 'wad' van de website Terschelling gaat.
• Het menu
  Het element nav bevat het menu. Op de laatste regel ervan staat <a href="wad.html">wad</a>.
  Dat betekent dus dat bij een klik op die link naar de pagina wad wordt gesprongen. Maar dat heeft geen zin, want we zijn al op de pagina wad. Verwijder daarom wad.html, maar laat de aanhalingstekens staan: <a href="">wad</a>. Het verwijderen heeft twee voordelen: er wordt bij aanklikken geen onnodige sprong gemaakt, en we kunnen in het stijlblad een link met een lege href een andere opmaak geven, zodat in het menu duidelijk is op welke bladzijde we ons bevinden.
  Het menu van wad.html gaat er (als we in een later hoofdstuk de stijlen hebben aangebracht) uitzien als figuur 1: figuur 1

  

  <nav>
  <a href="index.html">home</a>
  <a href="polder.html">polder</a>
  <a href="duin.html">duinen</a>
  <a href="">wad</a>
  </nav>

  
  

  Opmerking: Een menu-item als wad op de pagina wad.html noem ik voortaan het 'actieve' menu-item.

• De kopfoto
  In de header staat <img src="img/kop1.jpg" alt="kopfoto">
  Kop1.jpg is de kopfoto van de home-page. Maar de kopfoto van wad.html is kop4.jpg.
  Wijzig dus kop1 in kop4: <img src="img/kop4.jpg" alt="kopfoto">.
  Nu heeft wad.html bovenaan de juiste foto staan.
• De andere foto's
  In de sectie aside staan vier foto's met de namen home1.jpg t/m home4.jpg. Dat zijn de foto's op de home-page. Op wad.html heten die wad1.jpg t/m wad4.jpg.
  Ook moeten de onderschriften ingevuld worden:
  verander de xxx in de <figcaption> van de verschillende foto's in resp.
   "zonsopgang boven het wad",
   "buitendijks land bij Striep",
   "scholeksters op de waddendijk",
   "paardrijden op het wad, wat wil je meer?" (de aanhalingstekens tik je natuurlijk niet in)
  Breng die aanpassingen aan. Daarna moet aside er uitzien als figuur 2:

  Omdat de inhoud van het element figure nu langer is geworden, heb ik de code over verschillende regels verdeeld. Dat mag je ook doen, maar het hoeft niet. Doe wat jij het overzichtelijkst vindt.

  figuur 2
  <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>
  

De tekst aanbrengen

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

• Tik de tekst van figuur 3 in. Zorg dat de verdeling over de regels hetzelfde is als in figuur 3.
  (De tags <main>, </main>, <article> en </article> staan er al, die hoef je niet meer in te tikken. Zorg wel dat ze net zo geplaats worden als in figuur 3.)
• Tip: om tijd te sparen kan je de tekst hieronder ook kopiëren en die dan in de editor plakken.
figuur 3
<main>
<article>
Het wad
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.
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.
Op het wad is het licht 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.
<article>
</main>
• Als je klaar bent sla je het document op.
• Open nu wad.html in je webbrowser.
  Je ziet dan - tussen de plaatjes - iets als figuur 4: alle tekst achter elkaar. De hele regel-indeling is verdwenen. figuur 4 Het wad 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. 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. Op het wad is het licht 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.

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:

• Allereerst het element p.
  Dit element markeert een alinea (paragraaf).
  De browser gaat aan het einde van een alinea naar een nieuwe regel en houdt tussen de alinea's een kleine ruimte.
• De elementen h1, h2, h3, h4, h5, h6 geven koppen aan. De browser zet de kop op een aparte regel en met een grotere letter (h1 is de grootste kop, h6 de kleinste).
• Het element br geeft een overgang naar een nieuwe regel aan - wat in een tekstverwerker bekend staat als een 'harde return' of een 'hard regeleinde'.
  Het is een leeg element, er is dus geen eind-tag </br>.

  Op wad.html wordt <br> niet gebruikt, wel bijvoorbeeld op polder.html.

• Open wad.html in de editor
• Breng de tags aan zoals is aangegeven in figuur 5:
  • <h1>....</h1> om de titel
  • <p>....</p> om de alinea's.
  • Nieuw: het woord licht in de derde alinea staat in het element i - tussen tags <i> en </i>.
    De inhoud van i wordt schuin (cursief) afgebeeld. (De i staat voor italic, het engelse woord voor cursief.)
    Meer over cursieve en vette tekst vind je achteraan dit hoofdstuk bij 'Cursief en vet'.
  figuur 5
  <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>
• Sla het document op.
• Bekijk het document in de browser. Maak het venster smaller en breder om te zien hoe de tekst zich gedraagt:
  • De alinea's staan onder elkaar, met een beetje ruimte ertussen.
  • Een alinea vult de hele breedte van het venster (tenzij het venster breder is dan de hele alinea).
  Als het goed is ziet de tekst er (afhankelijk van de breedte van het venster) zo'n beetje uit als figuur 6. figuur 6

  Het wad

  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.

  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.

  Op het wad is het licht 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.

Klaar!

Hiermee is de pagina wad.html klaar. In de volgende drie 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.

Onder figuur 7 vind je informatie over cursieve en vette tekst.

Cursief en vet

Er zijn twee manieren om een stuk tekst cursief te maken en twee manieren om een stuk tekst vet te maken.

Cursief: de elementen i en em

Er zijn twee verschillende elementen waarvan de inhoud cursief wordt afgebeeld: i en em:

• Element i bestaat al heel lang. De enige functie van het element is het cursief maken van tekst.
  (Het engelse woord voor cursief is italic)
• Element em is nieuw. Het is bedoeld voor benadrukte tekst (engels: emphasized).

Gebruik dus em om tekst te benadrukken en i voor niet benadrukte tekst die cursief moet worden afgebeeld.

Vet: de elementen b en strong

Evenzo zijn er twee verschillende elementen waarvan de inhoud vet wordt afgebeeld: b en strong:

Gebruik dus strong voor belangrijke en b voor andere tekst die vet moet worden afgebeeld.

Opmerkingen

• Ik gebruik uit gewoonte eigenlijk nog steeds i en b in plaats van em en strong. Het maakt weinig uit, alleen de zoekmachines weten nu niet zeker of mijn cursieve en vetgedrukte teksten al of niet benadrukt of belangrijk zijn.
• In wad.html is één woord cursief gezet (tussen <i> en </i>)), het woord licht.
• De elementen em, b en strong worden op de website van Terschelling niet gebruikt.