1 Webtalen, browsers en editors
Introductie
Een korte terugblik
Kennismaken met HTML en CSS
Browsers
HTML-editors
Aanvullende hulpmiddelen
Over dit boek
Samenvatting
Oefeningen
2 De basis van HTML
Kenmerken van HTML-documenten
Elementen, tags en tekst
Attributen
Kenmerken van moderne HTML
De basis van een HTML-document
Paginastructuur
Document Object Model – HTML DOM
Het contentmodel van HTML
Secties markeren
Samenvatting
Oefeningen
3 Tekst markeren
Inleiding
Koppen in HTML-documenten
Koppen markeren
Alineatekst markeren
Speciale betekenis aangeven
Inhoud groeperen
Speciale tekens in webpagina’s
Samenvatting
Oefeningen
4 Koppelingen en interactieve elementen
Inleiding
Verbindingen leggen met <a>
Klik hier voor richtlijnen
Externe bestanden koppelen met <link>
Knoppen en hyperlinks
Disclosure widget: <details> en <summary>
Dialoogvenster
Pop-over
Samenvatting
Oefeningen
5 Beeld, geluid en andere externe inhoud
Inleiding
URL’s en structuur van de website
Soorten afbeeldingen
Bestandsformaten voor bitmaps
De juiste afbeelding voor het scherm
Afbeeldingen plaatsen met <img>
Responsive images
Externe HTML-inhoud: <iframe>
Insluiten met <embed> of <object>
Video in een webpagina
Het element <video>
Audio op de website gebruiken
Samenvatting
Oefeningen
6 Formulieren maken
De rol van formulieren
De basis van een formulier: <form>
Labels bij invoervelden
Het element <button>
De tabvolgorde
Het element <input>
Soorten invoer: het attribuut type
Kiezen uit een lijst: <select>, <datalist>, <option>
Uitgebreide tekstinvoer: <textarea>
Groeperen met <fieldset> en <legend>
Voortgang tonen: <progress>
Schaal: <meter>
Resultaat: <output>
Samenvatting
Oefeningen
7 Tabellen maken
Inleiding
De structuur van een HTML-tabel
De basis: <table>
Rijen en kolommen: <tr> en <td>
Koptekst:<thead>
Een bijschrift: <caption>
Overige elementen
Voorbeelden van tabellen
Samenvatting
Oefeningen
8 De basis van CSS
Wat is CSS?
Waarom CSS zo handig is
De taal CSS
De plaats van de CSS-declaraties
Het CSS-bestand
De boomstructuur
Elementen benaderen met selectors
Basisselectors
Pseudo-elementen
Combinatieselectors: afstamming, kind en sibling
Hoe de browser CSS verwerkt: de cascade
Er is geen selector maar wel opmaak: overerving
Werken met cascade layers
De ingebouwde stijlen aanpassen
CSS-declaraties schrijven, maar hoe?
Waarden en eenheden
Samenvatting
Oefeningen
9 Lay-out: boxmodel en weergavemodel
De opbouw van pagina’s
Het boxmodel
Marges
Opvulling
Randen
Overlopende inhoud: overflow
Overloop van de scrol
Weergavemodel
De eigenschap display
Inhoud (niet) weergeven: visibility
Samenvatting
Oefeningen
10 Lay-outs maken met CSS
Inleiding
Responsive design
Media queries
Container queries
Weergave op mobiele schermen: de metatag viewport
Lay-out: positionering
Lay-out: multi-column
Lay-out in een raster: gridlay-out
Toepassing: nos.nl
Lay-out: flexbox
De toekomst: box alignment
Samenvatting
Oefeningen
11 Tekst en typografie
Inleiding
Lettertype: van systeem of online?
Lettertypen downloaden: @font-face
Eigenschappen voor lettertype: font
Eigenschappen voor tekst
Opmaak van lijsten
Lijst als navigatie
Samenvatting
Oefeningen
12 Kleur, randen en achtergronden
Inleiding
Kleurwaarden
Kleur van tekst
De achtergrond
Lichte en donkere modus
Kleurverlopen
Afgeronde hoeken
Randafbeelding
Schaduw
Afbeeldingen uitsnijden met clip-path
Beeldfilters
Kleuren mengen
Samenvatting
Oefeningen
13 Overgangen en animaties, attr() en CSS-variabelen
Beweging in webpagina’s
Overgangen (transitions)
Animatie
Transformatie
CSS-variabelen: de functie var()
Attributen uitlezen met attr()
Samenvatting
Oefeningen
Index
