Handboek HTML5 en CSS3

Voorbeeldcode

Inleiding

Wat dit voorstelt

5 juni 2013

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 9

Tabellen

7 juni 2013

Voorbeelden en de code zijn beschikbaar op deze pagina met tabellen. De CSS-stijlen zijn opgenomen in dat bestand, dus bekijk ook de broncode van tabellen.html.

Hoofdstuk 8

Video

7 juni 2013

Een van de opvallende vernieuwingen in HTML5 is de mogelijkheid om op een eenvoudige manier videobestanden op een webpagina te gebruiken. In het boek wordt uitgelegd welke typen en codecs beschikbaar zijn. In de broncode van deze pagina is te zien wat nodig is om dit filmpje op de pagina te krijgen.

Audio

7 juni 2013

Ook het gebruik van muziek en geluidsfragmenten is in HTML5 eenvoudiger geworden. Zie het boek voor de uitleg van typen en codecs. In de broncode van deze pagina is te zien wat nodig is om dit geluidsfragment op de pagina te krijgen.

Hoofdstuk 7

Lijstjes

6 juni 2013

Voor een overzicht en codevoorbeelden van diverse lijsten kijkt u op de vervolgpagina.

Een menu is natuurlijk ook een opsomming en dus een lijst in een HTML-document. Maar onderdelen van een lijst hoeven niet per se onder elkaar te staan. Kijk voor de code van het menu boven aan de pagina in de stylesheet styles-h07.css. De opsmuk is hier beperkt tot een eenvoudig aanwijseffect. Merk op dat het aanwijseffect voor de links in de tekst nadrukkelijk moet worden uitgeschakeld voor de links in het navigatiemenu.

Hoofdstuk 5

Transparantie

6 juni 2013

Een nieuwe mogelijkheid van CSS is transparantie. Bekijk de HTML-pagina van afbeelding 5.10 uit het boek. De broncode is te vinden in het bestand transparantievoorbeeld.html. De stijlregels staan in het HTML-bestand.

Met transparantie kan de inleiding worden onderscheiden van de andere artikelen, bijvoorbeeld door een donkere achtergrondkleur op de hele sectie te zetten en het artikel een transparante witte achtergrond te geven. Zie styles-h05.css voor de stijlregels.

Achtergrondafbeelding

6 juni 2013

Het combineren van achtergrondafbeeldingen is een aardig trucje dat met een paar regels CSS is te realiseren. Zie het bestand styles-h05.css voor de code om het volgende voorbeeld te realiseren (boek afbeelding 5.12).

 

Negatieve marge

6 juni 2013

De tekst van dit artikel is een stukje naar rechts geplaatst door een linkermarge toe te voegen. Het pictogram komt links naast de tekst door een negatieve marge te gebruiken. Helemaal vanzelf gaat het dan nog niet. De eigenschap float (beschreven in hoofdstuk 11 van het boek) zorgt ervoor dat het plaatje links naast de tekst komt.

Merk op dat in het stijlblad de selector > is gebruikt. Daardoor krijgt de berichttekst wel een marge, maar blijft de datumaanduiding netjes onder de kop staan (geen kind). Overigens staat in de uiteindelijke versie van deze pagina de tekst in lijn met de andere tekst en staat het pictogram 'echt' in de marge.

Randen

6 juni 2013

Deze pagina mag gestructureerd zijn opgezet, visueel mankeert er nog van alles aan. Zo is bijvoorbeeld op de voorgaande pagina's het onderscheid tussen de hoofdstukken niet heel duidelijk. Met een rand is dat verbeterd. Het gaat om de h1-koppen die direct volgen op een section-tag, dus daar is in de stylesheet een opmaakregel voor gemaakt.

Op het onderdeel 'Links bij dit artikel' is een rand met afgeronde hoeken gezet.

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?

Grafische weergave van de verwarring over de tag figure onder lichtblauw, donkerblauw en middenblauw waaruit blijkt dat vooral de verwarring bij lichtblauw nog zal stijgen.
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 &apos;, 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.