Inleiding

Geschiedenis van HTML
Versies

Structuur van een document

De grondbeginselen van een HTML-document
Het Doctype
De html, head, body tags
Het commentaar
Tag- en attribuutstructuren
Verschillen tussen inline en blok tags

Inhoud tags

Koppen (h1, h2, h3, enz.)
Alinea's
Vet en cursief
Hyperlinks
Lijsten (geordend en ongeordend)
Tabellen

Workshop: Structuur van een html-pagina

Media

Afbeeldingen en beeldformaat
Essentiële attributen (src, alt, enz.)
Integratie van geluiden en video's
Andere media

Workshop: Verschillende media integreren op een html-pagina

CSS

Presentatie en definitie
Een css aan een html-pagina koppelen
Selectors (tag, id, class)
Pseudo-classes
Eigenschappen en waarden
Commentaar

Workshop : Een css-sheet toevoegen aan een html-pagina

De eigenschappen

Teksteigenschappen (lettertype, grootte, uitlijning)
Hexadecimale, rgb, rgba en benoemde kleuren
Eigenschappen achtergrond
Interne en externe marges (marge, padding)
Randen
Afmetingen
Lijsten

Workshop: Een bestaande pagina stylen

Blok positionering

Absolute of relatieve positionering
Zwevende en vaste blokken
Flexibele blokken
Rasters

Workshop: Verschillende blokken op een pagina plaatsen

Formulieren

De formuliertags
De actie- en methode-attributen
De verschillende formuliervelden
De verschillende vormen van het invoerveld
De attributen voor formuliervelden (plaatshouder, verplicht, enz.)
Het valideren van een formulier

Workshop: Een inschrijvingsformulier maken

Animaties

Animaties en overgangen
Animatieduur
Overgangsfuncties
Keyframes

Workshop: Een animatie maken

Andere CSS3 eigenschappen

Transformaties
Tekst- en blokschaduwen
Afgeronde randen
Kolommen
De box-size eigenschap

Een aanpasbare website bouwen

Responsive Web Design (RWD): definitie, componenten
Ergonomische en functionele beperkingen
Viewport: begrip, meta, waarden
Relatieve eenheden (%, em) vs. absoluut (px)

Een flexibel weergaveraster maken

Schermformaten, optimale resolutie
Staand en liggend
Uitdrukking van formaten in percentage (%), em
Minimale, maximale formaten
Blokken, content/container-benadering
Principe van boxen, opmaak met CSS3
Lettergrootte: een basis voor formaten bepalen, em-conversies
Overloop vermijden

Workshop: Meerdere voorbeelden van flexibele rasters

Gebruik van flexibele media

Flexibele afbeeldingen: achtergrondafbeeldingen, HTML5-aanpassing
Flexibele marges en spaties
Aangepaste video's
Ondersteuning voor CSS-eigenschappen in oudere browsers

Workshop: Overloop van afbeeldingen/video's vermijden

CSS3 Media Queries schrijven

De weergave aanpassen aan de resolutie
Mediatypes
Keuze uit voorwaardelijke regels: oriëntatie, apparaatbreedte
Interne en externe media-query's
Menu's en schuifregelaars beheren

Workshop: Het creëren van een pure css responsive site met media queries

RWD-kaders

Overzicht van bestaande frameworks
Bootstrap
960 grid
Optimalisatie van grafische bronnen

Workshop: Een aanpasbare site bouwen met Bootstrap

Het behalen van de certificering (indien in de financiering inbegrepen)