Websites maken voor beginners: HTML

Vrijwel alle websites zijn grotendeels in HTML geschreven. Maar wat is HTML precies en hoe kun je er een website mee maken? In dit artikel zal de basis van HTML worden uitgelegd en kun je zelf een simpele website maken. Er is totaal geen voorkennis vereist en je hoeft ook geen speciale programma's te gebruiken om een website te kunnen maken met HTML.

Wat is HTML?

HTML staat voor Hyper Text Markup Language. Het is geen programmeertaal, maar een zogenaamde opmaaktaal. HTML bestaat uit platte tekst waarin met markeringstekens is aangegeven hoe de tekst moet worden geïnterpreteerd, bijvoorbeeld of een woord/zin dik gedrukt of schuin moet worden weergegeven. Zo'n markering heet een tag en is te herkennen aan het feit dat tags altijd tussen deze twee tekentjes staan: <tag> (het woord "tag" kan van alles zijn, en bepaald wat voor tag het is).

Hoe maak je een HTML bestand?

Zoals eerder al is vermeld, zijn er geen speciale progamma's nodig om een HTML bestand te maken. Een veel gebruikt programma voor het schrijven van HTML is simpelweg Kladblok (of Notepad in het Engels), dit staat in Windows onder accesoires. Open Kladblok om te beginnen met het schrijven van je eerste HTML bestand.

Je eerste webpagina
Als je Kladblok hebt geopend kun je de volgende regels intypen:

<html>
<body>

Mijn eerste webpagina
 
Mijn eerste webpagina

</body>
</html>

Dit geeft het volgende resultaat:

Mijn eerste webpagina
Mijn eerste webpagina

Het opslaan van de webpagina
Door deze tekst (de tekst uit het bovenste blok) in Kladblok te typen, en vervolgens op te slaan als naam.html (je kunt de naam natuurlijk zelf kiezen) heb je je eerste webpagina gemaakt. Je kunt dit doen door te gaan naar: "bestand" - "opslaan als..." en daar bij het bestandstype "alle bestanden" te kiezen. Je kunt het bestand dan opslaan als naam.html. Als je dit niet doet zal Kladblok namelijk automatisch een tekstbestand maken, en heet je bestand naam.html.txt.

Het openen van de webpagina
Als je dit bestandje vervolgens opend met een webbrowser (het programma waarmee je op internet gaat, voor de meeste mensen is dit Internet Explorer) zie je de webpagina zoals is weergegeven in het onderste blok. Je kunt dit doen door met de rechter muisknop op het bestand te klikken, naar "Openen met..." te gaan en "Internet Explorer" (of een andere browser) te kiezen.

De structuur van HTML

Een HTML bestand bestaat uit allemaal tags. Er zijn twee typen tags; een begin- en een eindtag. Een tag staat altijd tussen een "<" en een ">" , en heeft een bepaalde naam: <naam> is dus een tag. Bovendien is <naam> een begintag. Bij elke begintag hoort ook een eindtag, deze ziet er als volgt uit: </naam>. De "/" geeft aan dat het een eindtag is.

Een tag zegt iets over de tekst die tussen de begin- en de eindtag staat. Een voorbeeld is de tag. Deze wordt gebruikt om tekst dikgedrukt te maken:

Deze tekst is dikgedrukt

Ziet eruit als:

Deze tekst is dikgedrukt

Alleen het woord "dikgedrukt" wordt dikgedrukt weergegeven, omdat deze tussen de en de tags staat.

Opbouw van een webpagina

Laten we nog eens naar het eerste voorbeeld kijken.

<html>
<body>

Mijn eerste webpagina
 
Mijn eerste webpagina

</body>
</html>

Er zijn hier verschillende tags te zien (de woorden die tussen een "<" en een ">" staan):

De <html> tag
Als eerste is er een <html> tag, deze geeft het begin aan van de webpagina. De </html> tag geeft het eind aan van de webpagina en hoort altijd onderaan het HTML bestand.

De <body> tag
De <body> tag geeft het begin aan van het zichtbare gedeelte van de website, deze wordt afgesloten met een </body> tag. Eigenlijk hoort bijna alles tussen de <body> tags. Er bestaat namelijk ook een <head> tag, waar je bijvoorbeeld de titel van je webpagina kunt neerzetten, maar hier gaan we verder niet op in.

De tag
Alles wat tussen een en een tag staat wordt schuingedrukt weergegeven. Je kunt verschillende tags ook combineren:

Deze tekst is schuin
 
Deze tekst is dikgedrukt
 
Deze dikgedrukte tekst is schuin

Deze tekst is schuin
Deze tekst is dikgedrukt
Deze dikgedrukte tekst is schuin

De tag
Tot slot is er nog de tag. Dit is een losse tag, zonder begin of eind. Een tag zorgt dat de eropvolgdende tekst op de volgende regel terecht komt. De volgende HTML code:

1
2
3

komt eruit te zien als:

123

maar deze code:

1
 
2
 
3

komt eruit te zien als:

1
2
3

Goed worden in HTML

Als het goed is begrijp je nu ongeveer de basis van HTML. Als je je in de toekomst meer wilt verdiepen in HTML dan is het aan te raden om simpelweg veel te experimenteren. HTML is een taal die in principe vrij makkelijk te leren is, maar het duurt even voordat men gevoel krijgt voor de logica ervan.

Zodra je eenmaal bekend bent met de structuur en logica van HTML, ben je al enorm op weg. Het is dan alleen nog een kwestie van nieuwe tags leren kennen, en voor je het weet heb je een proffessionele website gemaakt.

Websites maken voor beginners: HTML

Website maken

Wat is HTML?

Hoe maak je een HTML bestand?

De structuur van HTML

Opbouw van een webpagina

Goed worden in HTML

Bronnen en referenties