8.0 KiB

Raw Blame History Unescape Escape

HTML Oefenopdracht: Maak een Blog Mockup

Leerdoelen

Pas je HTML-kennis toe door een complete blog homepage te ontwerpen en te coderen. Deze praktische opdracht versterkt je begrip van semantische HTML-concepten, toegankelijkheidsrichtlijnen en professionele code-organisatievaardigheden die je gedurende je webontwikkelingsreis zult gebruiken.

Door deze opdracht te voltooien, leer je:

Het plannen van website-indelingen voordat je begint met coderen
Het correct toepassen van semantische HTML-elementen
Het maken van toegankelijke, goed gestructureerde markup
Het ontwikkelen van professionele codeer-gewoontes met behulp van commentaar en organisatie

Projectvereisten

Deel 1: Ontwerpplanning (Visuele Mockup)

Maak een visuele mockup van je blog homepage die het volgende bevat:

Header met sitetitel en navigatie
Hoofdinhoud met minimaal 2-3 blogpost previews
Zijbalk met aanvullende informatie (over-sectie, recente berichten, categorieën)
Footer met contactinformatie of links

Opties voor het maken van een mockup:

Handgetekende schets: Gebruik papier en potlood, maak vervolgens een foto of scan je ontwerp
Digitale tools: Figma, Adobe XD, Canva, PowerPoint of een andere tekenapplicatie
Wireframe tools: Balsamiq, MockFlow of vergelijkbare wireframing software

Label de secties van je mockup met de HTML-elementen die je van plan bent te gebruiken (bijv. "Header - <header>", "Blogposts - <article>").

Deel 2: HTML Elementen Planning

Maak een lijst waarin elke sectie van je mockup wordt gekoppeld aan specifieke HTML-elementen:

Example:
- Site Header → <header>
- Main Navigation → <nav> with <ul> and <li>
- Blog Post → <article> with <h2>, <p>, <time>
- Sidebar → <aside> with <section> elements
- Page Footer → <footer>

Verplichte elementen om op te nemen: Je HTML moet minimaal 10 verschillende semantische elementen bevatten uit deze lijst:

<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
<h1>, <h2>, <h3>, <p>, <ul>, <li>, <a>
<img>, <time>, <blockquote>, <strong>, <em>

Deel 3: HTML Implementatie

Codeer je blog homepage volgens deze standaarden:

Documentstructuur: Voeg de juiste DOCTYPE, html, head en body-elementen toe
Semantische Markup: Gebruik HTML-elementen voor hun beoogde doel
Toegankelijkheid: Voeg correcte alt-tekst toe voor afbeeldingen en betekenisvolle linktekst
Codekwaliteit: Gebruik consistente inspringing en zinvolle commentaren
Inhoud: Voeg realistische bloginhoud toe (je kunt gebruik maken van tijdelijke tekst)

Voorbeeld HTML-structuur:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Personal Blog</title>
</head>
<body>
    <!-- Main site header -->
    <header>
        <h1>My Blog Title</h1>
        <nav>
            <!-- Navigation menu -->
        </nav>
    </header>
    
    <!-- Main content area -->
    <main>
        <!-- Blog posts go here -->
    </main>
    
    <!-- Sidebar content -->
    <aside>
        <!-- Additional information -->
    </aside>
    
    <!-- Site footer -->
    <footer>
        <!-- Footer content -->
    </footer>
</body>
</html>

Deel 4: Reflectie

Schrijf een korte reflectie (3-5 zinnen) waarin je het volgende behandelt:

Welke HTML-elementen gebruikte je met het meeste vertrouwen?
Welke uitdagingen kwam je tegen tijdens het plannen of coderen?
Hoe heeft semantische HTML geholpen bij het organiseren van je inhoud?
Wat zou je anders doen bij je volgende HTML-project?

Inleverchecklist

Controleer voordat je inlevert of je het volgende hebt:

Visuele mockup met gelabelde HTML-elementen
Volledig HTML-bestand met correcte documentstructuur
Minimaal 10 verschillende semantische HTML-elementen correct gebruikt
Zinvolle commentaren die je code-structuur uitleggen
Geldige HTML-syntaxis (test in een browser)
Geschreven reflectie die de vragen beantwoordt

Beoordelingsrubriek

Criteria	Uitmuntend (4)	Voldoende (3)	Ontwikkelend (2)	Beginnend (1)
Planning & Ontwerp	Gedetailleerde, goed gelabelde mockup die duidelijk begrip toont van de indeling en semantische HTML-structuur	Duidelijke mockup met de meeste secties correct gelabeld	Basis mockup met enkele labels, toont algemeen begrip	Minimale of onduidelijke mockup, mist correcte sectie-identificatie
Gebruik van semantische HTML	Gebruikt 10+ semantische elementen correct, toont diep begrip van HTML-structuur en toegankelijkheid	Gebruikt 8-9 semantische elementen correct, toont goed begrip van semantische markup	Gebruikt 6-7 semantische elementen, enige verwarring over correct gebruik	Gebruikt minder dan 6 elementen of gebruikt semantische elementen verkeerd
Codekwaliteit & Organisatie	Uitzonderlijk goed georganiseerde, correct ingesprongen code met uitgebreide commentaren en perfecte HTML-syntaxis	Goed georganiseerde code met goede inspringing, nuttige commentaren en geldige syntaxis	Meestal georganiseerde code met enkele commentaren, kleine syntaxisproblemen	Slechte organisatie, minimale commentaren, meerdere syntaxisfouten
Toegankelijkheid & Best Practices	Uitstekende toegankelijkheidsmaatregelen, betekenisvolle alt-tekst, correcte koppenhiërarchie, volgt alle moderne HTML best practices	Goede toegankelijkheidskenmerken, juiste koppen en alt-tekst, volgt de meeste best practices	Enkele toegankelijkheidsmaatregelen, basis alt-tekst en koppenstructuur	Beperkte toegankelijkheidskenmerken, slechte koppenstructuur, volgt geen best practices
Reflectie & Leren	Inzichtelijke reflectie die diep begrip van HTML-concepten en een doordachte analyse van het leerproces toont	Goede reflectie die begrip van kernconcepten en enige zelfbewustzijn van leren toont	Basisreflectie met beperkte inzichten in HTML-concepten of leerproces	Minimale of ontbrekende reflectie, toont weinig begrip van de geleerde concepten

Leerbronnen

Essentiële referenties:

MDN HTML Elements Reference - Complete gids voor alle HTML-elementen
HTML5 Semantic Elements - Begrip van semantische markup
Web Accessibility Guidelines - Toegankelijke webinhoud maken
HTML Validator - Controleer je HTML-syntaxis

Tips voor succes:

Begin met je mockup voordat je begint met coderen
Gebruik de ontwikkelaarstools van je browser om je HTML-structuur te inspecteren
Test je pagina op verschillende schermformaten (zelfs zonder CSS)
Lees je HTML hardop om te controleren of de structuur logisch is
Denk na over hoe een schermlezer je pagina-structuur zou interpreteren

💡 Onthoud: Deze opdracht richt zich op HTML-structuur en semantiek. Maak je geen zorgen over visuele styling – daar is CSS voor! Je pagina ziet er misschien eenvoudig uit, maar moet goed gestructureerd en betekenisvol zijn.

Disclaimer:
Dit document is vertaald met behulp van de AI-vertalingsservice Co-op Translator. Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.

8.0 KiB Raw Blame History Unescape Escape