HTML en CSS
1. Introductie HTML
| 1.1 Inleiding
HTML is de taal van het World Wide Web: webbrowsers kunnen dit lezen. Ook kunnen ze
hiermee een website op het scherm laten verschijnen wanneer je aan het webbrowsen bent.
| 1.2 De codeertaal HTML
codeer- of programmeertaal de taal die een computer begrijpt
HyperText Markup Language afkorting van HTML
| 1.3 Browsen
Als je wil ‘browsen’ doe je dat via een webbrowser die al op je omputer geinstalleerd is (safari,
google chrome of Firefox). Je apparaat moet ook verbonden zijn met het internet. Dit kan
draadloos of met een kabel verbonden aan een router of modem. De modem is aangeslpoten
op het netwerk van een provider en die zorgt ervoor dat je websites over de hele wereld binnen
kunt laten.
| 1.4 Het ontstaan van HTML
HTML is uitgegroeid tot een zogenaamde standaard. Het is een wereldwijd geaccepteerde
verzameling regels, in dit geval voor het maken van websites. In 1995, 1997 en 1998 kwamen
de versies 2, 3 en 4 van HTML uit. In 2014 werd HTML 5 goedgekeurd als opvolger. Dit
erkennen gebeurt door een internationale organisatie. Die organisatie is speciaal opgericht
voor het maken en goedkeuren van standaarden voor het internet. Het is het World Wide Web
Consortium, ook wel afgekort tot W3C.
| 1.5 Zelf een HTML-bestand maken
Als je een HTML bestand wil maken open je eerst je editor en typ je er iets in. Om het
vervolgens op te slaan geef je het bestand een extensie zoals .html of .htm ipv .txt.
Je hebt verschillende editor programma’s zoals; notepad++, atom, Netbeans en kladblok.
| 1.6 HTML-code valideren
Valideren wanneer je je HTML bestand moet gaan controleren op fouten.
Je kan ook via een validatieprogramma een tekst controleren. Je plakt je code in het
programma en die controleert de fouten.
2. Een webpagina maken
| 2.1 Inleiding
Hier leer je hoe je je eigen HTML webpagina maakt en hoe je daat Hyperlinks bij gebruikt.
| 2.2 Structuur van een HTML-document
Een HTML5-bestand bestaat uit meer dan alleen tekst. Je moet ook elementen gebruiken
voorhet weergeven van hyperlinks en afbeeldingen.
Het document heeft bijvoorbeeld meestal een titel-element.
<title> Dit is de titel naam </title>
Begintag een element begint altijd met een begintag. Dit begint dan met een bracket en
dan het elementnaam.
Eindtag op het einde moet je het element weer eindigen door tussen brackets een slash en
dan het elementnaam te zetten.
| 2.3 De opbouw van een HTML-document
DOCTYPE-decleratie
Je begint een HTML-bestand altijd met een tag waarin een DOCTYPE-declaratie zit. Daarmee
vertel je de webbrowser welke versie van HTML je gebruikt. Voor HTML5 is dat:
<!DOCTYPE html>
, Html-element
Na de DOCTYPE-declaratie zet je het html-element. Dit is het hoofdelement van je bestand
waarin je al je verdere code plaatst. Het html-element mag maar één keer voorkomen in je
HTML5-bestand.
1. <!DOCTYPE html>
2. <html>
3.
4. </html>
Head-element
Het head-element bevat informatie over de website die je niet op de pagina zelf ziet. Zoals de
titel (voor in de webbrowserbalk of op het titelblad), gegevens over de auteur van de website,
informatie voor zoekmachines en gegevens over een eventueel opmaakbestand (dit komt in dit
hoofdstuk nog niet aan bod).
title-element
De titel van het tabblad (in dit voorbeeld ‘Hier komt een of andere titel’) kun je in het head-
element opgeven met het title-element:
1. <head>
2. <title> hier komt een titel </title>
3. </head>
Body-element
Zoals gezegd plaats je het body-element, net als het head-element, in het html-element. Het
body-element bevat de werkelijke inhoud van de pagina. Dus alle tekst, afbeeldingen
enzovoort die de gebruiker te zien krijgt. Dit is een voorbeeld van een HTML-bestand met de
head- en body-elementen:
1. <!DOCTYPE html>
2. <html lang= “nl”>
3. <head>
4. <title> hier komt een titel </title>
5. </head>
6.
7. <body>
8. De tekst van de website
9. </body>
10. </html>
meta-tags
In het head-element kunnen naast de titel van de website ook andere gegevens staan.
Gegevens over de auteur van de website, informatie voor zoekmachines en gegevens over een
eventueel opmaakbestand. Dit zijn de meta-tags. Een meta-tag heeft twee attributen,
namelijk ‘name’ en ‘content’.
Dit zijn de meest gebruikte;
Name Toepassing
author Naam van de auteur
Zoekwoorden voor zoekmachines, door komma's
keywords
gescheiden
description Omschrijving van de website voor zoekmachines
1. <!DOCTYPE html>
2. <html lang="nl">
3. <head>
4. <title>Een of andere titel</title>
5. <meta charset="utf-8">
1. Introductie HTML
| 1.1 Inleiding
HTML is de taal van het World Wide Web: webbrowsers kunnen dit lezen. Ook kunnen ze
hiermee een website op het scherm laten verschijnen wanneer je aan het webbrowsen bent.
| 1.2 De codeertaal HTML
codeer- of programmeertaal de taal die een computer begrijpt
HyperText Markup Language afkorting van HTML
| 1.3 Browsen
Als je wil ‘browsen’ doe je dat via een webbrowser die al op je omputer geinstalleerd is (safari,
google chrome of Firefox). Je apparaat moet ook verbonden zijn met het internet. Dit kan
draadloos of met een kabel verbonden aan een router of modem. De modem is aangeslpoten
op het netwerk van een provider en die zorgt ervoor dat je websites over de hele wereld binnen
kunt laten.
| 1.4 Het ontstaan van HTML
HTML is uitgegroeid tot een zogenaamde standaard. Het is een wereldwijd geaccepteerde
verzameling regels, in dit geval voor het maken van websites. In 1995, 1997 en 1998 kwamen
de versies 2, 3 en 4 van HTML uit. In 2014 werd HTML 5 goedgekeurd als opvolger. Dit
erkennen gebeurt door een internationale organisatie. Die organisatie is speciaal opgericht
voor het maken en goedkeuren van standaarden voor het internet. Het is het World Wide Web
Consortium, ook wel afgekort tot W3C.
| 1.5 Zelf een HTML-bestand maken
Als je een HTML bestand wil maken open je eerst je editor en typ je er iets in. Om het
vervolgens op te slaan geef je het bestand een extensie zoals .html of .htm ipv .txt.
Je hebt verschillende editor programma’s zoals; notepad++, atom, Netbeans en kladblok.
| 1.6 HTML-code valideren
Valideren wanneer je je HTML bestand moet gaan controleren op fouten.
Je kan ook via een validatieprogramma een tekst controleren. Je plakt je code in het
programma en die controleert de fouten.
2. Een webpagina maken
| 2.1 Inleiding
Hier leer je hoe je je eigen HTML webpagina maakt en hoe je daat Hyperlinks bij gebruikt.
| 2.2 Structuur van een HTML-document
Een HTML5-bestand bestaat uit meer dan alleen tekst. Je moet ook elementen gebruiken
voorhet weergeven van hyperlinks en afbeeldingen.
Het document heeft bijvoorbeeld meestal een titel-element.
<title> Dit is de titel naam </title>
Begintag een element begint altijd met een begintag. Dit begint dan met een bracket en
dan het elementnaam.
Eindtag op het einde moet je het element weer eindigen door tussen brackets een slash en
dan het elementnaam te zetten.
| 2.3 De opbouw van een HTML-document
DOCTYPE-decleratie
Je begint een HTML-bestand altijd met een tag waarin een DOCTYPE-declaratie zit. Daarmee
vertel je de webbrowser welke versie van HTML je gebruikt. Voor HTML5 is dat:
<!DOCTYPE html>
, Html-element
Na de DOCTYPE-declaratie zet je het html-element. Dit is het hoofdelement van je bestand
waarin je al je verdere code plaatst. Het html-element mag maar één keer voorkomen in je
HTML5-bestand.
1. <!DOCTYPE html>
2. <html>
3.
4. </html>
Head-element
Het head-element bevat informatie over de website die je niet op de pagina zelf ziet. Zoals de
titel (voor in de webbrowserbalk of op het titelblad), gegevens over de auteur van de website,
informatie voor zoekmachines en gegevens over een eventueel opmaakbestand (dit komt in dit
hoofdstuk nog niet aan bod).
title-element
De titel van het tabblad (in dit voorbeeld ‘Hier komt een of andere titel’) kun je in het head-
element opgeven met het title-element:
1. <head>
2. <title> hier komt een titel </title>
3. </head>
Body-element
Zoals gezegd plaats je het body-element, net als het head-element, in het html-element. Het
body-element bevat de werkelijke inhoud van de pagina. Dus alle tekst, afbeeldingen
enzovoort die de gebruiker te zien krijgt. Dit is een voorbeeld van een HTML-bestand met de
head- en body-elementen:
1. <!DOCTYPE html>
2. <html lang= “nl”>
3. <head>
4. <title> hier komt een titel </title>
5. </head>
6.
7. <body>
8. De tekst van de website
9. </body>
10. </html>
meta-tags
In het head-element kunnen naast de titel van de website ook andere gegevens staan.
Gegevens over de auteur van de website, informatie voor zoekmachines en gegevens over een
eventueel opmaakbestand. Dit zijn de meta-tags. Een meta-tag heeft twee attributen,
namelijk ‘name’ en ‘content’.
Dit zijn de meest gebruikte;
Name Toepassing
author Naam van de auteur
Zoekwoorden voor zoekmachines, door komma's
keywords
gescheiden
description Omschrijving van de website voor zoekmachines
1. <!DOCTYPE html>
2. <html lang="nl">
3. <head>
4. <title>Een of andere titel</title>
5. <meta charset="utf-8">
