1. Webtalen, browsers en editors
-Introductie
-Een snelle terugblik
-Afspraken over webtalen
-Twee smaken HTML
-Wat HTML5 is
-Kennismaken met HTML en CSS
-Aan de serverkant
-HTML – Hypertext Markup Language
-CSS – Cascading Style Sheets
-Browsers
-Google Chrome
-Microsoft Internet Explorer/Edge
-Mozilla Firefox
-Mac OS X: Safari
-HTML-editors
-Brackets
-Aanvullende hulpmiddelen
-Hulpmiddelen voor validatie
-Hulpmiddelen voor ontwikkeling
-Samenvatting
-Oefeningen
2. De basis van HTML5
-Kenmerken van HTML-documenten
-Elementen, tags en tekst
-Sluiten in de goede volgorde
-De HTML-code van webpagina’s bekijken
-Attributen
-Kenmerken van attributen
-Globale attributen
-Nieuw in HTML5
-Vervallen onderdelen
-De basis van een HTML5-document
-<!DOCTYPE html>
-<html lang="nl">
-<head>
-<meta charset="utf-8">
-<title>
-<link>
-<body>
-Paginastructuur
-Document Object Model – HTML DOM
-De outline van een document
-Het contentmodel van HTML5
-Secties markeren – theorie
-<article> (sectioning content)
-<section> (sectioning content)
-<nav> (sectioning content)
-<aside> (sectioning content)
-Sectioning root
-<header> (flow content)
-<footer> (flow content)
-<address> (flow content)
-<main> (flow content)
-<div> (flow content)
-Samenvatting
-Secties markeren – praktijk
-Eenvoudige webpagina
-Productenpresentatie
-Blog
-Weergave in oude browsers
-Samenvatting
-Oefeningen
3. Tekst markeren
-Inleiding
-Koppen markeren
-Koppen in een header
-Tekst markeren
-Alinea’s: het element <p>
-Het regeleinde <br>
-Afbreken van woorden
-Speciale betekenis aangeven
-Inhoud groeperen
-Vooraf opgemaakte inhoud: <pre>
-Citaten gebruiken: <blockquote>
-Lijsten maken: <ol>, <ul> en <li>
-Illustraties en bijschriften: <figure> en <figcaption>
-FAQ, metadata en definities: <dl>, <dt> en <dd>
-Nieuw thema markeren: <hr>
-Speciale tekens in webpagina’s
-Van ASCII naar UTF-8
-Referenties gebruiken
-Samenvatting
-Oefeningen
4. Koppelingen maken
-Inleiding
-Verbindingen leggen met <a>
-Niet volgen: nofollow
-Niet klikken: noreferrer
-Bladwijzers maken
-Link naar een grote foto
-Link naar het vervolg van een artikel
-Link naar een e-mailadres
-Klik hier voor richtlijnen
-Externe bestanden koppelen met <link>
-Stylesheet koppelen
-Een favicon gebruiken
-Opeenvolgende pagina’s
-Vooraf laden: prefetch, prerender en dns-prefetch
-Overige waarden van rel
-Samenvatting
-Oefeningen
5. Beeld, geluid en andere externe inhoud
-Inleiding
-URL’s en structuur van de website
-Lokale site
-Soorten afbeeldingen
-Bitmaps
-Vectorafbeeldingen: SVG
-Bestandsformaten voor bitmaps
-GIF
-JPEG
-PNG
-Afbeeldingen in HTML
-De bron: src
-Beschrijvende tekst: alt
-Afmetingen: width en height
-Klikbare gebieden: usemap
-Externe HTML-inhoud: <iframe>
-Attributen
-Beveiliging
-Insluiten met <embed> of <object>
-Video in een webpagina
-Bestandstypen voor video
-Een codec kiezen
-Video coderen
-Het element <video>
-De bron: <source>
-Hulp voor oudere browsers
-Ondertiteling met <track>
-Titelbestanden: WebVTT
-Audio op de website gebruiken
-Samenvatting
-Oefeningen
6. Tabellen maken
-Inleiding
-De structuur van een HTML-tabel
-De basis: <table>
-Rijen en kolommen: <tr> en <td>
-Koptekst:<thead>
-Een bijschrift: <caption>
-Figcaption in plaats van caption
-Overige elementen
-De tabelinhoud: <tbody>
-Voettekst: <tfoot>
-Kolomgroepen: <colgroup> en <col>
-Voorbeelden van tabellen
-Samenvatting
-Oefeningen
7. Formulieren maken
-Formulieren in HTML5
-Verbeteringen aan de clientkant
-De rol van de webserver
-De basis van een formulier: <form>
-Buiten <form> mag ook
-De verwerking: action
-Verzendwijze: method
-Codering: enctype
-Automatisch aanvullen: autocomplete
-Niet valideren: novalidate
-Direct invoeren: autofocus
-De naam: name
-Het doel: target
-Buitenspelelementen: form
-Het element <label>
-De tabvolgorde
-Het element <input>
-Attributen van <input>
-Soorten invoer: het attribuut type
-Telefoonnummers: <input type="tel">
-E-mailadressen: <input type="email">
-Webadressen: <input type="url">
-Wachtwoorden: <input type="password">
-Getallen: <input type="number">
-Een bereik: <input type="range">
-Kleuren: <input type="color">
-Datum en tijd: date en time
-Selectievakjes: <input type="checkbox">
-Keuzerondjes: <input type="radio">
-Bestanden uploaden: <input type="file">
-Verzendknop: <input type="submit">
-Afbeeldingknop: <input type="image">
-Resetknop: <input type="reset">
-Functieloze knop: <input type="button">
-Verborgen waarden: <input type="hidden">
-Het element <button>
-Voorbeeld van <button> met afbeelding
-Kiezen uit een lijst: <select>, <datalist>, <option>
-<option>
-<select>
-<datalist>
-Uitgebreide tekstinvoer: <textarea>
-Groeperen met <fieldset> en <legend>
-Voortgang tonen: <progress>
-Schaal: <meter>
-Resultaat: <output>
-Samenvatting
-Oefeningen
8. De basis van CSS
-Wat CSS is
-Voorgeschiedenis
-En toen was er CSS3
-Waarom CSS zo handig is
-De taal CSS
-Waarden en eenheden
-Lengte
-CSS-verwerking door de browser
-De boomstructuur
-Waarden toewijzen
-De cascade
-Specificiteit bereken
-Overerving
-De plaats van de CSS-declaraties
-Het attribuut style
-Het element <style>
-Extern bestand: <link>
-Het CSS-bestand
-Commentaar toevoegen
-Andere stijlbladen importen
-De ingebouwde stijlen aanpassen
-Elementen benaderen met selectors
-Universele selector *
-Typeselector
-Attribuutselectors
-Combinators: afstamming, kind en sibling
-Pseudoklassen
-Pseudoklasse ontkenning
-Pseudo-elementen
-De selectors class en id
-Best practices
-Samenvatting
-Oefeningen
9. Boxmodel, weergavemodel en positionering
-De opbouw van pagina’s
-Het boxmodel
-De eigenschap box-sizing
-Begrensde breedte en hoogte
-Marges
-Horizontaal centreren
-Verticaal centreren
-Negatieve marge
-Ingevouwen marges
-Padding
-Randen
-Randdikte
-Randkleur
-Randstijl
-Korte notatie voor randen
-Weergavemodel
-De eigenschap display
-Positionering – de lay-out
-Het omvattende blok
-Verschuiven met top, right, bottom en left
-Relatieve positionering
-Absolute positionering
-Vaste positie: fixed
-Float
-Vrije ruimte met clear
-Praktijkoplossing: clearfix
-Visuele effecten
-Overlopende inhoud: overflow
-Nieuw: resize
-Uitsnijden met clip-path
-Zichtbaarheid: visibility
-De toekomst
-Samenvatting
-Oefeningen
10. CSS: tekst en typografie
-Inleiding
-Lettertype: van systeem of online?
-Web fonts
-Lettertypen downloaden: @font-face
-Eigenschappen van @font-face
-Een embedcode gebruiken
-Eigenschappen voor lettertype: font
-Lettertype
-Lettergrootte: font-size met px, em en rem
-Grootte aanpassen: font-size-adjust
-Regelhoogte: line-height
-Letterstijl: font-style
-Lettergewicht: font-weight
-Uitrekken of indrukken: font-stretch
-Kleinkapitaal: font-variant
-De verzameleigenschap font
-Eigenschappen voor tekst
-Witruimte behouden: white-space
-Overlopende tekst: text-overflow
-Uitlijnen: text-align
-Inspringen
-Ruimte tussen woorden en letters
-Lijneffecten op tekst
-Tekst omzetten: text-transform
-Tekst met schaduw
-Opmaak van lijsten
-Lijst als navigatie
-Uitklapbaar menu
-Samenvatting
-Oefeningen
11. Kleur, randen en achtergronden
-Inleiding
-Kleurwaarden
-RGB en RGBA
-HSL en HSLA
-Transparantie
-Kleur van tekst
-De achtergrond
-Achtergrondkleur
-Achtergrondafbeelding
-Verschillende achtergrondafbeeldingen
-Kleurverloop als achtergrond
-Kleurverlopen
-Trendgevoelige eigenschap
-Lineair verloop
-Radiaal verloop
-Repeterende verlopen
-Afgeronde hoeken
-Randafbeelding
-Voorbeeld van een randafbeelding
-Randafbeelding op <body>
-Schaduw
-Samenvatting
-Oefeningen
12. Lay-outs maken
-Inleiding
-Media queries en responsive design
-Responsive design en mobile first
-Weergave op mobiele schermen: de metatag viewport
-Media queries: breekpunten in de lay-out
-Vensterbreedte en -hoogte
-Schermbreedte en -hoogte
-Schermresolutie
-Portret of landschap
-Beeldverhouding
-Lay-out met positionering en floats
-Flexibele lay-out met flexbox
-Flexcontainers en flexitems
-Het assenstelsel van de flex-flow
-De richting: flex-direction
-Regelomloop: flex-wrap
-De eigenschap flex-flow
-De volgorde: order
-Flexitems schalen
-Instellingen voor flex
-Flexitems uitlijnen
-Uitlijnen met de marge
-Uitlijnen op de hoofdas: justify-content
-Uitlijnen op de kruisas: align-self
-Regels uitlijnen: align content
-Een lay-out maken met flexbox
-Verder ontdekken
-Samenvatting
-Oefening
Index
