Websites met stijl

3. Elementen en attributen. Een 'lege' webpagina.

In dit hoofdstuk

Na een eerste kennsimaking met elementen en attributen maken we een sjabloon voor een nieuwe html-pagina.
Maar eerst komt aan de orde wat een element en een attribuut is.

Wil je de betekenis van al die kleuren in de tekst weten? Kijk dan bij Afspraken over kleur en lettertype.

Voor we een begin maken met de eerste webpagina, eerst iets over elementen en attributen.

Elementen

Elke webpagina is opgebouwd uit een aantal elementen. Elementen zijn de bouwstenen van de webpagina.

In figuur 1 staan 2 elementen, h2 en p: figuur 1 <h2>Berlijn</h2>
<p>Al enkele jaren na de val van de muur werd Berlijn de bruisende stad in centraal Europa die het nu nog steeds is.</p>

Samengevat ziet een element er als volgt uit: figuur 2: element <element-naam>Inhoud</element-naam>

Afspraak
Afspraak

Leeg element

Er zijn ook lege elementen. Die hebben geen inhoud en ook geen eind-tag, alleen een begin-tag: figuur 3: leeg element <element-naam>

Een voorbeeld is het element br dat een overgang naar de volgende regel uitvoert, ook als de regel nog niet vol is.
(Bij tekstverwerkers spreekt men van een harde return.)
Het heeft alleen een begintag <br>, geen inhoud en geen eindtag (</br>bstaat niet.)

Attributen

Soms wil je extra eigenschappen aan een element toekennen. Dat kan met zogenaamde attributen. Ze staan altijd in de begin-tag van een element.

De vorm is steeds: attribuutnaam="waarde". Dus: de naam van het attribuut gevolgd door een =-teken en dan de waarde ervan tussen aanhalingtekens. Een voorbeeld: figuur 4 <html lang="nl">....</html> Met het attribuut lang in het element html geef je de gebruikte taal (language) aan, hier Nederlands.

Sjabloon voor een html-pagina

Opbouw van een 'lege' webpagina.

En dan gaan we nu echt aan de slag. We beginnen met het bouwen van een lege webpagina. Hoe dat zit?

In grote lijnen bestaat elke html-pagina uit de elementen head en body:

We gaan een webpagina maken met een nog lege body, maar met de meeste informatie uit de head al ingevuld.
Die sjabloon-webpagina slaan we op onder de naam nieuw.html. Elke keer als we dan een nieuwe web-pagina beginnen gaan we uit van het bestand nieuw.html. Zo besparen we ons het intikken van een aantal regels en het onthouden van de codes in de head.

De code voor een lege webpagina intikken

Heb je al bedacht hoe je straks de code intikt op je computer en tegelijk de onderstaande tekst leest?
Kijk bij de tips onder tip 1

In figuur 8 vind je de complete code van een 'lege' webpagina. Als je dat voor het eerst ziet, ziet het er best ingewikkeld uit. Maar schrik niet, je hoeft nog niet precies te weten waar alle codes voor staan.
Wat je wel van de code moet weten staat genoemd in de samenvatting. (Wil je dat toch meer weten? Klik dan op de knop 'Details'.)

figuur 8 <!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>xxx</title>
<link rel="stylesheet" href="css/yyy.css">
</head>
 
<body>
</body>
</html>

Samenvatting

Een nieuwe webpagina

Elementen

Attributen

Belangrijke elementen zijn: