Je eerste HTML-document

Laten we de theorie die we net hebben gelezen, maar eens in de praktijk gaan brengen.

Bestand opslaan als HTML-bestand

Je mag nu de editor openen en meteen je bestand opslaan. Inderdaad, het is een leeg bestand. Door deze nu al op te slaan, zal de markering van de bepaalde tags al meteen werken Sla je bestand op als eerste-pagina.html

Het bestand zelf maken

We zetten hier dus eerst het DOCTYPE neer, dus

1:
2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Dan moeten we daarna de html openen en vervolgens de head. Dus één regel onder het DOCTYPE zet je

1:

<html>

neer, en de regel daaronder

1:

<head>

. De html-tag mag gewoon helemaal links staan, maar de head-tag moet je laten inspringen. Dit doe je door op TAB te drukken. Als titel geven we op "Mijn eerste webpagina". Het resultaat hiervan moet dus zijn:

1:

<title>Mijn eerste webpagina</title>

Vergeet niet dat deze ook moet inspringen ten opzichte van de head.
In de head doen we nog iets meer dan alleen de titel opgeven, we zorgen er ook nog voor dat de browser wat extra informatie krijgt waardoor hij de website beter kan weergeven. Een goede reden om dit te doen, is omdat je pagina anders niet Valid XHTML 1.0 Strict is, dus dat hij zich niet aan de regels houdt van het DOCTYPE. We geven deze informatie met de volgende regel:

1:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

.
Dan moeten we nu de head afsluiten en de body openen.

1:

</head>

gebruiken we dus om de head af te sluiten, en

1:

<body>

om de body te openen. Deze twee komen op dezelfde lijn te staan als die van de openening van de head. Je moet dus ten opzichte van de titel een tab minder inspringen. Nu mogen we tekst neerzetten die op het scherm wordt weergegeven. Laten we hier "Deze tekst wordt in het scherm weergegeven." neerzetten. Dit is tekst, en moet daarom het beste in een paragraaf geplaatst worden. Dat wil zeggen dat het er zo uit komt te zien:

1:

<p>Deze tekst wordt in het scherm weergegeven.</p>

Dan moeten we nu nog de body en de html afsluiten. Dat lukt nu denk ik wel, maar denk eraan op welke plaats het moet staan.

Het bekijken van je webpagina

Nu sla je je bestand nog een keer op, en dan zijn we klaar met het maken van je eerste HTML-bestand. Je wilt natuurlijk kijken hoe hetgeen je net hebt gemaakt er uitziet. Dit doe je door (via Windows Verkenner/Deze Computer of hoe je het maar prettig vindt) je bestand op te zoeken en deze dan te openen met je browser. Dit kan als het goed is gewoon door te dubbelklikken op het bestand.
Wil je weten of je alles goed hebt gedaan? Vergelijk dan jouw pagina met die van mij welke hier te vinden is. Ook kun je kijken of je inderdaad overzichtelijk hebt gewerkt, je kunt namelijk de bron van mijn website bekijken. Dit doe je door met de rechter muisknop in de pagina te klikken, en dan moet je op "Paginabron bekijken" klikken.
Ook kun je nog controleren of de pagina inderdaad zich goed aan het DOCTYPE heeft gehouden. Je gaat daarvoor naar deze site, en daar kun je je bestand uploaden, of gewoon de code plakken in het vak eronder. Als het goed is krijg je dan de melding "This Page Is Valid XHTML 1.0 Strict!".

<< De opbouw van een HTML-document
>> Je HTLM-pagina uitbreiden