VMBO KB Media, vormgeving en ICT: Webdesign en digitale media: HTML/CSS, interface en content

Wat het examen vraagt

Je moet een eenvoudige webpagina kunnen opbouwen en beoordelen op gebruiksvriendelijkheid: structuur in HTML, vormgeving in CSS en content die de bezoeker begrijpt.

HTML: structuur

Basis: <!DOCTYPE html>, html, head met title en meta name="viewport", en body.
Structuurtags: header, nav, main, section, footer.
Content: h1 (één per pagina), h2, p, ul met li, a href, img src alt.
De alt-tekst beschrijft het beeld voor wie het niet ziet; bij puur decoratie mag die leeg zijn.

CSS: vormgeving

Selector: p (element), .naam (class, meerdere keren), #naam (id, één keer).
Box model: content, dan padding, dan border, dan margin.
font-family met fallback, kleur in hex, altijd voldoende contrast.
Responsive: @media (max-width: 768px) zet kolommen onder elkaar; afbeeldingen krijgen max-width: 100%.

Interface en content

Bezoekers scannen in een F- of Z-patroon: het belangrijkste staat linksboven. Houd de navigatie kort en gelijk op elke pagina, één duidelijke actie per pagina, geen lange zinnen in hoofdletters. Comprimeer afbeeldingen voor snelheid en gebruik beschrijvende bestandsnamen.

Uitgewerkt voorbeeld

Een kaart met drie kolommen loopt op mobiel over de rand. Eerst zet je box-sizing: border-box op alles, dan zet je de kaarten in een container met display: flex; flex-wrap: wrap;, en met een media query op 768 px wordt flex-direction: column, plus max-width: 100% op afbeeldingen. Je lost dus eerst het model op, dan de layout, dan het beeld.

Valkuilen

Elke kop als h1 gebruiken of koppen alleen vet maken zonder heading-tag.
Een id hergebruiken voor meerdere blokken.
Alt-tekst vullen met "afbeelding" of helemaal weglaten.
Grijze tekst op wit zetten zonder contrast te checken.