1

Inleiding

• DTD's en XML-syntaxis (structureren, commentaar).
• De structuur van een HTML-document: afbeeldingen, CSS-stylesheets, JavaScript.
• HTML semantiek: koppen, paragrafen, links, tabellen, formulieren, enz.
• Het documentmodel (DOM). Het HTTP-protocol.
• Optimalisatie van het kritieke renderpad.
• Topografie van HTML5-concepten en bijdragen.
• HTML5-ontwikkeltools.
• Compatibiliteitstests, HTML5-detectiemethode.

2

Nieuwe structuur

• De traditionele elementen die een HTML-document structureren (doctype, html, head, body, meta...).
• De structurele elementen <nav>, <section>, <article>, <aside>, <header> en <footer>.
• Inhoudscategorieën: metagegevens, stroom, katernen, koppen, zinsopbouw, ingesloten en interactieve inhoud.
• Het belang van het structureren van tags voor SEO.
• Nesting en type inhoud.

3

De nieuwe HTML-tags

• Verouderde tags en attributen.
• De tags : <mark>, <meter>, <time>, <figure>, <picture>...
• Uitbreidingen voor bestaande HTML-tags.
• Attributen: a, fieldset, iframe, gebied, knop, enz.
• Microformats. Overzicht en voordelen voor zoekmachineoptimalisatie.
• Nieuwe formuliervelden en attributen: bereik, autofocus, plaatshouder, menu, enz.
• Tekeningen: Canvas versus SVG.
• Multimedia-indelingen. Multimedia codecs en API's.
• Video- en audiobeheer met de nieuwe tags <audio> en <video> in HTML5.

4

CSS3-selectors

• Syntaxherinnering: selectors, regels.
• Selectoren voor n-de-kind(even) herhaling, doel doel, oudere broer of zus ~, enig-kind.
• Media queries voor het voorwaardelijk laden van CSS afhankelijk van de resolutie of oriëntatie van de terminal.

5

Kleuren en tekstopmaak

• Herinnering aan RGB- en RGBA-declaraties.
• HSL- en HSLA-modellen.
• De eigenschap ondoorzichtigheid.
• Ondersteuning voor @font-face externe lettertypen.
• Tekstopmaak.
• Creatie van een pictogrammensysteem.
• Overloopbeheer met behulp van tekst-overloop.
• Wrap-optie ketenbeheer, witte-ruimte-behandeling...
• Kleur- en schaduweffecten op tekst met tekstvul-kleur, tekst-schaduw...
• Modi voor meerdere kolommen met kolomtelling, kolombreedte...

6

Vakken en achtergronden opmaken

• Schaduwen met boxschaduw.
• Afgeronde hoeken met...
• Beheer van meerdere fondsen.
• Achtergrondverlopen (-webkit-verloop).
• Voor containers gecorrigeerde fondsen.
• Transformaties: translaties, rotaties, homothetieën.
• Animaties: animaties en overgangen.

7

Rasterindeling

• Het "Grid" principe.
• Maak een paginalay-out per blok.
• Positionering van elk blok op de pagina.
• Wijzigt de lay-out en grootte van de ouderblokken afhankelijk van de grootte van het scherm van de gebruiker.

8

Flexbox

• Het einde van de drijvers.
• Verdeling van subblokken binnen het hoofdblok.
• Volgorde blokweergave.
• Ouders gebruiken de daarvoor bestemde ruimte.
• Centreer een blok verticaal in 2 regels code.
• De lay-out en grootte van deze blokken aanpassen aan de grootte van het scherm van de gebruiker.

9

Een CSS-raamwerk kiezen

• Het aanbod van de community. (Bootstrap, Material Design, Foundation).
• Gemeenschappelijke criteria en concepten.
• Gespecialiseerde raamwerken voor componenten.
• Gespecialiseerde mobiele frameworks.

10

SVG, vector en responsieve afbeeldingen

• SVG syntaxis.
• Ondersteuning en integratie van SVG-afbeeldingen in het document.
• SVG en lettertypen.
• SVG-optimalisatie.
• Animatie van SVG-afbeeldingen.
• Bibliotheken voor het maken van SVG-afbeeldingen: SVG.js, Velocity, Raphaël...