HTML Cursus

Les 1 • Je ontwikkelomgeving instellen

Begeleidt de installatie van een code-editor en browserontwikkeltools. Studenten hebben een werkende lokale omgeving klaar voor praktische codeeroefeningen.

Les 2 • Hoe het web werkt

Behandelt client-servercommunicatie, browsers en de basis van HTTP. Biedt context waarom HTML-structuur belangrijk is bij webverzending.

Les 3 • Wat HTML is en doet

Definieert HTML als een opmaaktaal en legt de relatie uit met CSS en JavaScript. Geeft studenten inzicht in de specifieke verantwoordelijkheid van HTML: inhoudsstructuur.

Les 1 • Koppen, alinea's en tekstelementen

Behandelt h1–h6, p, br, hr, strong, em en gerelateerde inline-elementen. Studenten structureren leesbare tekstinhoud met correcte semantische keuzes.

Les 2 • Tags, elementen en attributen

Legt openings- en sluitingstags, zelfsluitende elementen en attribuutsyntax uit. Bouwt het mentale model dat studenten toepassen op elk element gedurende de cursus.

Les 3 • Lijsten: geordend, ongeordend en beschrijving

Leert ul, ol, li, dl, dt en dd-elementen met correcte nesting. Studenten kiezen het juiste lijsttype op basis van de betekenis van de inhoud.

Les 1 • Essentiële meta-tags

Behandelt charset-, viewport-, beschrijvings- en auteur meta-tags. Studenten configureren de minimaal vereiste metadata voor elke pagina die ze publiceren.

Les 2 • Open Graph- en sociale metadata

Introduceert Open Graph- en Twitter Card-meta-tags voor rijke sociale voorvertoningen. Studenten configureren metadata die bepaalt hoe pagina's verschijnen wanneer ze worden gedeeld.

Les 3 • Externe bronnen koppelen

Leert het link-element voor stylesheets, pictogrammen en vooraf laden van assets. Studenten verbinden CSS-bestanden en favicons correct met behulp van rel en href.

Les 1 • Afbeeldingen insluiten

Leert het img-element, src-, alt-, width- en height-attributen. Studenten sluiten toegankelijke afbeeldingen in met correcte paden en betekenisvolle alternatieve tekst.

Les 2 • Figuren en bijschriften

Introduceert figure en figcaption voor het semantisch groeperen van afbeeldingen met beschrijvende tekst. Versterkt semantische HTML-principes die in hoofdstuk 2 zijn geïntroduceerd.

Les 3 • Hyperlinks met het anker-element

Behandelt het a-element, href-, target- en rel-attributen voor interne en externe links. Studenten implementeren navigatie tussen pagina's en naar externe sites.

Les 1 • Toegankelijke en semantische tabellen

Past ARIA-rollen en samenvattingspatronen toe om de toegankelijkheid van tabellen te verbeteren. Versterkt het principe dat HTML-structuur betekenis communiceert aan alle gebruikers.

Les 2 • Rijen en kolommen overspannen

Leert colspan- en rowspan-attributen voor complexe gegevenslay-outs. Studenten voegen cellen samen zonder de tabelstructuur of toegankelijkheid te verbreken.

Les 3 • Basale tabelstructuur

Introduceert table-, tr-, td- en th-elementen om rijen en kolommen te maken. Studenten bouwen een eenvoudige gegevenstabel vanaf nul.

Les 1 • Invoertypen en tekstbesturingselementen

Leert tekst-, e-mail-, wachtwoord-, getal-, datum- en andere invoertypen. Studenten selecteren het juiste type om de juiste toetsenborden en validatie te activeren.

Les 2 • Selectiebesturingselementen: selectievakjes, keuzerondjes en selecties

Behandelt selectievakje-, keuzerondje-, select-, option- en optgroup-elementen. Studenten implementeren gegroepeerde keuzes met correcte naam- en waarde-attributen.

Les 3 • Labels, fieldsets en toegankelijke formulieren

Leert label-, fieldset- en legend voor het koppelen van besturingselementen aan beschrijvingen. Studenten bouwen formulieren die volledig bedienbaar zijn met toetsenbord en schermlezer.

Les 4 • HTML5-formuliervalidatie

Behandelt required-, pattern-, min-, max- en minlength-attributen voor client-side validatie. Studenten verminderen ongeldige inzendingen zonder JavaScript te schrijven.

Les 1 • Landmark-elementen op paginaniveau

Behandelt header-, nav-, main-, aside-, footer- en section-elementen en hun correcte gebruik. Studenten wijzen een volledige paginalay-out toe aan de juiste landmark-regio's.

Les 2 • Waarom semantiek ertoe doet

Legt uit hoe semantische elementen betekenis communiceren aan browsers, zoekmachines en ondersteunende technologieën. Motiveert de verschuiving van div-zware naar semantische opmaak.

Les 3 • Inline semantische elementen

Leert time, mark, abbr, cite, code, kbd en samp voor precieze inline betekenis. Studenten annoteren inhoud met elementen die een specifieke semantische bedoeling overbrengen.

Les 4 • Article, section en inhoudgroepering

Onderscheidt article, section en div voor het groeperen van gerelateerde inhoud. Studenten passen het juiste element toe op basis van of de inhoud op zichzelf staat of thematisch is.

Les 1 • Toetsenbordtoegankelijkheid en focusbeheer

Leert tabindex, focusvolgorde en skip-navigatielinks. Studenten verifiëren dat alle interactieve elementen bereikbaar en bedienbaar zijn zonder muis.

Les 2 • Basisprincipes van webtoegankelijkheid

Introduceert WCAG-principes: waarneembaar, bedienbaar, begrijpelijk en robuust. Studenten identificeren welke HTML-beslissingen elk toegankelijkheidsprincipe direct beïnvloeden.

Les 3 • HTML-validatie en foutcorrectie

Gebruikt de W3C-validator en browserontwikkeltools om opmaakfouten te vinden en te herstellen. Studenten ontwikkelen een validatiegewoonte die weergaveproblemen in verschillende browsers voorkomt.

Les 4 • HTML-coderingsstandaarden en onderhoudbaarheid

Stelt consistente opmaak-, naamgevings- en opmerkingspraktijken vast. Studenten schrijven HTML die teamgenoten zelfverzekerd kunnen lezen, onderhouden en uitbreiden.