HTML/Basiscursus/De basis

In dit eerste hoofdstuk maak je kennis met de basis van HTML. Je leert hoe je webpagina's in HTML maakt en wat je daarvoor nodig hebt.

Benodigdheden

Om een HTML-pagina te maken is er hoofdzakelijk slechts een ding nodig, namelijk een teksteditor zoals Kladblok. Er zijn programma's die bepaalde functies bevatten om een webpagina zo makkelijk mogelijk op te bouwen. Ze bevatten functies om bijvoorbeeld tags automatisch te laten aanvullen, of knoppen waarmee in een keer een tag ingevoerd kan worden. Om het niet te ingewikkeld te maken in het begin, en vooral omdat het de bedoeling is om te leren werken met HTML, laten we deze programma's met automatische aanvulling en dergelijke functies buiten beschouwing.

Aangezien Kladblok enkel platte tekst weergeeft, kan het nogal moeilijk zijn om de groepen tags van elkaar te onderscheiden. Notepad++ is een voorbeeld van een programma dat tags kleurt volgens een aangegeven structuur. Dit programma heeft weinig geavanceerde functies, wat het dus een uitzondering maakt op bovenstaande alinea. Daarom is het ook een goed programma om webpagina's in pure HTML mee te leren schrijven.

Wat nog nodig is, is een beetje geduld, doorzettingsvermogen en wilskracht. Een webpagina maken kan enige tijd in beslag nemen, zeker wanneer je een beetje structuur wilt bekomen. Onder andere het maken van tabellen is soms tijdrovend. Ondanks dit is het maken van pagina's met HTML erg leuk.

Je eerste pagina

HTML-code: Je eerste pagina

<html>
     <head>
          <title>Mijn eerste HTML-pagina</title>
     </head>

     <body>
          <p>Hello world!</p>
          Een tweede regel zonder paragraaf-tags,<br />met een regeleind na de <b>komma</b>.
     </body>
</html>

Opslaan

Kopieer de bovenstaande tekst naar Notepad++. Je hebt nu je eerste HTML-pagina. Om deze te testen moet je deze opslaan als een HTML-document, dus met extensie .htm of .html. Dit kan je op de volgende manier doen:

Ga naar 'Bestand' en klik op 'Opslaan als...'.
Controleer onderaan het bestandstype waarin het bestand zal worden opgeslagen. Bij Kladblok en Notepad++ is dit standaard 'Tekstdocumenten (.txt)'. Verander dit naar 'Alle bestanden (*.*)'.
Geef het bestand een naam die eindigt op '.htm' ('.html'). De homepage (startpagina) van een site wordt meestal 'index.htm' of 'default.htm' genoemd.

Ziezo! Je eerste pagina is klaar. Je kan deze nu openen door naar het bestand te navigeren, en hierop te dubbelklikken. In je standaardbrowser zie je dan de door jouw gemaakte pagina.

Je eerste pagina ontleed

Elementen en tags

Een HTML-pagina is opgebouwd met behulp van elementen die de code in blokken indelen. Een element wordt gevormd door een of twee tags. Een tag is een code om een element te openen of te sluiten. Voorbeelden van tags zijn <html> en <body>. Zoals je ziet zijn het woorden die omgeven zijn door de haakjes: '<' en '>'. Tags zeggen iets over de tekst die tussen de tags ligt. Zo kan je met tags tabellen, hyperlinks of afbeeldingen maken.

Zoals gezegd bestaat een element meestal uit twee tags: de begin-tag en de eind-tag (of sluit-tag). Een voorbeeld van een begin-tag is '<html>'. Hiermee begint het voorbeeld hierboven. Om onderscheid te maken tussen een begin- en een eind-tag, krijgt de eind-tag een slash '/'. Een voorbeeld zie je aan het eind van de voorbeeld code: '</html>'. Soms is een element leeg: er hoeft dan geen tekst tussen de tags te staan. Omdat programmeurs over het algemeen lui zijn, mag je in dit geval één tag gebruiken die direct wordt afgesloten. Een voorbeeld hiervan is het invoegen van een afbeelding, wat gebeurt met de volgende code: '<img />'.

In het voorbeeld worden zes elementen gebruikt. Hieronder worden deze uitgelegd.

<html>...</html>

Het HTML-element duidt het begin en het eind van een HTML-document aan. Tussen deze tags bevinden zich alle gegevens van het document.

<head>...</head>

Tussen deze tags staat de "header", met informatie over de pagina. Deze informatie wordt niet getoond op de pagina zelf. In de header kun je handig scripts en andere dingen definiëren en instellen, omdat deze code als eerste wordt uitgevoerd. Hier kun je bijvoorbeeld een variabele instellen die je later weer gebruikt. Daarom wordt de titel van de pagina ook hierin ingesteld; deze is erg belangrijk.

<title>...</title>

Tussen deze tags staat de "titel", de naam van de pagina. Deze wordt getoond helemaal bovenin de browser. Kijk als voorbeeld maar naar deze pagina. Deze heet HTML/Basiscursus/De basis, wat wordt gemaakt met de code '<title>HTML/Basiscursus/De basis</title>'.

<body>...</body>

In de body staan de belangrijkste onderdelen van het HTML-document: de inhoud. Deze inhoud wordt gestructureerd volgens hetzelfde systeem als de vorige elementen: met tags.

...

In de body staat de eerste zin van het document. Deze staat tussen de -tags. De p staat hierbij voor paragraph (paragraaf). Na het afsluiten van een paragraaf wordt automatisch een regel overgeslagen. Het is niet verplicht om de -tag te gebruiken, want dit is alleen een hulpmiddel om de tekst gemakkelijk te verdelen in alinea's. Je mag ook gewone tekst tussen in de body zetten, zonder tags.

De laatste tag die wordt gebruikt is de -tag. Deze zorgt voor een nieuwe regel (br staat voor break, stop). Zoals je ziet, ziet deze tag er anders uit dan de anderen. Normaal hebben tags een begin, dan de tekst waarop het van toepassing is, en vervolgens een afsluitende tag. Omdat er geen tekst tussen en zou kunnen (wat zou je daar immers moeten zetten?), open je hem en sluit je hem als het ware in een keer.

...

Nog een voorbeeld van tags. Net zoals de vorige tags, de -tags, hebben deze tags invloed op de tekst die er tussen staat. In dit geval wordt die tekst vetgedrukt. In het voorbeeld wordt dus het woord 'komma' vetgedrukt. Behalve tags voor vette tekst, zijn er ook tags voor andere standaard opmaak. De meest gebruikte zijn het onderstrepen en cursief weergeven van tekst. Om tekst te onderstrepen gebruik je ..., om tekst schuin af te drukken gebruik je ....

Je hebt nu je eerste HTML-pagina aangemaakt. Hierin heb je onder andere kennis gemaakt met de -tag. In het volgende hoofdstuk zal je hier meer over leren, samen met nog een aantal andere tags die je kan gebruiken om tekst weer te geven.

Externe links

Notepad++ website