Een webpagina bouwen met HTML

Hoe werkt HTML?

Webpagina's bouw je met HTML. Dat is geen programmeertaal, maar enkel een gestructureerde manier van "schrijven".
Je markeert nauwkeurig alle onderdelen van de pagina.

Met de markeertaal HTMLbouw je webpagina's en kan je ze eveneens aan elkaar koppelen (linken). Een webpagina bouw je niet met een tekstverwerker. Je schrijft hem best in code. Een browser (Chrome, Firefox, Internet Explorer, Opera, Safari...) leest die code en zet die om in een weergave voor de mens. Je moet in je HTML-code precies aangeven waar een titel, alinea, link, afbeelding... of wat dan ook staat, want een browser is een stuk software en die software weet anders niet wat voor jou een titel of een alinea is.

Daarom moet je elk onderdeel "se lecteren" en aan de browser zeggen: "Kijk, dit is een titel!" Het lijkt een beetje op het studeren van een tekst: je duidt de belangrijkste onderdelen met een markeerstift aan. We kunnen natuurlijk niets met een markeerstift beginnen als we een webpagina bouwen. In HTML (hypertext markup language) markeren we een element door aan te duiden waar het element begint en waar het eindigt. Dit doe je op de volgende manier:

<element>
De inhoud van het element
</element>

Natuurlijk moet je niet "element" invoeren, maar de afgesproken benamingen, meestal afkortingen: zo staat "p" voor "alinea" en "h1" voor een grote "kop". In een webpagina zitten een aantal HTML-elementen. Je hoeft heus niet alles te kennen. Met een beperkt aantal basisonderdelen bouw je zo goed als alle mogelijke webpagina's.

HTML-markeringen

A. Basisstructuur webpagina

Pagina-onderdelen	Beginmarkering	Eindmarkering	Voorbeeld
Webpagina	<html>	</html>	<html> <head> </head> <body> </body> </html>
Header, algemene informatie	<head>	</head>
Zichtbare deel voor websitebezoekers	<body>	</body>

B. Onderverdeling van de pagina

Pagina-indeling	Beginmarkering	Eindmarkering
Onderverdelingen	<div>	</div>
Hoofdbalk, bannergedeelte (html5)	<header>	</header>
Onderdeel "naast" de hoofdinhoud (html5)	<aside>	</aside>
Navigatiebalk (html5)	<nav>	</nav>
Voetgedeelte (html5)	<footer>	</footer>

C. Titels in een tekst

De elementen hieronder gebruik je enkel binnen het <body></body>-gedeelte:

Titel	Beginmarkering	Eindmarkering	Voorbeelden
Kop 1	<h1>	</h1>	<h1>Deel 1</h1>
Kop 2	<h2>	</h2>	<h2>Hoofdstuk 1</h2>
Kop 3	<h3>	</h3>	<h3>1.1 Eerste titel hoofdstuk</h3>
Kop 4	<h4>	</h4>	<h4>1.1.1 Onderdeel</h4>
Kop 5	<h5>	</h5>	<h5>A. artikel</h5>
Kop 6	<h6>	</h6>	<h6>a.1 klein stukje</h6>
Groep titels	<hgroup>	</hgroup>	<hgroup> <h1>Deel 1</h1> <h2>Hoofdstuk 1</h2> </hgroup>

D. Andere structuurelementen