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
47
47
48
48
48<br />
<link> 49<br />
<body> 49<br />
Paginastructuur 50<br />
Document Object Model – HTML DOM 50<br />
Het contentmodel van HTML 5 51<br />
Secties markeren 54<br />
<article> (sectioning content) 55<br />
<section> (sectioning content) 56<br />
<nav> (sectioning content) 57<br />
<aside> (sectioning content) 58<br />
Koppen: <h1> t/m <h6> 59<br />
<header> (flow content) 60<br />
<footer> (flow content) 61<br />
Samenvatting 63<br />
Oefeningen 63<br />
<br />
3. Tekst markeren 65<br />
Inleiding 66<br />
Koppen in HTML-documenten 66<br />
Het getal bepaalt de keus, niet de tekstgrootte 66<br />
Titel website is niet automatisch <h1> 67<br />
Koppen markeren 67<br />
Koppen in een header 68<br />
Alineatekst markeren 69<br />
Alinea’s: het element <p> 70<br />
Het regeleinde <br> 71<br />
Afbreken van woorden 72<br />
Speciale betekenis aangeven 72<br />
Klemtoon leggen met <em> 73<br />
Nadruk leggen met <strong> 73<br />
Aanvullende informatie is <small> 73<br />
Ongeldig maken met <s> 73<br />
Verwijzing naar boek of film: <cite> en <q> 73<br />
Afkortingen en definities: <abbr> en <dfn> 74<br />
Programmacode en dergelijke: <code>, <samp> en <kbd> 75<br />
Subscript en superscript: <sub> en <sup> 75<br />
Tekst markeren met <mark> 75<br />
Het containerelement <span> 76<br />
Toegevoegd of verwijderd: <ins> en <del> 76<br />
Inhoud groeperen 76<br />
<address> 76<br />
<main> 77<br />
Vooraf opgemaakte inhoud: <pre> 78<br />
Citaten gebruiken: <blockquote> 79<br />
Lijsten maken: <ol>, <ul> en <li> 79<br />
Illustraties en bijschriften: <figure> en <figcaption> 84<br />
FAQ, metadata en definities: <dl>, <dt>, <dd> 88<br />
Nieuw thema markeren: <hr> 89<br />
Het laatste redmiddel: <div> 90<br />
Speciale tekens in webpagina’s 90<br />
Van ASCII naar UTF-8 91<br />
Referenties gebruiken 92<br />
Samenvatting 92<br />
Oefeningen 93<br />
<br />
4. Koppelingen maken 95<br />
Inleiding 96<br />
Verbindingen leggen met <a> 97<br />
Attributen van <a> 98<br />
Bladwijzers maken 101<br />
Link naar een grote foto 102<br />
Link naar het vervolg van een artikel 103<br />
Link naar een e-mailadres 104<br />
Link naar een telefoonnummer 104<br />
Een pdf-bestand weergeven of downloaden 105<br />
Klik hier voor richtlijnen 105<br />
Externe bestanden koppelen met <link> 108<br />
Stylesheet koppelen 108<br />
Een favicon gebruiken 109<br />
Opeenvolgende pagina’s 110<br />
Vooraf laden: prefetch, preload, prerender en dns-prefetch 111<br />
Knoppen en hyperlinks 113<br />
Samenvatting 114<br />
Oefeningen 114<br />
<br />
5. Beeld, geluid en andere externe inhoud 115<br />
Inleiding 116<br />
URL’s en structuur van de website 116<br />
Lokale site 118<br />
Soorten afbeeldingen 119<br />
Bitmaps 119<br />
Vectorafbeeldingen: SVG 120<br />
Bestandsformaten voor bitmaps 122<br />
GIF 122<br />
JPEG 123<br />
PNG 124<br />
WebP 125<br />
De juiste afbeelding voor het scherm 125<br />
Afbeeldingen plaatsen met <img> 126<br />
De bron: src 127<br />
Beschrijvende tekst: alt 127<br />
Afmetingen: width en height 128<br />
Klikbare gebieden: usemap 129<br />
Responsive images 130<br />
Srcset voor schermen met hoge resolutie 130<br />
Srcset voor variabele afmetingen 131<br />
Bijgesneden afbeeldingen: <picture> 133<br />
Het type afbeelding selecteren 134<br />
Het verschil tussen <img> en <picture> 134<br />
Externe HTML-inhoud: <iframe> 135<br />
Attributen van <iframe> 135<br />
Beveiliging 137<br />
Insluiten met <embed> of <object> 138<br />
Video in een webpagina 138<br />
Bestandstypen voor video 139<br />
Een codec kiezen 139<br />
Video coderen 140<br />
Het element <video> 140<br />
De bron: <source> 141<br />
Ondertiteling met <track> 142<br />
Titelbestanden: WebVTT 144<br />
Audio op de website gebruiken 145<br />
Samenvatting 146<br />
Oefeningen 147<br />
<br />
6. Formulieren maken 149<br />
De rol van formulieren 150<br />
Formulieren aan de clientkant 150<br />
De rol van de webserver 151<br />
Een compleet formulier 152<br />
De basis van een formulier: <form> 156<br />
Buiten <form> mag ook 156<br />
De verwerking: action 156<br />
Verzendwijze: method 156<br />
Codering: enctype 157<br />
Automatisch aanvullen: autocomplete 157<br />
Niet valideren: novalidate 158<br />
Direct invoeren: autofocus 159<br />
De naam: name 159<br />
Het doel: target 159<br />
Buitenspelelementen: form 159<br />
Labels bij invoervelden 161<br />
De tabvolgorde 162<br />
Het element <input> 162<br />
Attributen van <input> 163<br />
Soorten invoer: het attribuut type 170<br />
Telefoonnummers: type="tel" 170<br />
E-mailadressen: type="email" 171<br />
Webadressen: type="url" 171<br />
Wachtwoorden: type="password" 171<br />
Getallen: type="number" 172<br />
Een bereik: type="range" 172<br />
Kleuren: type="color" 173<br />
Datum en tijd 174<br />
Selectievakjes: type="checkbox" 175<br />
Keuzerondjes: type="radio" 176<br />
Bestanden uploaden: <type="file"> 178<br />
Verzendknop: type="submit" 178<br />
Resetknop: type="reset" 179<br />
Afbeeldingknop: type="image" 179<br />
Functieloze knop: type="button" 180<br />
Verborgen waarden: type="hidden" 180<br />
Het element <button> 180<br />
Kiezen uit een lijst: <select>, <datalist>, <option> 181<br />
<option> 182<br />
<select> 183<br />
<datalist> 184<br />
Uitgebreide tekstinvoer: <textarea> 186<br />
Groeperen met <fieldset> en <legend> 186<br />
Voortgang tonen: <progress> 189<br />
Schaal: <meter> 190<br />
Resultaat: <output> 191<br />
Samenvatting 192<br />
Oefeningen 193<br />
<br />
7. Tabellen maken 195<br />
Inleiding 196<br />
De structuur van een HTML-tabel 196<br />
De basis: <table> 198<br />
Rijen en kolommen: <tr> en <td> 198<br />
Koptekst:<thead> 199<br />
Een bijschrift: <caption> 200<br />
Overige elementen 201<br />
De tabelinhoud: <tbody> 201<br />
Voettekst: <tfoot> 201<br />
Kolomgroepen: <colgroup> en <col> 202<br />
Voorbeelden van tabellen 203<br />
Samenvatting 206<br />
Oefeningen 207<br />
<br />
8. De basis van CSS 209<br />
Wat CSS is 210<br />
Voorgeschiedenis 210<br />
En toen was er CSS3 211<br />
CSS3 is gewoon CSS 211<br />
Waarom CSS zo handig is 213<br />
De taal CSS 213<br />
Waarden en eenheden 215<br />
Globale waarden 217<br />
Lengte 217<br />
De pixel 217<br />
De eenheid em 218<br />
De makkelijke em: rem 218<br />
Handig voor tekstvakken: ch 219<br />
Eenheden gebaseerd op de viewport 219<br />
Overige eenheden 220<br />
Samenvatting afmetingen 220<br />
CSS-verwerking door de browser 221<br />
De boomstructuur 221<br />
Waarden toewijzen 222<br />
De cascade 223<br />
Specificiteit berekenen 224<br />
Overerving 226<br />
Percentages werken door 227<br />
De plaats van de CSS-declaraties 228<br />
Het attribuut style 229<br />
Het element <style> 229<br />
Extern bestand: <link> 230<br />
Het CSS-bestand 231<br />
Commentaar toevoegen 231<br />
Indeling van CSS-bestanden 232<br />
Andere stijlbladen importen 232<br />
De ingebouwde stijlen aanpassen 232<br />
Elementen benaderen met selectors 234<br />
Elementnaam, klasse of beide? 235<br />
Elementnamen en selectors 235<br />
Klassen 237<br />
Van alles wat 238<br />
En de winnaar is... 239<br />
Basisselectors 239<br />
Typeselector 240<br />
Universele selector * 240<br />
Klasseselector 242<br />
ID-selector 243<br />
Attribuutselectors 243<br />
Pseudoklassen 244<br />
Pseudo-elementen 248<br />
Pseudo-elementen level 4 250<br />
Combinatieselectors: afstamming, kind en sibling 251<br />
Geen combinator: komma 251<br />
Algemene afstamming: spatie 251<br />
Kindselector 252<br />
Aangrenzend: + 252<br />
Op hetzelfde niveau: ~ 252<br />
Best practices 253<br />
Samenvatting 254<br />
Oefeningen 255<br />
<br />
9. Lay-out: boxmodel en weergavemodel 257<br />
De opbouw van pagina’s 258<br />
Browserstijlen zijn er niet voor niets 258<br />
Het boxmodel 259<br />
De eigenschap box-sizing 260<br />
Waarden voor breedte en hoogte 263<br />
Begrensde breedte en hoogte 264<br />
Marges 265<br />
Horizontaal centreren 265<br />
Verticaal centreren 266<br />
Negatieve marge 267<br />
Samengevoegde marges 267<br />
Padding 268<br />
Randen 269<br />
Randdikte 269<br />
Randkleur 269<br />
Transparante rand 270<br />
Randstijl 271<br />
Korte notatie voor randen 272<br />
Overlopende inhoud: overflow 273<br />
Overloop van de scrol 275<br />
De toekomst: logische eigenschappen 276<br />
Breedte en hoogte 277<br />
Het einde van top, bottom, left, right? 277<br />
Wat is het nut? 278<br />
Praktische beperking 279<br />
De toekomst: box alignment 279<br />
Weergavemodel 280<br />
Achter de schermen 281<br />
De eigenschap display 281<br />
Waarden voor binnen en buiten 281<br />
Inhoud (niet) weergeven: visibility 285<br />
Niet verbergen voor screenreaders 285<br />
Samenvatting 286<br />
Oefeningen 287<br />
<br />
10. Lay-outs maken met CSS 289<br />
Inleiding 290<br />
Responsive design 290<br />
Media queries 291<br />
Schermresolutie 294<br />
Portret of landschap 294<br />
Beeldverhouding 295<br />
Weergave op mobiele schermen: de metatag viewport 295<br />
CSS-pixels en hardwarepixels (device pixels) 297<br />
Lay-out: positionering 297<br />
Het omvattende blok 297<br />
Positioneringsschema’s 298<br />
De eigenschap position 298<br />
Verschuiven met top, right, bottom en left 299<br />
Verschuiven met logische waarden 299<br />
Position: static 299<br />
Position: relative 299<br />
Position: absolute 300<br />
Position: fixed 302<br />
Position: sticky 303<br />
Float en clear 305<br />
Float als hulpmiddel voor lay-outs 307<br />
Block formatting context 310<br />
Lay-out: multi-column 312<br />
Kolommen instellen 312<br />
Marges worden niet samengevoegd 314<br />
Kolommen overspannen 315<br />
Ruimte tussen de kolommen 316<br />
Lijn tussen de kolommen 317<br />
Kolommen vullen 318<br />
Afbreken in kolommen 318<br />
Wanneer multi-column (niet) nuttig is 321<br />
Toepassing: bol.com 322<br />
Toepassing: portfolio 324<br />
Lay-out in een raster: gridlay-out 326<br />
Kenmerken van gridlay-out 327<br />
Hulpmiddelen voor gridlay-out en flexbox 328<br />
Een raster maken 330<br />
De functie repeat() 331<br />
De eenheid fr 331<br />
Rasteritems plaatsen op lijnnummers 332<br />
Kolommen en rijen samen in grid-area 335<br />
De lijnen een naam geven 336<br />
Items plaatsen in gebieden met een naam 338<br />
Afmetingen van tracks instellen 340<br />
Ruimte tussen tracks 341<br />
Het raster zichzelf laten bouwen 342<br />
Het verschil tussen auto-fill en auto-fit 345<br />
Van richting veranderen met grid-auto-flow 345<br />
De gaten in het raster opvullen 346<br />
Uitlijnen in gridlay-out 348<br />
Toepassing: nos.nl 350<br />
Lay-out: flexbox 359<br />
Kenmerken van flexbox 359<br />
Het assenstelsel van flexbox 359<br />
Flex-direction 360<br />
Flex-wrap 361<br />
Flex-flow 362<br />
Flexcontainers en flexitems 362<br />
Items flexibel maken met de eigenschap flex 363<br />
Instellingen voor flex 364<br />
Samenvatting: het formaat van flexitems 365<br />
Items uitlijnen met automarge 366<br />
Uitlijnen op de hoofdas: justify-content 367<br />
Uitlijnen op de kruisas: align-self 369<br />
Regels uitlijnen: align-content 370<br />
Toepassing: navigatiebalk 371<br />
Toepassing: kaarten 374<br />
Toepassing: nos.nl 378<br />
Samenvatting 380<br />
Oefeningen 381<br />
<br />
11. Tekst en typografie 385<br />
Inleiding 386<br />
Lettertype: van systeem of online? 386<br />
Web fonts 387<br />
Lettertypen downloaden: @font-face 389<br />
Eigenschappen van @font-face 390<br />
Een embedcode gebruiken 393<br />
Eigenschappen voor lettertype: font 395<br />
Lettertype 395<br />
Lettergrootte: waarden en overwegingen 396<br />
Geavanceerd: responsieve tekst 397<br />
Toepassing van font-size 398<br />
Grootte aanpassen: font-size-adjust 399<br />
Regelhoogte: line-height 399<br />
Letterstijl: font-style 401<br />
Lettergewicht: font-weight 401<br />
De verzameleigenschap font 402<br />
Uitrekken of indrukken: font-stretch 403<br />
Kleinkapitaal: font-variant 404<br />
Eigenschappen voor tekst 405<br />
Uitlijnen: text-align en text-align-last 405<br />
Lijneffecten op tekst 405<br />
Inspringen 407<br />
Rechtopstaande tekst: text-orientation 408<br />
Overlopende tekst: text-overflow 409<br />
Tekst met schaduw 409<br />
Tekst omzetten: text-transform 411<br />
Witruimte behouden: white-space 411<br />
Ruimte tussen woorden en letters 412<br />
Afbreken: word-break en overflow-wrap 413<br />
Opmaak van lijsten 414<br />
Opsommingstekens 415<br />
Lijst als navigatie 416<br />
Samenvatting 422<br />
Oefeningen 423<br />
<br />
12. Kleur, randen en achtergronden 425<br />
Inleiding 426<br />
Kleurwaarden 426<br />
RGB en RGBA 427<br />
HSL en HSLA 428<br />
Transparantie 430<br />
Kleur van tekst 430<br />
De achtergrond 431<br />
Achtergrondkleur 431<br />
Achtergrondafbeelding 431<br />
background-image 432<br />
background-repeat 432<br />
background-attachment 433<br />
background-position 433<br />
background-clip 435<br />
background-origin 436<br />
background-size 437<br />
background 438<br />
Verschillende achtergrondafbeeldingen 439<br />
Kleurverloop als achtergrond 440<br />
Kleurverlopen 441<br />
Lineair verloop 441<br />
Radiaal verloop 443<br />
Repeterende verlopen 444<br />
Afgeronde hoeken 445<br />
Randafbeelding 447<br />
border-image-source 448<br />
border-image-slice 448<br />
border-image-width 448<br />
border-image-outset 449<br />
border-image-repeat 449<br />
Voorbeeld van een randafbeelding 449<br />
Schaduw 450<br />
De werking van schaduw 451<br />
Material design 452<br />
Afbeeldingen uitsnijden met clip-path 453<br />
Toepassing: header met schuine kanten 456<br />
Beeldfilters 458<br />
Kleuren mengen 458<br />
Isolation 460<br />
Samenvatting 460<br />
Oefeningen 461<br />
<br />
13. Overgangen en animaties, calc(), attr() en CSS-variabelen 463<br />
Beweging in webpagina’s 464<br />
Overgangen (transitions) 464<br />
Kant-en-klare overgangen 467<br />
Positie aanpassen 467<br />
Animatie 469<br />
Opbouw een animatie 469<br />
Keyframes 471<br />
Transformatie 473<br />
Tweedimensionale transformaties 474<br />
Schalend menu 476<br />
Driedimensionale transformaties 478<br />
Perspectief 479<br />
Kijkrichting 480<br />
3D-ruimte 480<br />
Rekenen met calc() 484<br />
Voorbeelden 485<br />
CSS-variabelen: de functie var() 485<br />
Kenmerken van variabelen 486<br />
Variabelen declareren 487<br />
Toepassingen van variabelen 487<br />
Attributen uitlezen met attr() 489<br />
All reset alles, behalve variabelen 491<br />
Samenvatting 491<br />
Oefeningen 492</div></div>
</div>
</div>
<div class="more"><button type="button">Toon meer</button></div>
</div>
</div>
<div class="-info-kolommen-links">
<div class="recommendations">
<h3 class="-underline -smaller">Mensen die dit boek kochten, kochten ook...</h3>
<div class="lambert -overige-boeken -wrap-3">
<ul><li>
<a href="/boek/9789463561396" class="cover"><img alt="Handboek JavaScript & jQuery" title="Handboek JavaScript & jQuery"
src="https://i.mgtbk.nl/boeken/9789463561396-150.jpg?_=ebxQVn%2B0"
srcset="https://i.mgtbk.nl/boeken/9789463561396-150.jpg?_=ebxQVn%2B0 1x, https://i.mgtbk.nl/boeken/9789463561396-300.jpg?_=ebxQVn%2B0 2x" />
</a>
<div class="auteur">Peter Kassenaar</div>
<div class="titel"><a href="/boek/9789463561396" title="Handboek JavaScript & jQuery">Handboek JavaScript & jQuery</a></div>
<div class="prijs">€ 34,99</div>
</li><li>
<a href="/boek/9789059408364" class="cover"><img alt="Bootstrap 4" title="Bootstrap 4"
src="https://i.mgtbk.nl/boeken/9789059408364-150.jpg?_=DBvAeSwP"
srcset="https://i.mgtbk.nl/boeken/9789059408364-150.jpg?_=DBvAeSwP 1x, https://i.mgtbk.nl/boeken/9789059408364-300.jpg?_=DBvAeSwP 2x" />
</a>
<div class="auteur">Peter Kassenaar</div>
<div class="titel"><a href="/boek/9789059408364" title="Bootstrap 4">Bootstrap 4</a></div>
<div class="prijs">€ 30,99</div>
</li><li>
<a href="/boek/9789059409163" class="cover"><img alt="Handboek HTML5 & CSS3" title="Handboek HTML5 & CSS3"
src="https://i.mgtbk.nl/boeken/9789059409163-150.jpg?_=5D9srfdg"
srcset="https://i.mgtbk.nl/boeken/9789059409163-150.jpg?_=5D9srfdg 1x, https://i.mgtbk.nl/boeken/9789059409163-300.jpg?_=5D9srfdg 2x" />
</a>
<div class="auteur">Peter Doolaard</div>
<div class="titel"><a href="/boek/9789059409163" title="Handboek HTML5 & CSS3">Handboek HTML5 & CSS3</a></div>
<div class="prijs">€ 32,99</div>
</li><li>
<a href="/boek/9780596007126" class="cover"><img alt="Head First Design Patterns" title="Head First Design Patterns"
src="https://i.mgtbk.nl/boeken/9780596007126-150.jpg?_=lwGDE5sn"
srcset="https://i.mgtbk.nl/boeken/9780596007126-150.jpg?_=lwGDE5sn 1x, https://i.mgtbk.nl/boeken/9780596007126-300.jpg?_=lwGDE5sn 2x" />
</a>
<div class="auteur">Eric Freeman</div>
<div class="titel"><a href="/boek/9780596007126" title="Head First Design Patterns">Head First Design Patterns</a></div>
<div class="prijs">€ 71,80</div>
</li><li>
<a href="/boek/9789463560320" class="cover"><img alt="Adobe InDesign CC 2018 Tips, trucs en technieken" title="Adobe InDesign CC 2018 Tips, trucs en technieken"
src="https://i.mgtbk.nl/boeken/9789463560320-150.jpg?_=vxrXNYBI"
srcset="https://i.mgtbk.nl/boeken/9789463560320-150.jpg?_=vxrXNYBI 1x, https://i.mgtbk.nl/boeken/9789463560320-300.jpg?_=vxrXNYBI 2x" />
</a>
<div class="auteur">Jan Ris</div>
<div class="titel"><a href="/boek/9789463560320" title="Adobe InDesign CC 2018 Tips, trucs en technieken">Adobe InDesign CC 2018 Tips, trucs en technieken</a></div>
<div class="prijs">€ 23,95</div>
</li><li>
<a href="/boek/9789059056930" class="cover"><img alt="Videobewerking met Premiere Elements" title="Videobewerking met Premiere Elements"
src="https://i.mgtbk.nl/boeken/9789059056930-150.jpg?_=P8iHo8cu"
srcset="https://i.mgtbk.nl/boeken/9789059056930-150.jpg?_=P8iHo8cu 1x, https://i.mgtbk.nl/boeken/9789059056930-300.jpg?_=P8iHo8cu 2x" />
</a>
<div class="auteur">Studio Visual Steps</div>
<div class="titel"><a href="/boek/9789059056930" title="Videobewerking met Premiere Elements">Videobewerking met Premiere Elements</a></div>
<div class="prijs">€ 24,99</div>
</li></ul>
</div>
</div>
</div>
</div>
</section>
<section class="infinity-band -gray top5 for-tom">
<div>
<h2>Alle 100 bestsellers</h2>
<div class="tom -top-5">
<div class="swiper-container">
<div class="container swiper-wrapper">
</div>
</div>
</div>
</div>
</section>
<section class="infinity-band orlando">
<div>
<h2>Rubrieken</h2>
<ul>
<li>
<a href="/rubriek/advisering">Advisering <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/algemeen-management">Algemeen management <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/coaching-en-trainen">Coaching en trainen <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/communicatie-en-media">Communicatie en media <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/financieel-management">Financieel management <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/inkoop-en-logistiek">Inkoop en logistiek <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/internet-en-social-media">Internet en social media <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/it-management-ict">IT-management / ICT <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/juridisch">Juridisch <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/leiderschap">Leiderschap <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/marketing">Marketing <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/non-profit">Non-profit <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/ondernemen">Ondernemen <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/organisatiekunde">Organisatiekunde <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/personal-finance">Personal finance <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/personeelsmanagement">Personeelsmanagement <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/persoonlijke-effectiviteit">Persoonlijke effectiviteit <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/projectmanagement">Projectmanagement <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/psychologie">Psychologie <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/reclame-en-verkoop">Reclame en verkoop <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/strategisch-management">Strategisch management <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/verandermanagement">Verandermanagement <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
<li>
<a href="/rubriek/werk-en-loopbaan">Werk en loopbaan <svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</li>
</ul>
</div>
</section>
<!-- Panel voor promos -->
<div class="promo-details">
<div class="promo-overlay -js-promo-overlay"></div>
<div class="container">
</div>
</div>
</main>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Book",
"@id": "https://www.managementboek.nl/#9789463560818",
"image": {
"url": "https://i.mgtbk.nl/boeken/9789463560818-250.jpg",
"@type": "ImageObject"
},
"name": "Handboek HTML5 en CSS3, 5e editie",
"description": "Van alle technieken voor het maken van webpagina\u2019s en webapps zijn HTML en CSS de belangrijkste. Zonder HTML geen webpagina\u2019s en zonder CSS blijft het een kale boel.",
"numberOfPages": 524,
"inLanguage": "NL",
"publisher": {
"name": "Van Duuren Media",
"url": "https://www.managementboek.nl/uitgever/1655",
"@type": "Brand"
},
"author": {
"@type": "Person",
"name": "Peter Doolaard"
},
"workExample": {
"isbn": "9789463560818",
"bookFormat": "http://schema.org/Paperback",
"name": "Handboek HTML5 en CSS3, 5e editie",
"@id": "https://www.managementboek.nl/#9789463560818",
"datePublished": "2019-04-29T00:00:00+02:00",
"url": "https://www.managementboek.nl/boek/9789463560818",
"potentialAction": {
"@type": "ReadAction",
"target": {
"urlTemplate": "https://www.managementboek.nl/winkelwagen?bestel=9789463560818",
"actionPlatform": [
"http://schema.org/DesktopWebPlatform",
"http://schema.org/MobileWebPlatform"
],
"@type": "EntryPoint"
},
"expectsAcceptanceOf": {
"price": 39.99,
"priceCurrency": "EUR",
"itemCondition": "http://schema.org/NewCondition",
"availability": "InStock",
"@type": "Offer"
}
}
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "5.0",
"ratingCount": 1
}
}
</script>
<footer class="page-footer">
<div class='footertop'>
<i class="_hide-mobile">Op werkdagen voor 23:00 besteld, morgen in huis</i>
<svg class="truck"><use xlink:href="#delivery-truck"/></svg>
<i>Gratis verzending vanaf €20</i>
</div>
<div class="klantenservice">
<div class="container">
<div class="links">
<h3>
<a href="/klantenservice/contact">
Klantenservice
<svg class="arrow-right"><use xlink:href="#arrow-right"/></svg></a></h3>
<nav>
<a href="/klantenservice/contact">Contact</a>
<a href="/klantenservice/juridisch/algemene_voorwaarden">Voorwaarden</a>
<a href="/klantenservice/bestellen/mijn-account">Bestellen en retourneren</a>
<a href="/klantenservice/e-books/faq">Lezen en luisteren</a>
<a href="/klantenservice/auteurs/auteurs">Voor auteurs</a>
<a href="/klantenservice/partners/partnerprogramma">Partnerprogramma</a>
</nav>
</div>
<div class="links">
<h3>
<a href="/klantenservice/zakelijk">
Zakelijk
<svg class="arrow-right"><use xlink:href="#arrow-right"/></svg>
</a>
</h3>
<nav>
<a href="/klantenservice/zakelijk">Zakelijke diensten</a>
<a href="/klantenservice/partners/partnerprogramma">Partnerprogramma</a>
<a href="/klantenservice/bestellen/cadeaubonnen">Cadeaubonnen</a>
</nav>
</div>
<div class="nieuwsbrief">
<div class="container">
<h3>Altijd op de hoogte</h3>
<span>Schrijf u in voor onze nieuwsbrief en blijf up-to-date met relevante interviews en recensies, inspirerende events en de beste acties.</span>
<form>
<div class="nb-input-container">
<div class="input-text-container -x text-nieuwsbrief-signup">
<div class="container">
<input id="nieuwsbrief-signup" name="Uw e-mailadres" value="" type="text" data-message="" autocomplete="" class="" placeholder="uw@emailadres.nl" />
<label for="nieuwsbrief-signup"></label>
<span class="input-text-border"></span>
<span class="icon-valid"></span>
<span class="icon-reset"></span>
<span class="icon-saving"></span>
<span class="input-text-message"></span>
</div>
</div>
</div>
<div class="nb-button-container"><button id="submit-signup" class="butters -blue -ripple -disabled">Aanmelden</button></div>
</form>
</div>
</div>
</div>
</div>
<div class="footerbottom">
<svg class="boek"><use xlink:href="#boek"/></svg>
<div class="meer">
Meer dan alleen managementboeken
</div>
<div class="kleinelettertjes">
<a href="https://www.thuiswinkel.org/leden/managementboek.nl/certificaat">
<svg class="tw"><use xlink:href="#tw"/></svg>
Thuiswinkel waarborg
</a>
<a href="/klantenservice/juridisch/algemene_voorwaarden">Algemene voorwaarden</a>
<a href="/klantenservice/juridisch/privacy">Privacy</a>
<a href="/klantenservice/juridisch/cookies">Cookies</a>
<a href="/klantenservice/contact">Service & Contact</a>
</div>
<div class="social">
<a href="https://www.facebook.com/managementboek"><svg class=""><use xlink:href="#social-facebook"/></svg></a>
<a href="https://www.twitter.com/mgtboeknl"><svg class=""><use xlink:href="#social-twitter"/></svg></a>
<a href="https://www.linkedin.com/groups/159078"><svg class=""><use xlink:href="#social-linkedin"/></svg></a>
<a href="https://www.youtube.com/user/Managementboeknl"><svg class=""><use xlink:href="#social-youtube"/></svg></a>
<a href="https://www.instagram.com/mgtboeknl"><svg class=""><use xlink:href="#social-instagram"/></svg></a>
</div>
<div class="copyright">
© 2020 Mainpress BV
</div>
</div>
</footer>
</div>
<!-- END MAIN -->
<section class="search-overlay">
<div class="bar">
<div class="searchbar-hero">
<div class="container">
<input type="text" id="q" placeholder="Wat zoekt u?" autocomplete="off"/>
<button></button>
<span class="close -js-close"></span>
<span class="search-text-border"></span>
</div>
</div>
</div>
<div class="results">
<div class="result-columns">
<div>
<section class="producten">
<h3>Populaire producten</h3>
<ul></ul>
</section>
</div>
<div>
<section class="personen">
<h3>Personen</h3>
<ul></ul>
</section>
<section class="trefwoorden">
<h3>Trefwoorden</h3>
<ul></ul>
</section>
</div>
</div>
</div>
</section>
<section class="accountmenu-overlay"></section>
<div id="panels">
<div class='mobile-panel -left -roger' id="roger-contents">
<div class="overlay"></div>
<div class="container">
<div class="header -js-panel-close" rel="roger-contents">
<a class="close -js-panel-close" rel="roger-contents"><svg class="close"><use xlink:href="#solid-arrow-left"/></svg></a>
<h3>Handboek HTML5 en CSS3, 5e editie</h3>
<div class="cover" style="background-image: url(https://i.mgtbk.nl/boeken/9789463560818-920x960.jpg);">
</div>
</div>
<div class="roger-body">
</div>
</div>
</div>
<div class="pdf-viewer">
<div class="overlay"></div>
<div class="app">
<div class="-left"></div>
<div class="-container">
<div class="-top"><div class="-cover" style="background-image: url(https://i.mgtbk.nl/boeken/9789463560818-150.jpg?_=Zf%2FvQhQo)"></div>
<div class="-info">
<div class="-titel">Handboek HTML5 en CSS3, 5e editie</div>
<div class="-auteur">
Peter Doolaard
</div>
</div>
<div class="close">
<svg class="close"></svg>
</div>
</div>
<div class="-button-left pager" data-action="prev">
<svg viewBox="0 0 32 32"><use xlink:href="#chevron-right" /></svg>
</div>
<div class="-viewport-container">
<div class="-viewport" role="main"></div>
</div>
<div class="-button-right pager" data-action="next">
<svg viewBox="0 0 32 32"><use xlink:href="#chevron-right" /></svg>
</div>
<div class="-bottom">
<div class="-plus"><span></span></div>
<div class="-minus"><span></span></div>
<div class="-pages">
<div class="-loaded">
<span class="-pdf-current"></span>
/
<span class="-pdf-max"></span>
</div>
<div class="-loading">
<span></span>
<i class="-loading-progress"></i>
</div>
</div>
</div>
</div>
<div class="-right"></div>
</div>
<!-- <div class="toolbar" role="toolbar">
<div class="pager">
<button class="icon-left" data-pager="prev"></button>
<button class="icon-right" data-pager="next"></button>
<button class="icon-fs -js-fullscreen"></button>
</div>
</div>
<div class="viewport-container">
</div> -->
</div>
</div>
</div>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name" : "Managementboek.nl",
"url": "https://www.managementboek.nl",
"logo": "https://i.mgtbk.nl/overig/Logo_Managementboek_pos.jpg",
"sameAs" : [
"https://www.facebook.com/managementboek",
"https://www.twitter.com/mgtboeknl",
"https://www.linkedin.com/groups/159078",
"https://www.youtube.com/user/Managementboeknl"
],
"contactPoint" : [{
"@type" : "ContactPoint",
"telephone" : "+31-10-4731397",
"contactType" : "customer service"
}]
}
</script>
</body>
</html>
