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.
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>
Element h2 is een kop van niveau 2 (h1 is de grootste kop, h6 de kleinste. De h komt van header)
Element p is een alinea (p is een afkorting van paragraph)
Het begin en einde van een element worden aangegeven door een tag:
De begintag bestaat uit de naam van het element tussen punthaken (< en >).
De eindtag is gelijk aan de begintag, maar met een schuine streep / voor de naam:
<h2> en </h2> zijn de begin- en eindtag van h2.
<p> en </p> zijn de begin- en eindtag van p.
In plaats van begin-tag en eind-tag wordt ook wel gesproken van open-tag en sluit-tag.
Samengevat ziet een element er als volgt uit:
figuur 2: element<element-naam>Inhoud</element-naam>
Afspraak
In de tekst van deze cursus worden elementen zonder de < en > weergegeven, maar wel in een speciale kleur.
De tags worden wel met < en > weergegeven, zoals in de volgende zin:
De inhoud van het element h2 staat tussen de tags <h2> en </h2>.
Afspraak
Als iets niet letterlijk moet worden ingetikt, staat het cursief gedrukt, bijvoorbeeld <h2>Inhoud</h2>:
<h2> moet letterlijk ingetikt, inhoud niet. Daar moet tekst voor een kop komen te staan, zoals Berlijn in het voorbeeld, of wat je maar wilt.
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. En br staat voor break) Het heeft alleen een begintag <br>, geen inhoud en geen eindtag (</br>bestaat 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:
In head worden dingen geregeld die je niet direct op de webpagina zelf ziet; (zoals de plaats waar het stijlblad is opgeslagen, de gebruikte letterverzameling, de titel van de pagina).
In body, tussen de tags <body> en </body> komt de eigenlijke web-pagina te staan.
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 toch meer weten? Klik dan op de knop 'Details'.)
Details van de opbouw
Doctype en html
We beginnen met een lege pagina, met alleen de code van figuur 5
figuur 5: Doctype en element html<!DOCTYPE html> <html lang="nl">
</html>
De bovenste regel geeft aan dat het document een html-document is.
Daarna staat er het html-element, waarin alle html-code van de pagina komt.
Het html-element heeft het attribuut lang="nl".
Betekenis: deze pagina is in het Nederlands geschreven (lang staat voor language, taal)
Head en body
Het html-element bevat twee elementen: head en body
figuur 6: Head en body<!DOCTYPE html> <html lang="nl"><head>
</head>
<body>
</body>
</html>
head is voor zaken als gebruikte tekenset, plaats van het stijlblad; dingen die de browser moet weten om de webpagina te kunnen tonen.
body bevat de eigenlijke webpagina. Die zullen we in de loop van de cursus gaan vullen met codes en teksten.
Opmerking: voor de duidelijkheid laten we een element binnen een ander element wat inspringen.
Inhoud van de head
Het element head bevat vier regels:
figuur 7: inhoud van de 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">
De eerste regel, <meta charset="utf-8">, legt de gebruikte tekenset vast: UTF8.
Die set bevat alle denkbare tekens, tot zelfs Arabische tekens toe.
De tweede regel, <meta name="viewport"content="width=device-width, initial-scale=1.0">,
zorgt ervoor dat de website ook goed wordt afgebeeld op een klein scherm, zoals van een smartphone.
Voor de details: zie de naslag bij 'viewport'.
De derde regel, <title>xxx</title>, zet de titel van de pagina.
Die titel wordt tijdens het browsen getoond in de titelbalk (of tab) van de browser.
Op de plaats van de titel staat hier nog xxx. Als je een nieuwe webpagina begint moet je op de plaats van de x-jes de titel invullen.
De vierde regel, <link rel="stylesheet"href="css/yyy.css">,
geeft de plaats aan waar de browser het stijlblad kan vinden.
css is de naam van de map waarin het stijlblad staat. Staat jouw stijlblad ook in die map dan hoef je niets te doen, anders moet je de mapnaam aanpassen.
yyy.css is de naam van het stijlbestand. Hier moet je bij een nieuwe pagina de yyy vervangen door de naam van jouw stijlbestand.
Als je deze regels in het element head zet heb je complete code voor een nieuwe webpagina. Zie figuur 8.
Tik de tekst van figuur 8 over. Houd ook de regelindeling aan.
De regels tussen <head> en </head> zijn ingesprongen. Dat gaat het gemakkelijkst met de Tab-toets.
Dat inspringen doen we voor de duidelijkheid.
Zo zie je in één oogopslag tot hoever element head zich uitstrekt. Ook als head veel meer regels zou beslaan.
Verbeter eventuele tikfouten en sla het bestand dan op onder de naam
nieuw.html in de map websitesmetstijl.
(Websitesmetstijl is de hoofdmap van het cursusmateriaal.)
Samenvatting
Een nieuwe webpagina
Een nieuwe nog lege webpagina ziet er uit als figuur 8
Zo'n lege webpagina hebben we opgeslagen onder de naam nieuw.html.
Een nieuwe website beginnen we vanuit dat document.
Elementen
Een element bestaat uit een begin-tag en een eind-tag met daartussen
de inhoud: <tag-naam>inhoud</tag-naam>.
Er zijn enkele lege elementen. Die hebben alleen een
begin-tag, geen inhoud en geen eind-tag.
br is een voorbeeld van een leeg element (tag: <br> ).
Attributen
Elementen kunnen attributen bevatten, die extra informatie aan het
element toekennen.
Attributen staan altijd in de begin-tag van een element.
Er mogen verschillende attributen in een element staan.
Ze worden gescheiden door een spatie.
De volgorde doet er niet toe.
Een attribuut heeft de vorm attribuutnaam="waarde".
De waarde staat altijd tussen aanhalingstekens.
Belangrijke elementen zijn:
head
De head, tussen de tags <head> en </head>, bevat aawijzingen voor de browser.
In de head vind je o.a. de volgende elementen:
title
Het element title bevat de titel van het document. Die wordt getoond in de titelbalk.
link
Het element link geeft de map en de bestandsnaam van het stijlbestand: href="map/bestandsnaam".
Als je een nieuwe webpagina begint moet je hier de naam van het stijlbestand en de map waarin het staat opgeven.
body Het element body bevat de eigenlijke webpagina. De inhoud van de pagina staat dus tussen <body> en </body>
Het element p is een alinea (paragraaf).
Het (lege) element br geeft de overgang naar een nieuwe regel aan ('harde return').