Voorwoord bij de vierde editie Van alle technieken die komen kijken bij het maken van webpagina’s en webapps zijn HTML en CSS de belangrijkste. Zonder HTML is er sowieso geen webpagina en zonder CSS blijft het een kale boel. Met aanvullende technologieën zoals JavaScript kunnen apps en pagina’s meer functionaliteit krijgen, maar uiteindelijk begint alles bij HTML en CSS. HTML5 is sinds oktober 2014 een W3C Recommendation, wat betekent dat het een webstandaard is. Van ontwikkelaars wordt verwacht dat zij webpagina’s bouwen op deze aanbevolen manier. Van browserfabrikanten wordt verwacht dat hun browser die pagina's op de aanbevolen manier verwerken. Bij CSS ligt het wat ingewikkelder. Het uitgangspunt is nog steeds CSS 2.1, de webstandaard uit 2011. De ontwikkeling van CSS gaat sindsdien verder in modules. Daarin worden afzonderlijke onderdelen uitgewerkt, bijvoorbeeld achtergronden en randen, selectors of flexibele lay-out. Er is heel veel in ontwikkeling, waarvan een deel al in browsers is ingebouwd en een groter deel niet. De veelgebruikte term CSS3 is door deze ontwikkeling meer een verzamelnaam voor ‘alles na CSS 2.1’ dan een afgebakende standaard. De eerste editie van dit boek verscheen in 2011, toen duidelijk was dat HTML5 en CSS3 veel veranderingen zouden brengen, maar nog niet ‘klaar’ waren. Sindsdien blijven de webstandaarden zich ontwikkelen en daarom is er nu de vierde editie, bijgewerkt in de zomer van 2017. De veranderingen zijn opnieuw spectaculair, dankzij de doorbraak van de lay-outtechnieken Flexible Box Layout en CSS Grid Layout en de mogelijkheid om CSS-variabelen te gebruiken. Verder is een hoofdstuk toegevoegd over technieken die in modern webdesign steeds belangrijker worden: transities, animaties en transformaties. Natuurlijk komen nog steeds alle belangrijke basisonderwerpen aan bod, van het goed structureren en markeren van de content met HTML tot de vormgeving met CSS. Bovendien leert u niet alleen dát dingen werken, maar vooral waaróm ze werken. Ik wens u veel plezier bij het leren en bouwen! Peter Doolaard Schoonhoven, juni 2017 reacties@handboek-html-css.nl
vii
Inhoud 1
2
Webtalen, browsers en editors
1
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 Edge (Internet Explorer) Mozilla Firefox Mac OS X: Safari HTML-editors Brackets Aanvullende hulpmiddelen Hulpmiddelen voor validatie Hulpmiddelen voor ontwikkeling Samenvatting Oefeningen
2 2 3 5 7 8 9 9 10 12 13 14 15 16 16 17 19 19 20 26 26
De basis van HTML5
29
Kenmerken van HTML-documenten Elementen, tags en tekst Opbouw van een element Elementen nesten Kleine letters Sluiten in de goede volgorde De HTML-code van webpagina’s bekijken
30 30 32 33 34 34 35
ix
Inhoud
Attributen Kenmerken van attributen Globale attributen Microdata WAI-ARIA Kenmerken van HTML5 Omringende technieken 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 Koppen in HTML-documenten Het getal bepaalt de keus, niet de tekstgrootte Titel website is niet automatisch <h1> Het contentmodel van HTML5 Secties markeren – theorie <article> (sectioning content) <section> (sectioning content) <nav> (sectioning content) <aside> (sectioning content) <header> (flow content) <footer> (flow content) <address> (flow content) <main> (flow content) <div> (flow content) Samenvatting Secties markeren – praktijk Eenvoudige webpagina Productenpresentatie Blog Samenvatting Oefeningen
x
37 37 39 43 44 44 46 48 49 49 50 50 50 51 52 52 52 53 54 54 56 56 57 59 61 62 63 64 65 66 68 69 70 71 71 72 73 76 78 79
Handboek – HTML5 & CSS3
3
4
Tekst markeren
81
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>, <dd> Uitvouwbare tekst: <details> Nieuw thema markeren: <hr> Speciale tekens in webpagina’s Van ASCII naar UTF-8 Referenties gebruiken Samenvatting Oefeningen
82 82 83 85 86 87 87 88 94 94 95 96 101 106 107 107 108 109 110 110 111
Koppelingen maken
113
Inleiding Verbindingen leggen met <a> Attributen van <a> Bladwijzers maken Link naar een grote foto Link naar het vervolg van een artikel Link naar een e-mailadres Link naar een telefoonnummer 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
114 115 116 119 120 121 123 123 123 126 126 127 129 130 131 131 132
xi
Inhoud
5
6
xii
Beeld, geluid en andere externe inhoud
133
Inleiding URL’s en structuur van de website Lokale site Soorten afbeeldingen Bitmaps Vectorafbeeldingen: SVG Bestandsformaten voor bitmaps GIF JPEG PNG De juiste afbeelding voor het scherm Afbeeldingen plaatsen met <img> De bron: src Beschrijvende tekst: alt Afmetingen: width en height Klikbare gebieden: usemap Responsive images Srcset voor schermen met hoge resolutie Srcset voor variabele afmetingen Bijgesneden afbeeldingen: <picture> Het type afbeelding selecteren Het verschil tussen <img> en <picture> 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> Ondertiteling met <track> Titelbestanden: WebVTT Audio op de website gebruiken Samenvatting Oefeningen
134 134 136 137 137 138 140 140 141 142 143 144 144 145 146 147 148 148 149 150 151 152 152 153 154 155 157 157 158 158 158 160 161 162 163 165 165
Tabellen maken
167
Inleiding De structuur van een HTML-tabel
168 168
Handboek – HTML5 & CSS3
7
De basis: <table> Rijen en kolommen: <tr> en <td> Koptekst:<thead> Een bijschrift: <caption> Overige elementen De tabelinhoud: <tbody> Voettekst: <tfoot> Kolomgroepen: <colgroup> en <col> Voorbeelden van tabellen Samenvatting Oefeningen
169 170 171 172 173 173 174 174 175 178 179
Formulieren maken
181
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 Selectievakjes: <input type="checkbox"> Keuzerondjes: <input type="radio"> Bestanden uploaden: <input type="file">
182 182 184 184 184 185 185 186 186 186 187 187 188 188 189 190 191 191 199 199 200 200 201 201 202 203 205 206 207 208
xiii
Inhoud
8
xiv
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> 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
209 209 210 210 210 211 212 213 214 215 217 218 220 222 223 224 225
De basis van CSS
227
Wat CSS is Voorgeschiedenis En toen was er CSS3 Waarom CSS zo handig is De taal CSS Waarden en eenheden Globale waarden Lengte CSS-verwerking door de browser De boomstructuur Waarden toewijzen De cascade Specificiteit bereken Overerving Percentages werken door 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
228 228 229 231 231 233 234 234 238 238 239 240 241 243 244 245 245 246 247 247 247 248 249 250
Handboek – HTML5 & CSS3
9
Basisselectors Typeselector Universele selector * Klassenselector ID-selector Attribuutselectors Combinatieselectors: afstamming, kind en sibling Geen combinator: komma Algemene afstamming: spatie Kindselector: > Aangrenzend: + Opeenvolgend: ~ Pseudoklassen Pseudoklassen voor links Pseudoklasse doel Pseudoklasse taal Pseudoklasse UI-toestand Structurele pseudoklassen Pseudoklasse ontkenning Pseudo-elementen Best practices Samenvatting Oefeningen
251 251 252 253 254 255 256 256 256 257 257 257 258 258 259 259 259 259 261 261 263 265 266
Boxmodel, weergavemodel en positionering
269
De opbouw van pagina’s Browserstijlen zijn er niet voor niets Het boxmodel De eigenschap box-sizing Begrensde breedte en hoogte Waarden voor hoogte en breedte Marges Horizontaal centreren Verticaal centreren Negatieve marge Ingeklapte marges Padding Randen Randdikte Randkleur Randstijl Korte notatie voor randen
270 270 270 272 275 275 276 276 277 278 278 278 279 279 280 282 283
xv
Inhoud
10
xvi
Weergavemodel Terminologie De eigenschap display Waarden voor binnen en buiten Positionering – de lay-out Het omvattende blok Positioneringsschema’s Position Verschuiven met top, right, bottom en left Relatieve positionering Absolute positionering Vaste positie: fixed Flexibele vaste positie: sticky Float Float als lay-outtechniek Ouderwetse oplossing: clearfix Moderne clearfix: flow-root Meer eigenschappen van blokken Overlopende inhoud: overflow Speciaal voor tekst: text-overflow Praktijk: overlopende tekst met fade-out Formaat aanpassen met resize Uitsnijden met clip-path Zichtbaarheid: visibility Niet verbergen voor screenreaders De toekomst Samenvatting Oefeningen
283 284 285 285 288 288 289 289 289 290 291 293 294 295 297 299 300 301 301 302 303 305 307 309 310 310 311 312
Tekst en typografie
315
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: waarden en overwegingen Geavanceerd: responsive tekst Toepassing van font-size Grootte aanpassen: font-size-adjust Regelhoogte: line-height
316 317 317 320 320 323 326 326 327 328 329 330 330
Handboek – HTML5 & CSS3
11
Letterstijl: font-style Lettergewicht: font-weight Uitrekken of indrukken: font-stretch Kleinkapitaal: font-variant De verzameleigenschap font Eigenschappen voor tekst Uitlijnen: text-align en text-align-last Lijneffecten op tekst Inspringen Rechtopstaande tekst: text-orientation Overlopende tekst: text-overflow Tekst met schaduw Tekst omzetten: text-transform Witruimte behouden: white-space Ruimte tussen woorden en letters Afbreken: word-break en overflow-wrap Opmaak van lijsten Opsommingstekens Lijst als navigatie Verticaal menu Uitklapbaar menu Samenvatting Oefeningen
332 332 334 334 335 336 336 337 338 339 340 340 341 342 344 344 345 345 346 348 349 351 352
Kleur, randen en achtergronden
353
Inleiding Kleurwaarden RGB en RGBA HSL en HSLA Transparantie Kleur van tekst De achtergrond Achtergrondkleur Achtergrondafbeelding Verschillende achtergrondafbeeldingen Kleurverloop als achtergrond Parallax met CSS Kleurverlopen Lineair verloop Radiaal verloop Repeterende verlopen Afgeronde hoeken
354 354 355 356 358 358 359 359 359 367 368 368 369 369 371 372 373
xvii
Inhoud
12
13
xviii
Randafbeelding Voorbeeld van een randafbeelding Schaduw De werking van schaduw Material design Samenvatting Oefeningen
376 377 378 379 380 381 382
CSS-variabelen, transformatie, animatie en meer
383
Rekenen met calc() Voorbeelden CSS-variabelen: de functie var() Kenmerken van variabelen Variabelen declareren Toepassingen van variabelen All reset alles, behalve variabelen Beweging in webpagina’s Overgangen (transitions) Kant-en-klare overgangen Positie aanpassen Animatie Opbouw een animatie Keyframes Transformatie Tweedimensionale transformaties Schalend menu Driedimensionale transformaties Beeldfilters Kleuren mengen Samenvatting Oefeningen
384 384 385 386 387 387 389 390 390 392 393 394 394 396 398 399 401 402 409 409 411 412
Media queries, flexbox en grid
413
Inleiding De mogelijkheden Responsive design en media queries Responsive design en mobile first Weergave op mobiele schermen: de metatag viewport Media queries: breekpunten in de lay-out Vensterbreedte en vensterhoogte Schermresolutie Portret of landschap
414 414 415 418 419 421 422 423 424
Handboek – HTML5 & CSS3
Beeldverhouding Flexibele lay-out met flexbox Kenmerken 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 Lay-out in een raster met CSS Grid Kenmerken van gridlay-out CSS-eigenschappen voor gridlay-out Definitie van het raster Plaatsing van de items Uitlijning en tussenruimte Workflow in vogelvlucht Een raster maken Auto-flow Tussenruimte (gap) Waarden voor tracks De functie repeat() Expliciet en impliciet raster Een voorbeeld van gridlay-out Smalle weergave Breakpoint 37rem Breakpoint op 47rem Breakpoint 69rem en breder Verder ontdekken Samenvatting Oefening
Index
424 425 425 426 427 428 430 431 431 431 433 434 434 434 436 436 437 443 443 445 445 445 445 446 447 450 451 451 452 454 455 456 458 459 461 461 462 462
463
xix
1
Webtalen, browsers en editors
H
TML is de belangrijkste taal op internet. De standaard waar we ook vandaag mee werken bestaat sinds 2011 en heet HTML5. Dit hoofdstuk beschrijft het ontstaan en de actuele situatie. Er wordt kort uitgelegd wat HTML en CSS zijn en wat HTML5 is, want daar wordt verschillend over gedacht. Er is een overzicht van browsers en hulpmiddelen voor het schrijven van HTML-documenten en u maakt kennis met een handige gratis editor.
U leert in dit hoofdstuk:
Hoe we hier gekomen zijn. De rol van HTML en van CSS, en wat HTML5 is. Welke browsers niet mogen ontbreken. Handige hulpmiddelen: editors, validators en developer tools.
Hoofdstuk 1 – Webtalen, browsers en editors
Introductie Elke pagina op het world wide web heeft als basis de taal HTML, de afkorting van Hypertext Markup Language. Het kan er nog zo flitsend en grafisch uitzien en er kunnen allerlei aanvullende talen en technieken zijn gebruikt, de basis, de kern, is altijd HTML. Dit boek gaat over HTML5. Het is de actuele versie van de taal, vastgelegd in oktober 2014. HTML5 kan niet los worden gezien van de voorgangers, HTML4.01 en XHTML. HTML5 is daar een voortzetting van, waarbij onderdelen zijn aangepast, toegevoegd en afgeschaft, maar alle oude webpagina’s blijven werken. Met HTML5 beginnen we dus niet aan een nieuw web. Afschaffen betekent in dit verband dan ook dat auteurs worden aangemoedigd nieuwe webpagina’s volgens nieuwe standaarden te coderen en oude pagina’s te moderniseren. Gebeurt dat niet, dan blijven de webpagina’s toch toegankelijk voor bezoekers. Browsers moeten verouderde pagina’s blijven weergeven. De kans dat uw ervaring ophoudt bij HTML4 is intussen flink afgenomen, maar als dat uw achtergrond is, zult in dit boek veel elementen herkennen. Is dit uw eerste kennismaking met HTML, dan leert u – niet gehinderd door soms verouderde kennis – direct hoe het moderne HTML kan worden toegepast. Het is bijna standaard, maar daarom niet minder relevant, dat in boeken als dit een overzicht van de historie wordt geschetst. We houden het kort. Maar het is bijvoorbeeld handig om te weten dat er verschillende partijen werken aan HTML5.
Een snelle terugblik Toen de eerste editie van dit boek verscheen – voorjaar 2011 – was de inkt van het logo van HTML5 nog nat. In 2014 heeft de beheerder van de webtalen, het World Wide Web Consortium (W3C) de specificatie ‘definitief’ vastgesteld (in W3C-termen is het nu de aanbevolen specificatie, gelabeld als recommendation). Definitief staat niet voor niets tussen aanhalingstekens, want intussen wordt nog steeds aan de specificatie gewerkt. De huidige versie is HTML5.1 en die is sinds 1 november 2016 gelabeld als recommendation. Het betreft een minor upgrade en de verschillen zijn daarom klein. Ze zijn verwerkt in deze vierde editie van het boek. Eind 2017 wordt HTML 5.2 verwacht, opnieuw een minor upgrade. Om het makkelijk te houden spreken we in dit boek gewoon van HTML5.
2
Handboek – HTML5 & CSS3
Afbeelding 1.1
Het logo van HTML5, in 2011 gepresenteerd door het W3C.
Naast de versie van het W3C is er een tweede HTML-specificatie en die gaat door het leven als HTML Living Standard. Een updatedatum geeft aan welke versie het betreft. Dat er twee standaarden bestaan klinkt misschien vreemd (en dat is het ook), maar het komt doordat HTML een stoornis in de ontwikkeling heeft gehad. Om dat te kunnen begrijpen, moet u iets weten van de geschiedenis.
Afbeelding 1.2
HTML Living Standard, beheerd door WHATWG.
Afspraken over webtalen Sinds 1994 wordt geprobeerd lijn te brengen in de talen waarmee websites (en andere webtoepassingen) worden gemaakt. Die talen zijn onder meer Hypertext Markup Language (HTML) en Cascading Style Sheets (CSS). Daarvoor is het World Wide Web Consortium, kortweg W3C, opgericht. In verschillende werkgroepen overleggen browserfabrikanten zoals Microsoft, Google, Mozilla en Opera. Omdat W3C ook allerlei andere webstandaarden beheert, vindt u onder de leden ook bedrijven als Nokia, Rabobank Nederland, Walt Disney Company en Motion Picture Association of America. Het doel van bijvoorbeeld de werkgroep Web Platform is afspraken maken over hoe een auteur in een webdocument aangeeft dat iets een hyperlink, een kop of een opsomming is, en hoe een browser daarmee zou moeten omgaan. World Wide Web Consortium Kijk voor meer informatie over wat het W3C is en doet op w3.org. Dat is de thuishaven van deze in Amerika gevestigde organisatie. U vindt er ook informatie over de hierna genoemde talen XHTML en XML.
3
Hoofdstuk 1 – Webtalen, browsers en editors
Afbeelding 1.3
Het onderdeel HTML en CSS op de website van W3C.
Het is allerminst vanzelfsprekend dat er nu een W3C-standaard van HTML5 is. Eind jaren negentig, de standaard HTML4.01 was klaar, besloot de organisatie zich volledig te richten op XHTML, een vorm van HTML gemodelleerd naar de strikte regels van XML. Het begon met het herschrijven van HTML naar XML (XHTML 1.0) en tegelijk werd gewerkt aan een geheel nieuwe versie (XHTML2) die niet uitwisselbaar zou zijn met eerdere HTML- en XHTML-talen. Er was daarmee een route gekozen waarbij het bestaande web zou blijven zoals het was (HTML4) en er daarnaast een niet-uitwisselbaar nieuw web zou ontstaan met op XML gebaseerde applicaties. Tijdens dat ontwikkelproces zagen Mozilla en Opera in 2004 nieuwe mogelijkheden voor HTML en zij hebben voorgesteld om toch door te gaan met de ontwikkeling van HTML, maar daar waren bij het W3C onvoldoende medestanders voor. In reactie daarop besloten Apple, Mozilla en Opera dan maar zelf aan de slag te gaan met HTML5. Daarvoor richtten zij in 2004 de Web Hypertext Application Technology Working Group op, kortweg WHATWG. Hun voornaamste uitgangspunt was dat webontwikkelaars een webtaal gebaseerd op het oude HTML4 tot hun beschikking zouden krijgen, dus uitwisselbaar, maar met nieuwe mogelijkheden om een volwaardig alternatief te kunnen bieden voor native webapps (iOS en Android) en gepatenteerde technieken zoals Flash van Adobe en Silverlight van Microsoft. Dit initiatief viel bij de gemeenschap van webontwikkelaars in goede aarde. Omdat die de ontwikkelingen met gejuich ontvingen en omdat fabrikanten de nieuwe ideeĂŤn gingen inbouwen in hun
4
Handboek – HTML5 & CSS3
browsers, ging uiteindelijk ook bij het W3C het roer om. De werkgroep XHTML is eind 2009 opgeheven en de aandacht gaat weer uit naar HTML. Living Standard In een dynamische omgeving als internet moeten de mogelijkheden niet beperkt worden door starre regels. Met dat uitgangspunt propageert WHATWG dat HTML een levende standaard is, constant in ontwikkeling. Daar past geen versienummer bij. Lees de FAQ van WHATWG voor achtergrondinformatie over deze organisatie op wiki.whatwg.org/ wiki/FAQ. Het zijn de gedrevenheid van WHATWG en de snelheid waarmee in browsers nieuwe mogelijkheden worden ingebouwd die de ontwikkeling van HTML in een stroomversnelling hebben gebracht. Google (Chrome), Mozilla (Firefox), Opera en Microsoft (Edge) brengen in hoog tempo updates voor de browser uit. Het resultaat is dat de nieuwste versies van alle toonaangevende browsers veel nieuwe mogelijkheden ondersteunen. Het werkt als een vliegwiel: het feit dat nieuwe opties snel worden opgenomen in browsers stimuleert de ontwikkeling. Automatische updates Er worden niet alleen sneller nieuwe versies van browsers uitgebracht, ze worden ook veel sneller op grote schaal gebruikt door het internetpubliek. Dat komt doordat browserupdates automatisch worden gedownload en geïnstalleerd, zonder tussenkomst van de gebruiker. Dit principe staat bekend als Evergreen browsers (zie ook http://eisenbergeffect.bluespire.com/evergreen-browsers/).
Twee smaken HTML Zijn er nu twee smaken HTML? In zeker zin is dat zo. Hoewel de HTML5-recommendation op de website van het W3C het resultaat is van samenwerking tussen W3C en WHATWG, hebben de wegen van de groepen zich gescheiden. Wat W3C betreft is HTML5 ‘af’, hoewel de organisatie sinds 2012 ook werkt aan upgrades van HTML5. Daarbij gaat het om zaken die in de huidige specificatie nog onvoldoende ontwikkeld zijn. In grote lijnen is de HTML5-specificatie van W3C te zien als een stabiel geheel dat wordt ondersteund door een groot aantal marktpartijen. De Living Standard van WHATWG daarentegen is veel dynamischer. Er wordt permanent gewerkt aan nieuwe of verbeterde mogelijkheden op basis van wat websitebouwers nodig hebben.
5
Hoofdstuk 1 – Webtalen, browsers en editors
Doordat er twee specificaties bestaan, rijst uiteraard de vraag welke u als websitebouwer het best kunt hanteren. Daarbij telt uiteraard welke specificatie door de browserfabrikanten wordt gevolgd en dat is de W3C-versie. Gebruik die als stabiele standaard om websites te bouwen die door alle moderne browsers worden ondersteund. Volg de ‘levende standaard’ van WHATWG om te zien wat de toekomst kan brengen. Want zo werkt het globaal: uit de gemeenschap van webontwikkelaars komt naar voren wat een gewenste techniek, die wordt uitgewerkt door WHATWG, wat kan leiden tot (experimentele) implementatie in browsers, waarna uiteindelijk in de W3C Web Platform-werkgroep zo’n techniek als aanbeveling wordt opgenomen in de HTML-specificatie. U hebt als ontwikkelaar in elk geval geen last van de meningsverschillen tussen de specificatiemakers. Integendeel. WHATWG denkt vooral na over wat er mogelijk zou moeten zijn; het zijn de creatieven. Het W3C is een stuk behoudender, maar neemt bij voldoende draagvlak nieuwe ideeën wel over. Daar worden de mogelijkheden van HTML alleen maar groter van. Er bestaat overigens geen overzicht van de verschillen. Bekijk de specificaties Uiteraard zijn alle specificaties online beschikbaar. De W3C-recommendation is te vinden op www.w3.org/TR/html. Deze specificatie toont wat er is. De specificatie van WHATWG is te vinden op https://html.spec.whatwg.org/multipage/ en toont wat er mogelijk komt. Daardoor is de kans ook groter dat er zaken in staan die nog niet in webbrowsers zijn opgenomen. Weliswaar is het getalsmatig een hele stap van 4.01 naar 5, dat betekent niet dat alles van HTML4 ongeldig en overbodig is nu HTML5 er is. Integendeel. Er zijn wel dingen veranderd, vervallen en toegevoegd, maar het is nog steeds
Afbeelding 1.4
6
Hier gaan we het uitgebreid over hebben.
Handboek – HTML5 & CSS3
HTML. HTML5 is zogezegd backward compatible oftewel uitwisselbaar met voorgaande versies. Hebt u ervaring met HTML4, dan kunt u de overstap naar HTML5 beschouwen als bijscholing. Oude HTML werkt nog De achterwaartse uitwisselbaarheid (backward compatibility) van HTML5 gaat ver. Ook ‘verboden’ opmaaktags zoals <center> of <font> doen het nog in de allernieuwste browsers. Dat moet ook wel, want er zijn talloze webpagina’s die met deze tags zijn gemaakt en ook die pagina’s moeten toegankelijk blijven voor bezoekers. Wel worden websitebouwers aangemoedigd dergelijke tags niet meer te gebruiken. HTML is voor structuur en inhoud, niet voor opmaak. Verderop wordt dit uitgelegd.
Wat HTML5 is HTML5 is in essentie niet meer dan een upgrade van HTML4. We hebben het dan alleen over de markeertaal HTML. HTML5 is ook een verzameling van webtechnieken om moderne (mobiele) webapplicaties te bouwen. Naast HTML gaat het dan ook over een verzameling API’s en aanvullende technieken zoals CSS, JavaScript, XML, JSON en SVG. Bedenk dat deze geen deel uitmaken van de HTML5-standaard van W3C. U zult ze daar niet in terugvinden. Dat neemt niet weg dat ze in het leven van de webontwikkelaar een onmisbare rol spelen. Een korte toelichting: • • •
•
•
CSS staat voor Cascading Style Sheets en is de taal voor de vormgeving van HTML-pagina’s. CSS komt in dit boek uitgebreid aan bod. JavaScript is een programmeertaal (scripttaal) om onder meer webpagina’s interactief te maken. JavaScript wordt in dit boek niet behandeld. XML staat voor Extensible Markup Language en is een markeringstaal (zoals HTML). Het is ontwikkeld om gestructureerde gegevens uit te wisselen tussen (web)toepassingen op een manier die ook voor mensen leesbaar is. JSON is de afkorting van JavaScript Object Notation en is een alternatief voor XML. De functie is hetzelfde: uitwisseling van gegevens tussen een server en een applicatie. JSON wordt verder niet besproken. SVG staat voor Scalable Vector Graphics. Dit is een op XML gebaseerd bestandsformaat voor vectorafbeeldingen (vectorafbeeldingen kunnen worden vergroot of verkleind zonder dat ze rafelig of blokkerig worden zoals bitmapafbeeldingen). Ook SVG valt buiten het bestek van dit boek.
7
Hoofdstuk 1 – Webtalen, browsers en editors
Toegangspunt voor ontwikkelaars: API De afkorting API staat voor application programming interface. Het is een toegangspunt tot aanvullende functies waarbij de ontwikkelaar eenvoudig toegang heeft tot die functies zonder dat hij precies hoeft te weten hoe die functies werken. Hij hoeft alleen te weten hoe hij toegang krijgt. Een vergelijking kan zijn het bedienen van software met een grafische interface of via een terminalvenster. Voordbeelden zijn API’s voor slepen en neerzetten van bestanden in webpagina’s, voor het grafische HTML-canvas of voor het aanspreken van de camera in de computer. Hierbij is altijd JavaScript nodig en dat valt buiten het bestek van dit boek.
Kennismaken met HTML en CSS De volgende paragrafen veronderstellen dat HTML en het maken van webpagina’s voor u volledig onbekend terrein zijn. Hebt u al ervaring met HTML en CSS, dan kunt u doorbladeren naar de paragrafen Browsers en HTML-editors. Dit boek gaat allereerst over HTML. Maar tenzij u kale pagina’s wilt maken, kunt u niet zonder CSS, wat staat voor Cascading Style Sheets. Deze taal is ontwikkeld om aan te geven hoe de met HTML gecodeerde teksten (en afbeeldingen en meer) eruit moeten zien. Ook CSS komt daarom uitgebreid aan bod. Naast HTML en CSS kunnen programmeertalen worden gebruikt om webpagina’s tot leven te brengen. JavaScript is zo’n programmeertaal. Deze wordt bijvoorbeeld gebruikt om acties na een klik op een knop uit te voeren of om onderdelen van een webpagina te manipuleren. Maar ook complete apps worden gebouwd met JavaScript-frameworks zoals Angular of React. Het is zeker een goed idee om u ook in JavaScript te verdiepen als u verder wilt met webontwikkeling. HTML, CSS en ook JavaScript doen hun werk op het apparaat waarmee een bezoeker uw pagina’s bekijkt. Er is natuurlijk communicatie met de webserver, maar het werk wordt gedaan door de browser. Daarmee vormen uw bezoeker, zijn computer/tablet/telefoon en vooral zijn browser de client-side. Dan vermoedt u dat er waarschijnlijk ook een ander kant is; dat is ook zo.
8
Handboek – HTML5 & CSS3
Aan de serverkant Er zijn ook talen en technieken waarbij het werk op de webserver wordt gedaan, bijvoorbeeld het bij elkaar zoeken van componenten waaruit een webpagina wordt samengesteld. De server stuurt dan een kant-en-klare webpagina naar de client (de browser). Een veelgebruikte programmeertaal op webservers is PHP. Deze taal wordt bijvoorbeeld toegepast om een contentmanagementsysteem (kortweg cms) zoals WordPress (www.wordpress.org) of Joomla! (www.joomla.org) aan te sturen. PHP wordt daarbij onder meer gebruikt om pagina’s samen te stellen aan de hand van informatie die in een database is opgeslagen. PHP blijft in dit boek verder buiten beschouwing. Nog meer talen Er zijn nog veel meer talen voor het web dan de hier genoemde, maar tenzij u specialistische toepassingen wilt ontwerpen, krijgt u daar niet mee te maken. Op w3c.org kunt u er echter van alles over vinden.
HTML – Hypertext Markup Language HTML staat voor Hypertext Markup Language. Met HTML wordt de structuur van de pagina en de betekenis van de elementen in die pagina aangegeven. (In Engelstalige literatuur wordt gesproken over structure en semantics; onthoud deze termen). Er wordt met tags (labels) beschreven wat de kopteksten en alineateksten van een pagina zijn en welke afbeeldingen in de pagina moeten worden geladen, en met hyperlinks wordt aangegeven wat de onderlinge relatie tussen pagina’s is. HTML heeft niets te maken met het uiterlijk van een pagina. HTML is daarom geen programmeertaal. Het is een markeertaal. Vandaar ook de afkorting Hypertext Markup Language, oftewel ‘een markeertaal die is gebaseerd op hypertext’. Het principe van hypertext kent ondertussen iedereen. Dit zijn de tekstdelen waarmee relaties (ook wel koppelingen of links) tussen de pagina’s onderling zijn aangegeven. Vrijwel elke webpagina bevat wel een of meer hyperlinks. De hyperlinks, maar ook alle andere kenmerken, zijn de elementen van HTML en die worden gemarkeerd met tags. Om met HTML te kunnen werken, moet u weten welke elementen er zijn en hoe ze worden gemarkeerd. Stel dat u een stuk tekst op een pagina als koptekst wilt aanmerken. De code hiervoor is: <h1>Dit is een koptekst</h1>
9
Hoofdstuk 1 – Webtalen, browsers en editors
De code <h1> is de openingstag. Alles wat hierna volgt (in dit voorbeeld de tekst ‘Dit is een koptekst’) wordt als koptekst aangemerkt. Dit gaat zo door totdat de sluittag </h1> wordt geschreven. Een stuk gemarkeerde tekst wordt altijd afgesloten met een sluittag. Een sluittag heeft dezelfde naam als de openingstag, maar begint met een voorwaartse slash </…>.
Afbeelding 1.5
Een koptekst met daaronder de HTML-code.
In de browser ziet de koptekst er zo uit als in de afbeelding. HTML bevat meer dan honderd elementen. In dit boek worden de meeste ervan besproken.
CSS – Cascading Style Sheets Met CSS wordt het uiterlijk van de pagina aangegeven. CSS-code beschrijft hoe de kopteksten, alineateksten en afbeeldingen worden opgemaakt. In CSS wordt aangegeven welk lettertype wordt gebruikt, welke lettergrootte, letterkleur, uitlijning, regelafstand, witruimte tot andere onderdelen en meer. Met CSS is ook de opmaak van de pagina in te stellen in kolommen, kop- en voetteksten en kaders. Zelfs transformaties, overgangen (transitions) en animaties zijn mogelijk. CSS heeft echter niets te maken met de inhoud van de pagina. Neem nog even het voorbeeld van de koptekst uit de voorgaande paragraaf in gedachten. In HTML hebt u aangegeven dat een bepaalde tekst een koptekst moet zijn, maar dat zegt nog niets over het uiterlijk. Wilt u de koptekst bijvoorbeeld in een ander lettertype dan de gewone tekst, met een lijn eronder of een kleurvlak? Dit is nu juist de taak van CSS. Onthoud het volgende: •
•
Met HTML wordt de structuur van de webpagina en de betekenis van de inhoud gemarkeerd (kopteksten, tussenkoppen, hyperlinks, alinea’s en dergelijke). Met CSS wordt het uiterlijk van de webpagina ingesteld (lettertype, kleur, regelafstand, marges, en dat alles desgewenst per element van de pagina).
Om de koptekst uit de afbeelding 1.5 te voorzien van een blauwe achtergrond met donkerblauwe onderrand en een cursief lettertype, kan de volgende stijlregel worden geschreven:
10
Handboek – HTML5 & CSS3
h1 { font-family: Arial, Helvetica, sans-serif; font-style: italic; background-color: rgba(150, 200, 255, 0.5); border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: rgb(150, 200, 255); padding-left: 15px; }
Afbeelding 1.6 Een koptekst opgemaakt met een stylesheet. In de HTML-code is niets gewijzigd. Het uiterlijk is aangepast met een stijlregel.
De complete CSS-familie bestaat ook uit enkele honderden opdrachten die gezamenlijk alle mogelijke manieren bieden om een webpagina op te maken. Hoe meer CSS-regels u kunt toepassen, hoe fraaier het eindresultaat in de browser kan zijn. CSS3 Net als de structuurtaal HTML is de opmaaktaal CSS sterk in ontwikkeling. Er wordt al jaren gewerkt aan de nieuwste standaard: CSS3, hoewel die naam eigenlijk niet klopt. De specificatie bestaat uit losse modules, is zeer omvangrijk en (daardoor) nog lang niet af, zo die al ooit ‘af’ zal zijn. Veel onderdelen (modules) zijn wel bruikbaar en die komt u tegen in de hoofdstukken over CSS.
11