Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.

Als je de inhoud van een pagina structureert, doe je dat met de CSS in je achterhoofd. Het is een belangrijk vaardigheid want met de CSS die je op die structuur zal toepassen, kan je een mooie lay-out kan creëren. In deze evaluatie testen we je capaciteit om te bedenken hoe een pagina er zou kunnen uit gaan zien en om geschikte semantische elementen te gebruiken zodat je bovenop die structuur een lay-out kan bouwen.

Vereisten: Vooraleer je aan deze evaluatie begint zou je al de vorige hoofdstukken al moeten hebben verwerkt, vooral  De structuur van je document en je website.
Doel: We testen je kennis van webpagina-structuren en hoe je een toekomstig lay-out ontwerp in html-opmaak kan weergeven.

Startpunt

Je start deze evaluatie met het zip bestand met al de hulpmiddelen om te starten. Het zip-bestand bevat:

  • De HTML waar je structurele opmaak aan toe moeten voegen.
  • CSS om je opmaak te stijlen.
  • Afbeeldingen die op de pagina worden gebruikt.

Maak het voorbeeld op je lokale computer of gebruik een site als JSBin of Thimble om je evaluatie op uit te voeren.

Instructies voor die project

Voor dit project krijg je de volgende taak: je voegt structurele elementen toe aan de inhoud van de startpagina voor vogelaars. Je zorgt ervoor dat er later een lay-out op kan worden toegepast. Het krijgt de volgende elementen:

  • Een hoofding die de volledige breedte van de site bestrijkt. Het bevat de belangrijkste titel voor de pagina, het logo van de site en het navigatie menu. De titel en het logo zullen naast elkaar en verschijnen als de CSS erop wordt toegepast. Het navigatiemenu zal eronder worden weergegeven.
  • Een gebied voor de belangrijkste inhoud die twee kolommen bevat - één blok voor de de welkomsttekst  en een zijbalk voor de thumbnails van de afbeeldingen.
  • Een voettekst die de informatie over de auteursrech en naamsvermeldingen.

Je hebt ook een elementen nodig voor:

  • De hoofding
  • Het navigatiemenu
  • De belangrijkste inhoud
  • De welkomsttekst
  • De zijbalk voor de afbeeldingen
  • De voettekst

Dit moet je ook nog doen:

  • Pas de CSS die je hebt gekregen op de webpagina toe door nog een <link>-element toe te voegen. Dat doe je net onder degene die er al staat.

Hints en tips

  • Gebruik de W3C HTML validator om je HTML te valideren; je krijgt bonuspunten als je HTML zo veel mogelijk wordt gevalideerd (de  "googleapis" regel is een regel die wordt gebruikt om aangepaste lettertypes van Google's Font Service te importeren en die wordt niet gevalideerd. Maak je er maar geen zorgen over.)
  • Je hebt geen CSS-kennis nodig om deze evaluatie uit te voeren; je hoeft enkel de CSS die wij verschaffen in een HTML-element te plaasten.
  • De CSS die je van ons krijgt is zo ontworpen dat als de correcte structurele elementen aan de opmaak worden toegevoegd, ze met een groene kleur in de gegenereerde pagina zullen verschijnen.
  • Als je vastraakt en je hebt geen idee waar je welke elementen moet plaatsen, helpt het vaak om een eenvoudig diagram of de lay-out te tekenen en de elementen die je denkt nodig te hebben op de schets te schrijven.

Voorbeeld

Devolgende schermafbeelding toont een voorbeeld van hoe de startpagina er zou kunnen uitzien nadat die werd opgemaakt.

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

Evaluatie

Als je deze evaluatie als onderdeel van een georganiseerde cursus volgt, zou je in staat moeten zijn om je werk aan je leraar of mentor te geven zodat die er punten aan kan geven. Als je op je eentje werkt, dan kan je de puntengids vrij gemakkelijk krijgen door die op te vragen op de Learning Area Discourse thread, of op het #mdn IRC kanaal op Mozilla IRC. Probeer de oefening eerst uit — met valsspelen ga je niks kunnen winnen! 

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: mientje
 Laatst bijgewerkt door: mientje,