1. Webtalen, browsers en editors 1
Introductie 2
Een korte terugblik 2
Afspraken over webtalen 3
Twee smaken HTML 5
Wat HTML 5 is 6
Kennismaken met HTML en CSS 8
Aan de serverkant 8
De functie van HTML 9
De functie van CSS 10
Browsers 12
Google Chrome 13
Microsoft Edge (Internet Explorer) 14
Mozilla Firefox 15
MacOS: Safari 16
HTML-editors 16
Visual Studio Code 17
Commerciële editors/IDE’s 19
Aanvullende hulpmiddelen 19
Hulpmiddelen voor validatie 19
Hulpmiddelen voor ontwikkeling 20
Over dit boek 25
Oefenbestanden 25
Samenvatting 25
Oefeningen 26
2. De basis van HTML 27
Kenmerken van HTML-documenten 28
Elementen, tags en tekst 28
Opbouw van een element 30
Elementen nesten 31
Kleine letters 32
Sluiten in de goede volgorde 32
De HTML-code van webpagina’s bekijken 33
Attributen 36
Kenmerken van attributen 36
Globale attributen 37
Microdata 42
WAI-ARIA 42
Kenmerken van HTML 5 43
Omringende technieken 45
De basis van een HTML 5-document 46
<!DOCTYPE html> 47
<html lang="nl"> 47
<head> 48
<meta charset="utf-8"> 48
<title> 48
<link> 49
<body> 49
Paginastructuur 50
Document Object Model – HTML DOM 50
Het contentmodel van HTML 5 51
Secties markeren 54
<article> (sectioning content) 55
<section> (sectioning content) 56
<nav> (sectioning content) 57
<aside> (sectioning content) 58
Koppen: <h1> t/m <h6> 59
<header> (flow content) 60
<footer> (flow content) 61
Samenvatting 63
Oefeningen 63
3. Tekst markeren 65
Inleiding 66
Koppen in HTML-documenten 66
Het getal bepaalt de keus, niet de tekstgrootte 66
Titel website is niet automatisch <h1> 67
Koppen markeren 67
Koppen in een header 68
Alineatekst markeren 69
Alinea’s: het element <p> 70
Het regeleinde <br> 71
Afbreken van woorden 72
Speciale betekenis aangeven 72
Klemtoon leggen met
73
Nadruk leggen met <strong> 73
Aanvullende informatie is <small> 73
Ongeldig maken met <s> 73
Verwijzing naar boek of film: <cite> en <q> 73
Afkortingen en definities: <abbr> en <dfn> 74
Programmacode en dergelijke: <code>, <samp> en <kbd> 75
Subscript en superscript: <sub> en <sup> 75
Tekst markeren met <mark> 75
Het containerelement <span> 76
Toegevoegd of verwijderd: <ins> en <del> 76
Inhoud groeperen 76
<address> 76
<main> 77
Vooraf opgemaakte inhoud: <pre> 78
Citaten gebruiken: <blockquote> 79
Lijsten maken: <ol>, <ul> en <li> 79
Illustraties en bijschriften: <figure> en <figcaption> 84
FAQ, metadata en definities: <dl>, <dt>, <dd> 88
Nieuw thema markeren: <hr> 89
Het laatste redmiddel: <div> 90
Speciale tekens in webpagina’s 90
Van ASCII naar UTF-8 91
Referenties gebruiken 92
Samenvatting 92
Oefeningen 93
4. Koppelingen maken 95
Inleiding 96
Verbindingen leggen met <a> 97
Attributen van <a> 98
Bladwijzers maken 101
Link naar een grote foto 102
Link naar het vervolg van een artikel 103
Link naar een e-mailadres 104
Link naar een telefoonnummer 104
Een pdf-bestand weergeven of downloaden 105
Klik hier voor richtlijnen 105
Externe bestanden koppelen met <link> 108
Stylesheet koppelen 108
Een favicon gebruiken 109
Opeenvolgende pagina’s 110
Vooraf laden: prefetch, preload, prerender en dns-prefetch 111
Knoppen en hyperlinks 113
Samenvatting 114
Oefeningen 114
5. Beeld, geluid en andere externe inhoud 115
Inleiding 116
URL’s en structuur van de website 116
Lokale site 118
Soorten afbeeldingen 119
Bitmaps 119
Vectorafbeeldingen: SVG 120
Bestandsformaten voor bitmaps 122
GIF 122
JPEG 123
PNG 124
WebP 125
De juiste afbeelding voor het scherm 125
Afbeeldingen plaatsen met <img> 126
De bron: src 127
Beschrijvende tekst: alt 127
Afmetingen: width en height 128
Klikbare gebieden: usemap 129
Responsive images 130
Srcset voor schermen met hoge resolutie 130
Srcset voor variabele afmetingen 131
Bijgesneden afbeeldingen: <picture> 133
Het type afbeelding selecteren 134
Het verschil tussen <img> en <picture> 134
Externe HTML-inhoud: <iframe> 135
Attributen van <iframe> 135
Beveiliging 137
Insluiten met <embed> of <object> 138
Video in een webpagina 138
Bestandstypen voor video 139
Een codec kiezen 139
Video coderen 140
Het element <video> 140
De bron: <source> 141
Ondertiteling met <track> 142
Titelbestanden: WebVTT 144
Audio op de website gebruiken 145
Samenvatting 146
Oefeningen 147
6. Formulieren maken 149
De rol van formulieren 150
Formulieren aan de clientkant 150
De rol van de webserver 151
Een compleet formulier 152
De basis van een formulier: <form> 156
Buiten <form> mag ook 156
De verwerking: action 156
Verzendwijze: method 156
Codering: enctype 157
Automatisch aanvullen: autocomplete 157
Niet valideren: novalidate 158
Direct invoeren: autofocus 159
De naam: name 159
Het doel: target 159
Buitenspelelementen: form 159
Labels bij invoervelden 161
De tabvolgorde 162
Het element <input> 162
Attributen van <input> 163
Soorten invoer: het attribuut type 170
Telefoonnummers: type="tel" 170
E-mailadressen: type="email" 171
Webadressen: type="url" 171
Wachtwoorden: type="password" 171
Getallen: type="number" 172
Een bereik: type="range" 172
Kleuren: type="color" 173
Datum en tijd 174
Selectievakjes: type="checkbox" 175
Keuzerondjes: type="radio" 176
Bestanden uploaden: <type="file"> 178
Verzendknop: type="submit" 178
Resetknop: type="reset" 179
Afbeeldingknop: type="image" 179
Functieloze knop: type="button" 180
Verborgen waarden: type="hidden" 180
Het element <button> 180
Kiezen uit een lijst: <select>, <datalist>, <option> 181
<option> 182
<select> 183
<datalist> 184
Uitgebreide tekstinvoer: <textarea> 186
Groeperen met <fieldset> en <legend> 186
Voortgang tonen: <progress> 189
Schaal: <meter> 190
Resultaat: <output> 191
Samenvatting 192
Oefeningen 193
7. Tabellen maken 195
Inleiding 196
De structuur van een HTML-tabel 196
De basis: <table> 198
Rijen en kolommen: <tr> en <td> 198
Koptekst:<thead> 199
Een bijschrift: <caption> 200
Overige elementen 201
De tabelinhoud: <tbody> 201
Voettekst: <tfoot> 201
Kolomgroepen: <colgroup> en <col> 202
Voorbeelden van tabellen 203
Samenvatting 206
Oefeningen 207
8. De basis van CSS 209
Wat CSS is 210
Voorgeschiedenis 210
En toen was er CSS3 211
CSS3 is gewoon CSS 211
Waarom CSS zo handig is 213
De taal CSS 213
Waarden en eenheden 215
Globale waarden 217
Lengte 217
De pixel 217
De eenheid em 218
De makkelijke em: rem 218
Handig voor tekstvakken: ch 219
Eenheden gebaseerd op de viewport 219
Overige eenheden 220
Samenvatting afmetingen 220
CSS-verwerking door de browser 221
De boomstructuur 221
Waarden toewijzen 222
De cascade 223
Specificiteit berekenen 224
Overerving 226
Percentages werken door 227
De plaats van de CSS-declaraties 228
Het attribuut style 229
Het element <style> 229
Extern bestand: <link> 230
Het CSS-bestand 231
Commentaar toevoegen 231
Indeling van CSS-bestanden 232
Andere stijlbladen importen 232
De ingebouwde stijlen aanpassen 232
Elementen benaderen met selectors 234
Elementnaam, klasse of beide? 235
Elementnamen en selectors 235
Klassen 237
Van alles wat 238
En de winnaar is... 239
Basisselectors 239
Typeselector 240
Universele selector * 240
Klasseselector 242
ID-selector 243
Attribuutselectors 243
Pseudoklassen 244
Pseudo-elementen 248
Pseudo-elementen level 4 250
Combinatieselectors: afstamming, kind en sibling 251
Geen combinator: komma 251
Algemene afstamming: spatie 251
Kindselector 252
Aangrenzend: + 252
Op hetzelfde niveau: ~ 252
Best practices 253
Samenvatting 254
Oefeningen 255
9. Lay-out: boxmodel en weergavemodel 257
De opbouw van pagina’s 258
Browserstijlen zijn er niet voor niets 258
Het boxmodel 259
De eigenschap box-sizing 260
Waarden voor breedte en hoogte 263
Begrensde breedte en hoogte 264
Marges 265
Horizontaal centreren 265
Verticaal centreren 266
Negatieve marge 267
Samengevoegde marges 267
Padding 268
Randen 269
Randdikte 269
Randkleur 269
Transparante rand 270
Randstijl 271
Korte notatie voor randen 272
Overlopende inhoud: overflow 273
Overloop van de scrol 275
De toekomst: logische eigenschappen 276
Breedte en hoogte 277
Het einde van top, bottom, left, right? 277
Wat is het nut? 278
Praktische beperking 279
De toekomst: box alignment 279
Weergavemodel 280
Achter de schermen 281
De eigenschap display 281
Waarden voor binnen en buiten 281
Inhoud (niet) weergeven: visibility 285
Niet verbergen voor screenreaders 285
Samenvatting 286
Oefeningen 287
10. Lay-outs maken met CSS 289
Inleiding 290
Responsive design 290
Media queries 291
Schermresolutie 294
Portret of landschap 294
Beeldverhouding 295
Weergave op mobiele schermen: de metatag viewport 295
CSS-pixels en hardwarepixels (device pixels) 297
Lay-out: positionering 297
Het omvattende blok 297
Positioneringsschema’s 298
De eigenschap position 298
Verschuiven met top, right, bottom en left 299
Verschuiven met logische waarden 299
Position: static 299
Position: relative 299
Position: absolute 300
Position: fixed 302
Position: sticky 303
Float en clear 305
Float als hulpmiddel voor lay-outs 307
Block formatting context 310
Lay-out: multi-column 312
Kolommen instellen 312
Marges worden niet samengevoegd 314
Kolommen overspannen 315
Ruimte tussen de kolommen 316
Lijn tussen de kolommen 317
Kolommen vullen 318
Afbreken in kolommen 318
Wanneer multi-column (niet) nuttig is 321
Toepassing: bol.com 322
Toepassing: portfolio 324
Lay-out in een raster: gridlay-out 326
Kenmerken van gridlay-out 327
Hulpmiddelen voor gridlay-out en flexbox 328
Een raster maken 330
De functie repeat() 331
De eenheid fr 331
Rasteritems plaatsen op lijnnummers 332
Kolommen en rijen samen in grid-area 335
De lijnen een naam geven 336
Items plaatsen in gebieden met een naam 338
Afmetingen van tracks instellen 340
Ruimte tussen tracks 341
Het raster zichzelf laten bouwen 342
Het verschil tussen auto-fill en auto-fit 345
Van richting veranderen met grid-auto-flow 345
De gaten in het raster opvullen 346
Uitlijnen in gridlay-out 348
Toepassing: nos.nl 350
Lay-out: flexbox 359
Kenmerken van flexbox 359
Het assenstelsel van flexbox 359
Flex-direction 360
Flex-wrap 361
Flex-flow 362
Flexcontainers en flexitems 362
Items flexibel maken met de eigenschap flex 363
Instellingen voor flex 364
Samenvatting: het formaat van flexitems 365
Items uitlijnen met automarge 366
Uitlijnen op de hoofdas: justify-content 367
Uitlijnen op de kruisas: align-self 369
Regels uitlijnen: align-content 370
Toepassing: navigatiebalk 371
Toepassing: kaarten 374
Toepassing: nos.nl 378
Samenvatting 380
Oefeningen 381
11. Tekst en typografie 385
Inleiding 386
Lettertype: van systeem of online? 386
Web fonts 387
Lettertypen downloaden: @font-face 389
Eigenschappen van @font-face 390
Een embedcode gebruiken 393
Eigenschappen voor lettertype: font 395
Lettertype 395
Lettergrootte: waarden en overwegingen 396
Geavanceerd: responsieve tekst 397
Toepassing van font-size 398
Grootte aanpassen: font-size-adjust 399
Regelhoogte: line-height 399
Letterstijl: font-style 401
Lettergewicht: font-weight 401
De verzameleigenschap font 402
Uitrekken of indrukken: font-stretch 403
Kleinkapitaal: font-variant 404
Eigenschappen voor tekst 405
Uitlijnen: text-align en text-align-last 405
Lijneffecten op tekst 405
Inspringen 407
Rechtopstaande tekst: text-orientation 408
Overlopende tekst: text-overflow 409
Tekst met schaduw 409
Tekst omzetten: text-transform 411
Witruimte behouden: white-space 411
Ruimte tussen woorden en letters 412
Afbreken: word-break en overflow-wrap 413
Opmaak van lijsten 414
Opsommingstekens 415
Lijst als navigatie 416
Samenvatting 422
Oefeningen 423
12. Kleur, randen en achtergronden 425
Inleiding 426
Kleurwaarden 426
RGB en RGBA 427
HSL en HSLA 428
Transparantie 430
Kleur van tekst 430
De achtergrond 431
Achtergrondkleur 431
Achtergrondafbeelding 431
background-image 432
background-repeat 432
background-attachment 433
background-position 433
background-clip 435
background-origin 436
background-size 437
background 438
Verschillende achtergrondafbeeldingen 439
Kleurverloop als achtergrond 440
Kleurverlopen 441
Lineair verloop 441
Radiaal verloop 443
Repeterende verlopen 444
Afgeronde hoeken 445
Randafbeelding 447
border-image-source 448
border-image-slice 448
border-image-width 448
border-image-outset 449
border-image-repeat 449
Voorbeeld van een randafbeelding 449
Schaduw 450
De werking van schaduw 451
Material design 452
Afbeeldingen uitsnijden met clip-path 453
Toepassing: header met schuine kanten 456
Beeldfilters 458
Kleuren mengen 458
Isolation 460
Samenvatting 460
Oefeningen 461
13. Overgangen en animaties, calc(), attr() en CSS-variabelen 463
Beweging in webpagina’s 464
Overgangen (transitions) 464
Kant-en-klare overgangen 467
Positie aanpassen 467
Animatie 469
Opbouw een animatie 469
Keyframes 471
Transformatie 473
Tweedimensionale transformaties 474
Schalend menu 476
Driedimensionale transformaties 478
Perspectief 479
Kijkrichting 480
3D-ruimte 480
Rekenen met calc() 484
Voorbeelden 485
CSS-variabelen: de functie var() 485
Kenmerken van variabelen 486
Variabelen declareren 487
Toepassingen van variabelen 487
Attributen uitlezen met attr() 489
All reset alles, behalve variabelen 491
Samenvatting 491
Oefeningen 492
