Deze pagina toont voorbeelden van de onderwerpen in het Handboek HTML5 en CSS3. Elk hoofdstuk heeft zijn eigen webpagina. Die pagina is een uitbreiding van de voorgaande, waarbij de concepten van het bijbehorende hoofdstuk zijn toegevoegd. De eerste pagina's zien er daardoor 'ruw' uit (zeg maar lelijk). Opmaak met CSS komt pas aan bod vanaf hoofdstuk 4. (Toegegeven, er is gesmokkeld. De breedte van de body is beperkt om de tekst leesbaar te houden.)
Hoofdstuk 4
CSS-selectors
5 juni 2013
Op dit artikel zijn met behulp van selectors wat CSS-eigenschappen toegepast. Daarvoor is een nieuwe externe stylesheet gemaakt die is gekoppeld aan dit document. Open het bestand styles-h04.css om de stijlregels te bekijken.
Om te beginnen is met een elementselector een lettertype ingesteld voor de body (dat is een voorschot op hoofdstuk 5). Daardoor wordt alle tekst tussen de tags body (dus alle tekst op de pagina) weergegeven met het ingestelde lettertype.
De sectie die de artikelen over hoofdstuk 4 omsluit, heeft de klasse h04 gekregen. Op die manier is het eenvoudig om stijlregels te beperken tot de artikelen die bij hoofdstuk 4 horen. Met behulp van die klasse en een afstammingsselector is een stijlregel gemaakt die de datumregel bij dit artikel kleiner en cursief weergeeft.
De links zijn opgemaakt met behulp van pseudo-klassen. De stijlregel is niet beperkt door klassen of afstamming en geldt daarom voor alle links op deze pagina.
Hoofdstuk 3
Img, figure en figcaption
5 juni 2013
De nieuwe tags figure (en figcaption) kunnen gemakkelijk leiden tot verwarring. Wanneer moeten ze nu gebruikt worden; en wanneer niet?
Afbeelding 1 Met name onder lichtblauw zal de verwarring over figure nog stijgen.
Volgens de specificatie kan de inhoud van een figure ook los staan van de omringende tekst. Dat kan bijvoorbeeld een topografische kaart zijn, een grafiek of een foto die meer is dan alleen decoratie. Een figure moet dus van zichzelf een betekenisvol ding zijn.
De afbeeldingen in het boek zijn typische kandidaten voor figure. De plaatjes hoeven immers niet in de tekst te staan; ze zouden ook verzameld kunnen worden in een bijlage.
Figcaption is onlosmakelijk verbonden met figure; een figure zonder bijschrift (caption) zou misschien nog kunnen, maar een bijschrift zonder figure zeker niet.
Een img kan in een figure-tag staan, maar dat hoeft dus niet. Als een beeld onmisbaar is om de omringende tekst te kunnen begrijpen, is het gewoon een img, zonder figure.
Als voorbeeld nogmaals een boek, bijvoorbeeld een handleiding: als de afbeeldingen deel uitmaken van een stappenplan en de handeling wordt vooral getoond en niet beschreven, dan zijn de afbeeldingen geen figure maar img. De tekst verliest (een deel van) zijn betekenis als het beeld ontbreekt.
Doorloop de aangegeven stappen om tot het gewenste resultaat te komen:
Tot slot: bekijk de broncode van deze pagina om te zien hoe de HTML-code is opgebouwd en voor een voorbeeld van alt-tekst bij een afbeelding. Dan ziet u ook het gebruik van entiteitsnamen zoals ', de toepassing van HTML-attributen zoals alt, width en height en speciale tags zoals <code>.
Hoofdstuk 2
Paginastructuur
5 juni 2013
De hoofdstukken en paragrafen uit het boek vindt u hier terug als artikelen, zoals in een blog. Elk hoofdstuk is een sectie in dit document; elk onderwerp staat in een afzonderlijk artikel. Bij deze opzet is de structuur van een pagina helder. In de broncode zijn de elementen terug te vinden: section, header, article enzovoort. Gebruik een van de outlinehulpmiddelen om de structuur (outline) van deze pagina te bekijken.
In de broncode ziet u dat elke onderdeel begint met een h1. Toch ziet u in de browser verschil in grootte. Door de gestructureerde opbouw van het document 'snapt' de browser dat een volgende kop een lager niveau representeert en geeft deze daarom kleiner weer. Het effect werkt niet als de aside bijvoorbeeld een kop 2 zou hebben; die wordt groter weergegeven. Dat hier ook haken en ogen aan zitten leest u in het artikel in Smashing Magazine.