WEBTECHNOLOGIE
HFDST 1: MARKUP
1.1 HTML
1.1.1 WAT IS HTML?
HTML: markup-taal om webpagina’s te structureren, bestaat uit een verzameling van elementen die
we kunnen gebruiken om onderdelen op een webpagina te omsluiten zodat deze zich gedraagt of
gevisualiseerd wordt op een welbepaalde manier
1.1.2 HTML-ELEMENTEN OF TAGS
HTML-elementen of tags: manier om de website structuren, worden in kleine letters geschreven
Tweedelige elementen: bestaan uit een begintag (opening tag) en een eindtag (closing tag). Deze
tags omsluiten de inhoud. Een element is de tekst en de tag tezamen
• Begintag
o < kleiner dan teken
o de naam van het element
o > groter dan teken
• Eindtag
o < kleiner dan teken
o / schuine streep naar voren
o de naam van het element
o > groter dan teken
Zelfsluitende tags: sommige elementen bestaan enkel uit een tag. Dit wordt meestal gebruikt om
iets toe te voegen aan of in te sluitend in een document bv.: <img>
Nesting: elementen in andere elementen plaatsen, om de nadruk te leggen op een woord
Block-level elementen: vormen een fysiek visueel blok op een webpagina, het zijn meestal
structurele elementen die invloed hebben op de structuur van de webpagina
Een blokelement kan genest worden in een ander blokelement, maar Block-elementen naast
niet in een inline element elkaar plaatsen
Display van block-elementen: alle elementen staan onder elkaar {display: inline-block}
Voorbeelden
<address> <article> <aside> <blocknote> <canvas>
<dd> <div> <dl> <dt> <fieldset>
<figcaption> <figure> <footer> <form> <h1> - <h6>
<header> <hr> <li> <main> <nav>
<noscript> <ol> <p> <pre> <section>
<table> <tfoot> <ul> <video>
1
,Inline elementen: inline elementen worden meestal genest binnen blokelementen, ze verschijnen
meestal binnen een paragraaf van een tekst, het start niet op een nieuwe lijn
Display van inline-elementen: de elementen staan naast elkaar
Voorbeelden
<a> <abbr> <acronym> <b> <bdo>
<big> <br> <button> <cite> <code>
<dfn> <em> <i> <img> <input>
<kbd> <label> <map> <object> <output>
<q> <samp> <script> <select> <small>
<span> <strong> <sub> <sup> <textarea>
<time> <tt> <var>
1.1.3 ATTRIBUTEN
Attributen: geven HTML-elementen een bepaalde waarde. Ze bestaan uit een sleutel en hebben
meestal ook een waarde, ze bevatten informatie over het element zonder dat deze als waarde
verschijnt
Attribuut: sleutel=”waarde”
Voorbeelden
• Taal instellen: <html lang=”nl”>
• Leesrichting: <p dir=”ltf”>
• <Viewport>: instelling om de website automatisch aan te passen op een device
Globale attributen: attributen die toepasbaar alle elementen (soms zonder effect te veroorzaken)
Attribuut Betekenis
class CSS-stijlklasse(s) die op het element van toepassing zijn
id Unieke identifier van het element
lang Taal van de inhoud van het element
style Inline-stijlen met CSS (vermijden!)
title Advies, gerelateerd aan het element waartoe het behoort
hidden Element dat nog niet of niet meer relevant is
1.1.4 HTML-COMMENTAAR
Commentaar geven helpt je de code te verduidelijken, enkel zichtbaar in de broncode en nooit op de
webpagina zelf
Tag: <!--commentaar -->
Opmerking: bij elk paginabezoek moet die commentaar gedownload worden terwijl dit geen enkel
nut heeft voor de doorsnee websitebezoeker
1.1.5 WITRUIMTE IN HTML
Het aantal spaties zal geen rol spelen op de website zelf, de spaties worden teruggebracht naar een
enkele spatie
1.1.6 VALIDATIE
Nakijken of er fouten in de HTML zitten
W3 Validator: https://validator.w3.org/
2
,1.2 STRUCTUUR VAN EEN WEBPAGINA
1.2.1 HET HTML-BESTAND
Statische webpagina: bestaat uit een tekstbestand dat meestal de bestandsextensie .html heeft, zo
herkennen zowel de browser als de teksteditor het bestand als een HTML-document
Startpagina noem je best index.html
1.2.2 ANATOMIE VAN EEN HTML-DOCUMENT
1. Doctype: definieert het type van het document, het doel hiervan is om de browser te beletten te
switchen naar een eigenaardige modus die incompatibel is met de standaard specificaties, staat
helemaal bovenaan in het document
Element: <!DOCTYPE html>
2. <html>-element: bevat alle inhoud op de volledige pagina, alle andere elementen
(descendants/nakomelingen) zitten hiertussen
Element: <html> … </html>
3. <head>-element: een container voor al de dingen die je wil toevoegen aan de pagina, deze
worden niet getoond aan de bezoeker van de webpagina,
Descendant van <html>
het bevat de metagegevens van het HTML-document
First-child-element van het
(titel, omschrijving, tekenset …)
Element: <head> … </head> root-element <html>
<title>-element: bevat de titel van de html-pagina, verschijnt in het tabblad van de browser en
inde favorietenlijst
Element: <title> … </title>
4. <body>-element: bevat de eigenlijk inhoud van de webpagina die je aan de bezoeker van deze
webpagina wil tonen bv.: tekst, afbeeldingen, video’s,
Descendant van <html>
audio-bestanden
Second-child-element van
het root-element <html>
3
, 1.3 HEAD ELEMENTS
<head>-element: container voor al de dingen die je wil toevoegen aan een webpagina, die niet
getoond worden aan de bezoeker van deze webpagina
Dit element bevat de metagegevens van het HTML-document
1.3.1 <TITLE>-ELEMENT
<title>-element: bevat een zeer beknopte omschrijving van de website, maximum 80 karakters,
wordt in een zoekmachine als eerste weergegeven na het zoeken van bepaalde inhoud
Opgebouwd uit: titel van de webpagina, subdomein, domein, onderdelen worden gescheiden door
een verticale streep of een koppelteken
Element: <title> … </title
Bv.: <title> HTML | Web Technology | New Media Development </title>
1.3.2 <META>-ELEMENTEN
<meta>-element: data dat andere data beschrijft, gegevens over het document zelf: titel,
omschrijving, tekenset, stylesheetkoppelingen
1. Set van karakters (character encoding): belangrijk om de juiste paginaweergave te produceren
voor de bezoeker
o Meest gebruikte: UTF-8 (Unicode, bijna alle talen worden hiermee ondersteund)
o Tag: <meta charset=”UTF-8”>
2. Rendering engines: IE forceren om de meest up-to-date beschikbare “rendering engine” te
gebruiken
o Tag: <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
3. Omschrijving (description): beknopte omschrijving over de webpagina, maximum 24 woorden of
250 karakters
o Komt bij de resultaten te staan wanneer de website gezocht wordt via Google
o Tag: <meta name=”description” content=”…”>
4. Kernwoorden (keywords): beschrijving van de webpagina met behulp van een aantal
kernwoorden, maximum 8, moet minstens eenmaal voorkomen in de inhoud van de webpagina
o Tag: <meta name=”keywords” content=” …”>
5. Auteur (author): auteurs van de webpagina, eigenaar van de website, heeft geen invloed op de
indexering van de webpagina
o Tag: <meta name=”author” content=”…”>
6. Copyright: gegevens omtrent de intellectuele eigendom, bescherming wordt hiermee niet
verzekerd, heeft geen invloed op de indexering van de webpagina
o Tag: <meta name=”copyright” content=”…”>
7. Viewport: aanpassen van de webpagina aan de grootte van de webbrowsers, stelt in hoe de
website zich zal aanpassen aan het device, de grootte van het browersvenster
o Tag: <meta name=”viewport” content=width-device-width”>
4
HFDST 1: MARKUP
1.1 HTML
1.1.1 WAT IS HTML?
HTML: markup-taal om webpagina’s te structureren, bestaat uit een verzameling van elementen die
we kunnen gebruiken om onderdelen op een webpagina te omsluiten zodat deze zich gedraagt of
gevisualiseerd wordt op een welbepaalde manier
1.1.2 HTML-ELEMENTEN OF TAGS
HTML-elementen of tags: manier om de website structuren, worden in kleine letters geschreven
Tweedelige elementen: bestaan uit een begintag (opening tag) en een eindtag (closing tag). Deze
tags omsluiten de inhoud. Een element is de tekst en de tag tezamen
• Begintag
o < kleiner dan teken
o de naam van het element
o > groter dan teken
• Eindtag
o < kleiner dan teken
o / schuine streep naar voren
o de naam van het element
o > groter dan teken
Zelfsluitende tags: sommige elementen bestaan enkel uit een tag. Dit wordt meestal gebruikt om
iets toe te voegen aan of in te sluitend in een document bv.: <img>
Nesting: elementen in andere elementen plaatsen, om de nadruk te leggen op een woord
Block-level elementen: vormen een fysiek visueel blok op een webpagina, het zijn meestal
structurele elementen die invloed hebben op de structuur van de webpagina
Een blokelement kan genest worden in een ander blokelement, maar Block-elementen naast
niet in een inline element elkaar plaatsen
Display van block-elementen: alle elementen staan onder elkaar {display: inline-block}
Voorbeelden
<address> <article> <aside> <blocknote> <canvas>
<dd> <div> <dl> <dt> <fieldset>
<figcaption> <figure> <footer> <form> <h1> - <h6>
<header> <hr> <li> <main> <nav>
<noscript> <ol> <p> <pre> <section>
<table> <tfoot> <ul> <video>
1
,Inline elementen: inline elementen worden meestal genest binnen blokelementen, ze verschijnen
meestal binnen een paragraaf van een tekst, het start niet op een nieuwe lijn
Display van inline-elementen: de elementen staan naast elkaar
Voorbeelden
<a> <abbr> <acronym> <b> <bdo>
<big> <br> <button> <cite> <code>
<dfn> <em> <i> <img> <input>
<kbd> <label> <map> <object> <output>
<q> <samp> <script> <select> <small>
<span> <strong> <sub> <sup> <textarea>
<time> <tt> <var>
1.1.3 ATTRIBUTEN
Attributen: geven HTML-elementen een bepaalde waarde. Ze bestaan uit een sleutel en hebben
meestal ook een waarde, ze bevatten informatie over het element zonder dat deze als waarde
verschijnt
Attribuut: sleutel=”waarde”
Voorbeelden
• Taal instellen: <html lang=”nl”>
• Leesrichting: <p dir=”ltf”>
• <Viewport>: instelling om de website automatisch aan te passen op een device
Globale attributen: attributen die toepasbaar alle elementen (soms zonder effect te veroorzaken)
Attribuut Betekenis
class CSS-stijlklasse(s) die op het element van toepassing zijn
id Unieke identifier van het element
lang Taal van de inhoud van het element
style Inline-stijlen met CSS (vermijden!)
title Advies, gerelateerd aan het element waartoe het behoort
hidden Element dat nog niet of niet meer relevant is
1.1.4 HTML-COMMENTAAR
Commentaar geven helpt je de code te verduidelijken, enkel zichtbaar in de broncode en nooit op de
webpagina zelf
Tag: <!--commentaar -->
Opmerking: bij elk paginabezoek moet die commentaar gedownload worden terwijl dit geen enkel
nut heeft voor de doorsnee websitebezoeker
1.1.5 WITRUIMTE IN HTML
Het aantal spaties zal geen rol spelen op de website zelf, de spaties worden teruggebracht naar een
enkele spatie
1.1.6 VALIDATIE
Nakijken of er fouten in de HTML zitten
W3 Validator: https://validator.w3.org/
2
,1.2 STRUCTUUR VAN EEN WEBPAGINA
1.2.1 HET HTML-BESTAND
Statische webpagina: bestaat uit een tekstbestand dat meestal de bestandsextensie .html heeft, zo
herkennen zowel de browser als de teksteditor het bestand als een HTML-document
Startpagina noem je best index.html
1.2.2 ANATOMIE VAN EEN HTML-DOCUMENT
1. Doctype: definieert het type van het document, het doel hiervan is om de browser te beletten te
switchen naar een eigenaardige modus die incompatibel is met de standaard specificaties, staat
helemaal bovenaan in het document
Element: <!DOCTYPE html>
2. <html>-element: bevat alle inhoud op de volledige pagina, alle andere elementen
(descendants/nakomelingen) zitten hiertussen
Element: <html> … </html>
3. <head>-element: een container voor al de dingen die je wil toevoegen aan de pagina, deze
worden niet getoond aan de bezoeker van de webpagina,
Descendant van <html>
het bevat de metagegevens van het HTML-document
First-child-element van het
(titel, omschrijving, tekenset …)
Element: <head> … </head> root-element <html>
<title>-element: bevat de titel van de html-pagina, verschijnt in het tabblad van de browser en
inde favorietenlijst
Element: <title> … </title>
4. <body>-element: bevat de eigenlijk inhoud van de webpagina die je aan de bezoeker van deze
webpagina wil tonen bv.: tekst, afbeeldingen, video’s,
Descendant van <html>
audio-bestanden
Second-child-element van
het root-element <html>
3
, 1.3 HEAD ELEMENTS
<head>-element: container voor al de dingen die je wil toevoegen aan een webpagina, die niet
getoond worden aan de bezoeker van deze webpagina
Dit element bevat de metagegevens van het HTML-document
1.3.1 <TITLE>-ELEMENT
<title>-element: bevat een zeer beknopte omschrijving van de website, maximum 80 karakters,
wordt in een zoekmachine als eerste weergegeven na het zoeken van bepaalde inhoud
Opgebouwd uit: titel van de webpagina, subdomein, domein, onderdelen worden gescheiden door
een verticale streep of een koppelteken
Element: <title> … </title
Bv.: <title> HTML | Web Technology | New Media Development </title>
1.3.2 <META>-ELEMENTEN
<meta>-element: data dat andere data beschrijft, gegevens over het document zelf: titel,
omschrijving, tekenset, stylesheetkoppelingen
1. Set van karakters (character encoding): belangrijk om de juiste paginaweergave te produceren
voor de bezoeker
o Meest gebruikte: UTF-8 (Unicode, bijna alle talen worden hiermee ondersteund)
o Tag: <meta charset=”UTF-8”>
2. Rendering engines: IE forceren om de meest up-to-date beschikbare “rendering engine” te
gebruiken
o Tag: <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
3. Omschrijving (description): beknopte omschrijving over de webpagina, maximum 24 woorden of
250 karakters
o Komt bij de resultaten te staan wanneer de website gezocht wordt via Google
o Tag: <meta name=”description” content=”…”>
4. Kernwoorden (keywords): beschrijving van de webpagina met behulp van een aantal
kernwoorden, maximum 8, moet minstens eenmaal voorkomen in de inhoud van de webpagina
o Tag: <meta name=”keywords” content=” …”>
5. Auteur (author): auteurs van de webpagina, eigenaar van de website, heeft geen invloed op de
indexering van de webpagina
o Tag: <meta name=”author” content=”…”>
6. Copyright: gegevens omtrent de intellectuele eigendom, bescherming wordt hiermee niet
verzekerd, heeft geen invloed op de indexering van de webpagina
o Tag: <meta name=”copyright” content=”…”>
7. Viewport: aanpassen van de webpagina aan de grootte van de webbrowsers, stelt in hoe de
website zich zal aanpassen aan het device, de grootte van het browersvenster
o Tag: <meta name=”viewport” content=width-device-width”>
4
