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">
<h3 class="-underline -smaller">Aanbevolen live events...</h3>
<div class="-gekoppelde-events -side">
<ul>
<li class="-event">
<div class="-bindwijze"></div>
<div class="-titel">Van winst naar waarde</div>
<div class="-cover">
<a href="/boek/9797090133756">
<div class="cover" style="background-image: url(https://i.mgtbk.nl/events/header/9797090133756_breed.jpg)"></div>
<div class="datum">
<span>10</span>
<span>DEC</span>
</div>
</a>
</div>
</li>
</ul>
</div>
<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 class="-lazy" alt="Handboek JavaScript & jQuery" title="Handboek JavaScript & jQuery"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-src="https://i.mgtbk.nl/boeken/9789463561396-90.jpg?_=ebxQVn%2B0"
data-srcset="https://i.mgtbk.nl/boeken/9789463561396-90.jpg?_=ebxQVn%2B0 1x, https://i.mgtbk.nl/boeken/9789463561396-180.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 class="-lazy" alt="Bootstrap 4" title="Bootstrap 4"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-src="https://i.mgtbk.nl/boeken/9789059408364-90.jpg?_=DBvAeSwP"
data-srcset="https://i.mgtbk.nl/boeken/9789059408364-90.jpg?_=DBvAeSwP 1x, https://i.mgtbk.nl/boeken/9789059408364-180.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/9789463560320" class="cover"><img class="-lazy" alt="Adobe InDesign CC 2018 Tips, trucs en technieken" title="Adobe InDesign CC 2018 Tips, trucs en technieken"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-src="https://i.mgtbk.nl/boeken/9789463560320-90.jpg?_=vxrXNYBI"
data-srcset="https://i.mgtbk.nl/boeken/9789463560320-90.jpg?_=vxrXNYBI 1x, https://i.mgtbk.nl/boeken/9789463560320-180.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">€ 20,95</div>
</li><li>
<a href="/boek/9781119584704" class="cover"><img class="-lazy" alt="OCP Oracle Certified Professional Java SE 11 Programmer I Study Guide" title="OCP Oracle Certified Professional Java SE 11 Programmer I Study Guide"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-src="https://i.mgtbk.nl/boeken/9781119584704-90.jpg?_=PLF7GtWJ"
data-srcset="https://i.mgtbk.nl/boeken/9781119584704-90.jpg?_=PLF7GtWJ 1x, https://i.mgtbk.nl/boeken/9781119584704-180.jpg?_=PLF7GtWJ 2x" />
</a>
<div class="auteur">Jeanne Boyarsky</div>
<div class="titel"><a href="/boek/9781119584704" title="OCP Oracle Certified Professional Java SE 11 Programmer I Study Guide">OCP Oracle Certified Professional Java SE 11 Programmer I Study Guide</a></div>
<div class="prijs">€ 68,56</div>
</li><li>
<a href="/boek/9789024427765" class="cover"><img class="-lazy" alt="Basisboek sociaal werk" title="Basisboek sociaal werk"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-src="https://i.mgtbk.nl/boeken/9789024427765-90.jpg"
data-srcset="https://i.mgtbk.nl/boeken/9789024427765-90.jpg 1x, https://i.mgtbk.nl/boeken/9789024427765-180.jpg 2x" />
</a>
<div class="auteur">Frans Spierings</div>
<div class="titel"><a href="/boek/9789024427765" title="Basisboek sociaal werk">Basisboek sociaal werk</a></div>
<div class="prijs">€ 44,95</div>
</li><li>
<a href="/boek/9780134665313" class="cover"><img class="-lazy" alt="Adobe Premiere Pro CC Classroom in a Book (2017 release)" title="Adobe Premiere Pro CC Classroom in a Book (2017 release)"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-src="https://i.mgtbk.nl/boeken/9780134665313-90.jpg?_=Utr3s62%2F"
data-srcset="https://i.mgtbk.nl/boeken/9780134665313-90.jpg?_=Utr3s62%2F 1x, https://i.mgtbk.nl/boeken/9780134665313-180.jpg?_=Utr3s62%2F 2x" />
</a>
<div class="auteur">Maxim Jago</div>
<div class="titel"><a href="/boek/9780134665313" title="Adobe Premiere Pro CC Classroom in a Book (2017 release)">Adobe Premiere Pro CC Classroom in a Book (2017 release)</a></div>
<div class="prijs">€ 43,95</div>
</li></ul>
</div>
</div>
</div>
</div>
</section>
<section class="infinity-band -gray top5 for-tom">
<div>
<h2>Managementboek Top 100</h2>
<div class="tom -top-5">
<div class="swiper-container">
<div class="container swiper-wrapper">
</div>
</div>
</div>
<div class="merel"><a href="/managementboek_top_100">Bekijk de volledige Managementboek Top 100</a></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>
<div class="popup-containers">
<div class="overlay -js-popup-overlay"></div>
<div class="cookie-popup popup">
<svg class="close -js-notification-close"><use xlink:href="#times"/></svg>
<h6>Uw cookie-instellingen</h6>
<div class="cookie-popup-content">
Deze website maakt gebruik van verschillende soorten cookies.
Sommige cookies worden geplaatst door diensten van derden die op onze pagina's worden weergegeven.
Om deze externe content te kunnen tonen is nodig dat u toestemming geeft voor het zetten van persoonlijke en marketingcookies.
U kunt uw toestemming op elk moment wijzigen of intrekken.
In onze cookieverklaring vindt u meer informatie.<br />
<br />
<form name="cookie_form" id="cookie_form" method="post">
<input type="checkbox" id="cookie_accept_functional" name="cookie_accept[functional]" checked disabled /> <strong>Functionele cookies</strong> <br/>
Deze zijn noodzakelijk voor de werking van de website, zonder deze cookies kan de website niet naar behoren werken.<br/>
<br />
<input type="checkbox" id="cookie_accept_marketing" name="cookie_accept[marketing]" /> <strong>Persoonlijke en marketingcookies</strong><br/>
Wij gebruiken cookies voor statistieken om bij te houden en rapportages te krijgen over hoe bezoekers de website gebruiken. Zo kunnen wij onze website verbeteren. Marketingcookies worden gebruikt om bezoekers te volgen wanneer ze verschillende websites bezoeken. Hun doel is advertenties weergeven die zijn toegesneden op en relevant zijn voor de individuele gebruiker.<br />
<div class="cookie-buttons">
<button name="cookie_submit" class="butters -lightblue -js-close">Voorkeuren opslaan</button>
</div>
</form>
</div>
</div>
</div>
<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/company/managementboek-nl"><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">
© 2021 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"/>
<div id="q-copy-width"></div>
<button></button>
<span class="empty-searchbar"></span>
<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/company/managementboek-nl",
"https://www.youtube.com/user/Managementboeknl"
],
"contactPoint" : [{
"@type" : "ContactPoint",
"telephone" : "+31-10-4731397",
"contactType" : "customer service"
}]
}
</script>
</body>
</html>
