Herhalingsoefening
Last updated
Last updated
Dit is één grote oefening die gericht is op het begrijpen en toepassen van de juiste semantiek binnen HTML5. Zorg ervoor dat je de semantische elementen op de juiste manier gebruikt om de structuur en betekenis van je webpagina correct te definiëren.
Om deze oefeningen te kunnen maken heb je de volgende bijlage nodig: herhalingsoefening-bijlage.zip
Maak een nieuwe HTML5-pagina “index.html” met de juiste doctype-declaratie en een <head>-sectie.
Voeg een paginatitel toe in de <title>-tag in het <head>-gedeelte.
Maak een -element aan voor de inhoud van de pagina
Binnen de -sectie, voeg je een-element toe met een titel die de naam van je webpagina vertegenwoordigt.
Voeg een navigatiemenu toe met ten minste drie links naar verschillende secties op je pagina. Gebruik hiervoor <nav> en <ul> met <li>-elementen.
Voeg een <main>-element toe aan je pagina.
Binnen het <main>-element, schrijf de hoofdinhoud van je webpagina met behulp van relevante semantische HTML5- elementen, zoals <article>, <section>, <h1>, <h2>, <p>, en eventueel <figure> met <figcaption> voor afbeeldingen
Voeg een zijbalk toe en gebruik hiervoor een <aside>-element. Zet in de zijbalk contactinfomatie en maak hierbij gebruik van het <address>-element met de volgende gegevens:
adres: [Voeg een fictief adres in]
telefoonnummer: [Voeg een telefoonnummer in]
e-mail: link naar het e-mailadres "lector@ap.be", waarbij het emailadres zelf als klikbare link wordt weergegeven.
Voeg een <footer>-element toe onderaan je pagina. Plaats hierin volgende informatie:
een voettekst met een copyright-teken jaar AP-Hogeschool
op de tekst “AP-Hogeschool” plaats je een link naar de website van de school die zal openen in een nieuw venster
Voeg afbeeldingen en multimedia toe aan:
in de header een logo
in de hoofdinhoud van je pagina gebruik je <figure> en <figcaption> voor afbeeldingen en <audio> of <video> voor multimedia-inhoud
maak gebruik van rechtenvrije afbeeldingen en/of van AI
Gebruik minstens 2 andere relevante semantische elementen zoals speciale karakters, <abbr> voor afkortingen, <blockquote>, <q> enzovoort, om de betekenis van je inhoud te verduidelijken.
