You may want to put some text here

HTML Basis Deel 1

In deze tutorial leer je hoe je een basis webpagina maakt met behulp van HTM. HTML kom je in elke site tegen, dus wil je websites gaan maken, dan is het zeker goed meegenomen dat je deze tutorial eerst een doorleest.

HTML staat voor Hyper Text Markup Language. Een HTML pagina bestaat uit 2 delen. Enerzijds hebben we gewone leesbare tekst en anderzijds hebben we HTML tags. Een tag staat altijd tussen <…> haakjes. Een eerste tag (<…>) zet een optie aan bijvoorbeeld tekst in het vet tonen) en een tweede tag (</…>) zet de optie terug uit. De tags gaan dus bepalen hoe de tekst die er tussen staat getoond gaat worden.

Ik zal dit even verduidelijken met een voorbeeld om tekst in het vet te tonen:

<strong>Deze tekst wordt in de browser vet getoond</strong>

Structuur van een webpagina

Een webpagina heeft altijd een basisstructuur die bij elke website aanwezig is. Hieronder ziet u de basisstructuur.

<html>

<head>

<title>Dit is de titel</title>

</head>

<body>

Dit is wat webpagina tekst

</body>

</html>

Het inspringen in het voorbeeld hierboven is alleen maar gedaan voor de overzichtelijkheid, het is dus niet verplicht, maar ik raad aan om het wel te doen. De inhoud van de webpagina zetten we altijd tussen de body tags.

Als je bovenstaande code zou bekijken in een webbrowser dan krijg je iets als dit.

html pagina basis structuur
HTML basis structuur voorbeeld resultaat

U kan het bovenstaande voorbeeld zelf ook even uittesten door de voorbeeld code te kopieƫren en te plakken in kladblok. Dit bestand sla je dan op als test.html (de extensie html is belangrijk, je mag ook de extensie htm gebruiken). Open nu dit bestand in een browser en je zal hetzelfde resultaat zien als op de foto hierboven.

Enkele basis tags

1. Vet

Om tekst in het vet te tonen gebruiken we de strong tag.

<strong>Dit is vet</strong>

2. Schuin (Italic)

Om tekst in het schuin te tonen gebruiken we de em tag.

<em>Dit is schuin</em>

3. Onderlijn

Om tekst te onderlijnen gebruiken we de u tag.

<u>Dit is onderlijnd</u>

4. Paragraaf

Met de p tag kan je van een tekstblok een paragraaf maken.

<p>Dit is een paragraaf</p>

We kunnen aan tags ook attributen meegeven. Hiermee kan je de tag nog beter specifiƫren. Even een voorbeeld:

<p align="right">Dit is een paragraaf die rechts uitgelijnd i.</p>

Wil je bovenstaande voorbeelden eens uittesten. Gebruik dan de basisstructuur die je in het begin van deze tutorial gezien hebt en typ de bovenstaande voorbeelden of hetgeen je wil uittesten tussen de body tags. Dit dan opslaan als een html of htm bestand en het bestand openen met je browser.

5. Horizontale lijn

Met de hr tag kunnen we een horizontale lijn over onze pagina tekenen.

<hr />

U merkt dat hier geen sluit-tag nodig is. Dit komt omdat je geen opmaak van een bepaalde tekst ofzo doet, maar omdat je gewoon een lijn tekent.

6. Nieuwe lijn

Met de br tag kunnen we tekst over meerdere lijnen verspreiden.

Dit is een eerste lijn tekst.<br />

Dit is een tweede lijn tekst

7. Tekstkleur instellen

Tekstkleur instellen doe je met het attribuut color in de tag font (binnen de font-tag heb je ook nog attributen om de tekstgrootte, lettertype, enz. in te stellen). De kleur zelf geven we mee door een hexadecimale waarde of hun gestandaardiseerde engelse naam.

R G B

White FFFFFF
Red FF0000
Black 000000
Green 00FF00

<font color="#00FF00">Dit is groene tekst</font>

8. Lettertype instellen

Het lettertype kunnen we instellen via het attribuut face van de tag font.

<font face="Arial, Helvetica, sans-serif">Een beetje arial tekst</font><br />

<font face="Courier New, Courier, monospace">Een beetje courier tekst</font>

9. Achtergrond kleur instellen

Achtergrondkleur kunnen we bijvoorbeeld instellen op de body met het attribuut bgcolor. Omdat we dit attribuut op de body plaatsen zal dit toegepast worden op heel de pagina, dus de hele pagina zal die bepaalde kleur krijgen.

<html>

<head>

<title>Blue page</title>

</head>

<body bgcolor="#0099FF">

<p>Een blauwe pagina</p>

</body>

</html>

10. Hoofdingen

Een hoofding tag kan je gebruiken voor titels. Er zijn zes hoofding tags, namelijk h1, h2, h3, h4, h5 en h6. h1 Is de grootste titel, h6 de kleinste.

<h1>Hoofding 1</h1>

<h2>Hoofding 2</h2>

<h3>Hoofding 3</h3>

<h4>Hoofding 4</h4>

<h5>Hoofding 5</h5>

<h6>Hoofding 6</h6>

Kleine webpagina

Met de kennis die je nu hebt opgedaan kan je toch al een kleine webpagina bouwen. Het volgende voorbeeld geeft je een beter beeld van wat je nu bijvoorbeeld al zou kunnen maken.

<html>

<head>

<title>Mijn website</title>

</head>

<body bgcolor="#FFFFCC">

<font face="Arial, Helvetica, sans-serif">

<h1 align="center">Mijn webpagina</h1>

<p align="center">Welkom op mijn eerste webpagina.</p>

<hr />

<p>

<h2><font color="#FF6600">Info</font></h2>

Deze webpagina is gemaakt a.d.h.v. een tutorial

over HTML op de site www.computerfaq.be.

</p>

<p>

<h2><font color="#FF6600">Extra</font></h2>

Test zelf ook nog wat uit met de verschillende tags

zodat je ze goed begrijpt. Hoe beter je het onder

de knie hebt, hoe vlotter het zal gaan om

webpagina's te maken.

</p>

</font>

</body>

</html>

De bovenstaande code zal als resultaat in de browser het volgende geven.

HTML kennis voorbeeld

Dit was de tutorial. Nu heb je wat basiskennis opgedaan over HTML en heb je een idee hoe webpagina’s worden gemaakt.

The Author of this post is Wim Mostmans

Wim Mostmans heeft een eigen webontwikkeling bedrijf Sitebase waar hij voltijds voor werkt. Hij beheert ook nog enkele websites waaronder deze en een Computerforum. Blijf op de hoogte van waar Wim mee bezig is door hem te volgen op Twitter.

Leave a Comment