HTML 5 en CSS zijn de programmeertalen waarmee respectievelijk de structuur en de vormgeving van webpagina’s gerealiseerd worden. Deze workshop leert je hoe beide standaarden in elkaar zitten hoe je je eigen webpagina creëert.
Kenmerken van HTML-documenten
Een HTML-pagina is gewoon een tekstbestand. Het bestaat uit ‘platte’ tekst. Dat wil zeggen dat er geen codes in mogen voorkomen voor paginanummering, regelafstand en dergelijke. Tekstverwerkers zoals Microsoft Word zijn daarom ongeschikt als HTML-editor. Omdat HTML-documenten uit platte tekst bestaan, zijn ze platformonafhankelijk. Dat betekent dat je ze op ieder gewenst computersysteem of mobiel apparaat kan maken, bekijken en bewerken. Een webserver en een webbrowser moeten weten dat ze een HTML-bestand krijgen voorgeschoteld en geen gewoon tekstbestand. Daarom hebben HTML-bestanden de extensie .html. Je kan ook de extensie .htm tegenkomen. Die komt uit de tijd dat Windows geen extensies van meer dan drie tekens kon verwerken. Technisch is er geen verschil. Een kaal tekstbestand met de extensie .html wordt weergegeven door een browser, maar je ziet alleen de kale tekst. Het bestand bevat geen enkele aanwijzing voor de structuur of de betekenis van de tekst. Om aan te geven dat een tekst een kop is of een hyperlink, moet de tekst worden gemarkeerd (getagd). Daar gebruik je de HTML voor.
Elementen, tags en tekst
Kernbegrippen bij HTML zijn element, tag en tekst. De HTML-standaard bevat meer dan honderd elementen. Met deze elementen beschrijf je de inhoud van een webdocument, zodat de browser weet wat die ermee moet doen. Preciezer geformuleerd: je beschrijft het document voor de user agent. Dat is in dit verband software in de browser die een document dat door de webserver wordt verstuurd, vertaalt naar iets wat je kan bekijken.
Voor alle duidelijkheid staan hier de begrippen op een rij, daarna volgt een toelichting:
• Een webpagina is opgebouwd uit elementen;
• Een element kan leeg zijn, andere elementen bevatten, tekst bevatten of een combinatie van andere elementen en tekst;
• Het begin van een element wordt gemarkeerd door een openingstag die attributen kan hebben, soms is een attribuut verplicht;
• Daarna volgt meestal tekst;
• Het eind van een element wordt gemarkeerd door een sluittag;
• Een leeg element is een element dat geen andere elementen kan bevatten (bijvoorbeeld het afbeeldingelement <img>);
• Een leeg element bestaat uit alleen de openingstag en een of meer attributen.
Opbouw van een element
Een voorbeeld maakt het allemaal duidelijker:
<a href=”https://www.handboek-html-css.nl”>Handboek HTML5 en CSS3</a>
Dit is een element, een hyperlinkelement om precies te zijn. Je ziet de volgende onderdelen:
• de openingstag <a href=”https://www.handboek-html-css.nl”>
• het HTML-element a
• het attribuut href met de waarde https://www.handboek-html-css.nl
• de tekst Handboek HTML5 en CSS3
• de sluittag </a>
Het hyperlinkelement is geen leeg element; het bevat tekst en heeft een sluittag. Zonder tekst zou het ook nutteloos zijn, want dan zie je het element niet op het scherm. Waar moet je dan op klikken om de hyperlink te volgen? Een voorbeeld van een leeg element is het afbeeldingelement:
<img src=”zonnebloemen.jpg” alt=”Zonnebloemen in bloei.” width=”960″ height=”640″>
Er is alleen een openingstag, geen tekst en geen sluittag. De tag is zelfsluitend. Er zijn wel diverse attributen, die in dit voorbeeld aangeven waar de afbeelding kan worden gevonden (src, de afkorting van source oftewel bron) en welke afmetingen de afbeelding heeft (height en width). Het attribuut alt beschrijft wat de afbeelding toont en is een verplicht attribuut van het element img.
Andere voorbeelden van lege elementen zijn <br>, <hr> en <wbr>. Ze zijn bedoeld voor een regeleinde, een scheiding tussen secties en het punt waarop een woord mag worden afgebroken. Elke tag bestaat uit twee punthaken < en > met daartussen de naam van het element. Dankzij de punthaken wordt het element herkend als een tag en niet als platte tekst. Vergeet jeeen punthaak, dan herkent de browser de tekst niet als een tag en ziet het resultaat er op het scherm niet uit zoals je verwacht. Een sluittag bevat altijd een slash / en de naam van het element, zoals </a>. Een leeg element heeft geen sluittag. Een element is niet hetzelfde als een tag, maar de begrippen worden vaak door elkaar gebruikt. De tag is het ding met de punthaken, bijvoorbeeld <h1>. Tags geven het begin en eind van een element aan. Een element is het geheel van openingstag, tekst en sluittag (met uitzondering van lege elementen). Maar ook de losse naam zoals a of img wordt een element genoemd. Voor commentaar heeft HTML een speciale tag. Alles wat staat tussen <!– en –> wordt genegeerd.
Elementen nesten
Hiervoor is gezegd dat elementen ook andere elementen kunnen bevatten. Een voorbeeld daarvan is:
<a href=”images/zonnebloemen_large.jpg”>
<img src=”zonnebloemen.jpg” alt=”Zonnebloemen in bloei.”
width=”960″ height=”640″>
</a>
Het element <a> omsluit hier het element <img>. Het resultaat van deze code is een hyperlink die een afbeelding bevat. Klik je op de afbeelding, dan kom je terecht op de bestemming die in het attribuut href in het element <a> is vastgelegd. De afbeelding ís de hyperlink.
Sluiten in de goede volgorde
Hiervoor zag je een voorbeeld van een element dat een ander element omsluit. Het element img is genest in het element a. HTML-documenten zitten vol met dergelijke constructies. Daarbij is één ding heel belangrijk: je moet de elementen in de goede volgorde sluiten. Moeilijk is dat niet. Sluit altijd eerst het element dat als laatste is geopend. Bekijk het volgende fragment en het zal je duidelijk zijn wat de bedoeling is.
<p>Lees alles over <i>de standaard <abbr>HTML 5</abbr></i>.</p>
De HTML-code van webpagina’s bekijken
Met de basiskennis uit de voorgaande paragrafen is het nuttig om eens de code van een webpagina te bekijken. Van elke webpagina die je in de browser ziet, kan je de broncode openen. Zo is te onderzoeken hoe de ontwikkelaar de pagina heeft opgebouwd. Hier kan je veel van leren.
1. Open je browser en ga naar www.w3.org/TR/ (de pagina met alle webstandaarden voor HTML en CSS van het W3C).
2. Bekijk de broncode van deze pagina. Dat kan op twee manieren.
• Klik met de rechtermuisknop in de webpagina en kies Paginabron weergeven (Google Chrome). Andere browsers hebben daarvoor een vergelijkbare opdracht. De achterliggende code van de pagina wordt nu zichtbaar gemaakt in een afzonderlijk venster of een nieuw tabblad, waarbij verschillende kleuren voor de tags en teksten zijn gebruikt. Deze weergave toont de webpagina precies zoals de webserver die heeft verstuurd. Dit is niet de overzichtelijkste manier om code weer te geven.
• Druk op Ctrl+Shift+I (Option+Command+I). Hiermee worden de Hulpmiddelen voor ontwikkelaars (DevTools) geactiveerd. In de standaardweergave zie je in elk geval de HTML- en CSS-code voor het geselecteerde element (waarschijnlijk body). Deze weergave komt grotendeels overeen met die van de paginabron. Een belangrijk verschil is dat je nu de HTML-code ziet uit het geheugen van de browser. Om precies te zijn zie je het Document Object Model; wat dat is en wat je ermee moet wordt verderop uitgelegd in de paragraaf met dezelfde naam. Nu kan je rechtsklikken op de tag <html>; klik in het snelmenu op Recursief uitvouwen. Na korte tijd is alle code uitgevouwen.
Bekijk nu de broncode met de Hulpmiddelen voor ontwikkelaars.
1. Je ziet boven in de pagina codes zoals <!DOCTYPE html>, <html>, <head> en <title>, en een aantal andere elementen.
2. Blader omlaag tot je de tag <body> ziet. Dit is het begin van de inhoud die je in de browser kan zien.
3. Probeer onderdelen van de HTML te begrijpen door de code te vergelijken met wat je in de weergegeven pagina ziet.
• Plaats de ontwikkelaarshulpmiddelen links of rechts in het browservenster (de optie Zijde voor vastzetten in de instellingen van DevTools).
• Wanneer je in de ontwikkelaarshulpmiddelen een HTML-element aanwijst, licht in de pagina het desbetreffende onderdeel op, dat is echt heel leerzaam.
4. Gebruik de opdracht Inspecteren (klik met de rechtermuisknop op een onderdeel van de pagina) om te zien hoe een element is opgebouwd.
• In de ontwikkelaarshulpmiddelen staat links bovenaan de knop Selecteer een element … (Ctrl+Shift+C). Klik op die knop en wijs een onderdeel op de pagina aan. Bij het webonderdeel wordt een pop-upvenster getoond met informatie over dat element. Tegelijk wordt de bijbehorende code uitgevouwen. Klik op het onderdeel om naar de code te navigeren (de regel wordt dan geselecteerd).
Het pop-upvenster geeft een schat aan informatie over het element. Je ziet de tekstkleur, het lettertype en de opvulling. Daaronder staat informatie over de toegankelijkheid (accessibility).
5. Wanneer een HTML-element is geselecteerd, wordt in het andere deelvenster in de tab Stijlen de bijbehorende CSS getoond; dat zijn de instructies die de opmaak bepalen. Uit de Engelse naam kan je vaak al afleiden wat de functie van de eigenschappen is.
6. Let ook op het openen en sluiten van elementen zoals <header> en <div>, en merk onderaan de sluittags </body> en </html> op.
Dit document is een compleet en correct HTML 5-document. (Haal het eens door de HTML-validator op validator.w3.org om die bewering te controleren.) Het is in elk geval compleet in de zin van verplichte onderdelen zoals DOCTYPE, html en title. Je zal zien dat head en body niet in de broncode staan, terwijl je ze wel zag met de DevTools. De browser voegt deze elementen zelf toe. Al zijn ze niet verplicht, ze zijn wel nodig en elke browser is zo geprogrammeerd dat ontbrekende maar noodzakelijke elementen worden toegevoegd.
Koppelingen naar stylesheets staan altijd in de <head> van het HTML-bestand. Om de inhoud van zo’n bestand te bekijken, activeer je de tab Bronnen en klik je in de mappenlijst aan de linkerkant (voor deze website) achtereenvolgens op whatwg.org, style, shared.css. Natuurlijk hoef je de inhoud van deze bestanden nu niet te kunnen begrijpen. Maar je krijgt wel een beeld van hoe HTML- en CSS-bestanden eruit kunnen zien.
Handboek HTML 5 en CSS, 6e editie
Dit artikel is een hoofdstuk uit het Handboek HTML 5 en CSS, 6e editie van Peter Doolaard.
In deze zesde, bijgewerkte editie van dit handboek leer je met beide webtalen werken. Je leert eerst hoe je de content markeert met HTML. Daarna maak je de onderdelen van de pagina op met CSS. Het uitgangspunt daarbij is dat je niet alleen leert dát dingen werken, maar vooral waaróm ze werken.
Deze uitgave van Vanduuren Media is onder andere verkrijgbaar bij Standaard Boekhandel, voor 44,99 euro.
