PLOH05 - 02 - HTML - Syntax Oefening

HTML Documenten

oefenen met syntax

1 / 46

Slide 1: Slide

Communication & multimedia designHBOStudiejaar 1

This lesson contains 46 slides, with interactive quizzes and text slides.

Items in this lesson

HTML Documenten

oefenen met syntax

Slide 1 - Slide

HTML

In deze les gaan we oefenen met een aantal basis-HTML-tags.

We herhalen de tags die je tegenkwam in de syntax-les

en voegen er een paar nieuwe aan toe.

Het doel is te leren een HTML-document te maken.

Slide 2 - Slide

WWW

the World Wide Web

= de pagina's die we bezoeken als we over het internet surfen

Definitie

Slide 3 - Slide

het internet

= het netwerk van kabels en computers waar het web op is opgeslagen en waarover data wereldwijd wordt doorgestuurd en opgevraagd.

Definitie

Woordvolgorde en leestekens hebben in gewone taal veel impact op de betekenis van woorden. In gesproken taal hebben zelfs intonatie en volume impact op hoe je iets opvat. <div><br></div><div>In programmeertaal is woordvolgorde vaak strict en bepaalt interpunctie hoe de computer of browser de code interpreteert en uitvoert.</div>

Slide 4 - Slide

Wat betekent de afkorting HTML?

Hyper Text Makeup Language

Hyper Text Markup Language

Hyper Tech Markup Language

Hyper Tag Markup Language

Slide 5 - Quiz

Welke 3 dingen kun je met HTML aan een web-pagina toevoegen?

de inhoud

de opmaak van tekst

wat elementen doen

de structuur

Slide 6 - Quiz

wat is waar?

mijndocument.html

.html is de extensie

.html is het bestandstype

.html is de intentie

.html is het bestandsformaat

Slide 7 - Quiz

Wat is waar over de extensie?

De extensie vertelt de Operating-System (OS) welke software gebruikt moet worden om het bestand correct weer te geven.

De extensie vertelt ons om welk type bestand het gaat.

Waar

Slide 8 - Slide

Met welke extensie sla je HTML-documenten op?

.js

.css

.html

.asp

Slide 9 - Quiz

Vul de volgende bestandsnamen aan zodat de documenten worden opgeslagen als HTML-documenten:

index
pagina

Slide 10 - Open question

HTML-documenten schrijf je in een tekst-editor. Welk programma is een tekst-editor?

Notepad

Photoshop

Indesign

Word

Slide 11 - Quiz

Met welke HTML-tag zou je tekst dikgedrukt kunnen maken (bold)?

Slide 12 - Quiz

Met welke HTML-tag zou je tekst onderstreept kunnen maken (Underlined)?

Slide 13 - Quiz

Met welke HTML-tag zou je tekst doorgestreept kunnen maken (Strikethrough)?

Slide 14 - Quiz

Wat gebeurt er als je je niet aan de syntax regels houdt bij het programmeren? Kies er 3

Antwoord

Computers zijn niet flexibel. Het enige wat ze kunnen is de opdrachten uitvoeren die jij ze geeft. Ze 'weten' wat ze moeten doen doordat ze weten hoe ze een programmeertaal moeten interpreteren. Als jij je niet aan de syntax regels van die taal houdt, of je maakt een foutje, dan weet de computer niet meer wat hij moet doen. Dit kan resulteren in:<div><ul><li>een foutmelding</li><li>een onverwacht resultaat - dingen staan ergens anders dan verwacht, of ze werken niet. </li><li>de computer loopt vast - als de computer met iets bezig was dat meerdere keren herhaald moest worden, dan kan het gebeuren dat hij dat oneindig blijft doen, omdat het stop-signaal nooit gegeven wordt. Je computer loopt dan vast omdat hij oneindig bezig blijft, of tot zijn geheugen volloopt en hij echt <span style="font-style: italic">crasht</span>. </li></ul></div>

De code ' breekt': het werkt niet, of je krijgt een error-message

Niks, syntax maakt toch niks uit?

Je krijgt een onverwacht resultaat

Je computer loopt vast

Slide 15 - Quiz

<HTML>innerHTML</HTML>

Net als met haakjes en aanhalingstekens

Bestaat HTML uit tekens die aangeven waar

iets begint en eindigt.

De code tussen < en > noemen we tags
2 tags omsluiten vaak iets: de innerHTML

HTML Syntax

Slide 16 - Slide

Tag = label

HTML bestaat dus uit labels die

het begin en het eind aangeven van stukken code.

HTML tags kunnen iets bevatten.

HTML is semantisch. De labels beschrijven
goed wat de tag doet of voorstelt.

Slide 17 - Slide

<html>innerHTML</html>

Een HTML-tag bestaat dus uit

1. een begin-tag

2. een eind-tag en

3. innerHTML

<span style="font-weight: bold"><html></span> is een voorbeeld van een start-tag. <br>De start-tag bestaat zelf uit een start-teken: <span style="font-weight: bold"><</span><br>een tag: <span style="font-weight: bold">html</span><div>en een eind-teken: <span style="font-weight: bold">></span></div><div><br></div><div><span style="font-weight: 700">De syntax van een start-tag is dus: <tag></span></div>

<span style="font-weight: bold"></html></span> is een voorbeeld van een eind-tag. <br>Ook de eind-tag bestaat uit een start-teken: <span style="font-weight: bold"><</span><div>Vervolgens komt een teken dat aangeeft dat het om een eind-teken gaat: <span style="font-weight: bold">/</span><br>Vervolgens de tag die wordt afgesloten: <span style="font-weight: bold">html</span><div>en het einde-teken van de tag: <span style="font-weight: bold">></span></div><div><br></div><div><span style="font-weight: 700">De syntax van een eind-tag is dus: </tag></span></div></div>

De innerHTML kan uit vanalles bestaan. Afbeeldingen, tekst, links en HTML. HTML kan alleen <span style="font-weight: bold; text-decoration-line: underline">volledig in</span> een andere HTML-tag voorkomen. ze mogen niet 'deels overlappen'. <span style="font-weight: bold; color: rgb(248, 200, 45)">Genest </span>mag dus wel.

Slide 18 - Slide

Met welke HTML-tag zou je een paragraaf kunnen definiëren?

paragraaf

Plaats een paragraaf tekst in deze tag om witregels ervoor en erna te krijgen. <div><br></div><div><span style="color: rgb(77, 198, 230)"><p>tekst</p></span></div><div><br></div><div><a href="https://www.w3schools.com/tags/tag_p.asp" style="color: rgb(101, 212, 97)">W3schools.com</a></div>

<br >

<h1>

<p>

<s>

Slide 19 - Quiz

Waar zie je een volledige HTML-tag?

<div>Break of Line Break - voegt een nieuwe regel in je HTML, zoals wanneer je op ENTER drukt als je een tekst schrijft.</div><div><br></div><a href="https://www.w3schools.com/tags/tag_br.asp">https://www.w3schools.com/tags/tag_br.asp</a>

<p>

</p>

<p>tekst</p>

Slide 20 - Quiz

Waar zie je alleen een start-tag?

<p>

</p>

<p>tekst</p>

Slide 21 - Quiz

Waar zie je alleen een eind-tag?

<p>

</p>

<p>tekst</p>

Slide 22 - Quiz

Welke is de start-tag van de html-tag?

html

De html-tag is de buitenste tag van elk HTML-document. Het bevat dus het hele HTML-document.<div><br><div><span style="color: rgb(77, 198, 230)"><html>innerHTML</html></span></div><div><br></div><div><span style="color: rgb(77, 198, 230)"><a href="https://www.w3schools.com/tags/tag_html.asp">W3schools.com</a></span></div></div>

(html)

<html>

{html}

[html]

Slide 23 - Quiz

Welke is de eind-tag van de html-tag?

<html?>

<\html>

</html>

<HTML>

Slide 24 - Quiz

Maak de start-tag voor een paragraaf-element

{

}

(

)

html

head

body

strong

sub

sup

Slide 25 - Drag question

Maak de eind-tag voor een paragraaf-element

{

}

(

)

html

head

body

strong

sub

sup

Slide 26 - Drag question

Maak van mij een paragraaf

Sleep de juiste tags naar de juiste locatie

<\p>

</p>

<p>

<p/>

<!p>

Slide 27 - Drag question

Maak van mij een html-document

Sleep de juiste tags naar de juiste locatie

<html>

</html>

</document>

<p>

</p>

Slide 28 - Drag question

Schrijf nu zelf een paragraaf-tag met als innerHTML de zin "dit is een paragraaf."

Slide 29 - Open question

HTML = a limited set of tags

Alleen bepaalde tags zijn toegestaan als je HTML schrijft. Je kunt dus niet zomaar je eigen tags bedenken

De laatste versie is HTML5

Welke tags zijn toegestaan hangt af van de versie HTML die je gebruikt. HTML5 kent bijvoorbeeld veel meer tags dan HTML 3.2. <div>Welke HTML-versie je gebruikt bepaal je zelf door de Doctype declaration die je in je document zet.</div><div> <br><span style="color: rgb(77, 198, 230)">Dit document <a href="https://visualwebz.com/website-resources/Website-Design-Tutorials/HTML5-web-development.pdf">vergelijkt HTML5 met oudere versies</a>. Goed om eens door te kijken.</span></div><div><br></div>

Slide 30 - Slide

een paar tags die we gaan leren:

h1, h2, h3, h4, h5, h6

b, i, u, strong, em, s

Dit zijn de meest-voorkomende tags. Ze geven het HTML-document structuur (linker rijtje) of je gebruikt ze om tekst op te maken (rechter rijtje). In andere lessen zul je nog meer tags leren.

Zie ook W3schools.com

Bovenstaande tags zijn allemaal gelinkt naar een informatiepagina op W3schools. Deze website vormt een heel handig naslagwerk voor het toepassen van HTML. Steeds als je het W3-symbool ziet, bevat het een link naar W3schools.

Slide 31 - Slide

Welke tag vormt de buitenste HTML?

<html>

</html>

html

<div>De HTML-tag bevat alle HTML van het document. Het vormt dus de buitenste tag van elk HTML-document. </div><div><br></div><div><span style="color: rgb(77, 198, 230)"><html>inhoud van het document</html></span><br></div><div><br></div><div><a href="https://www.w3schools.com/tags/tag_html.asp" style="color: rgb(101, 212, 97)">W3schools.com</a></div>

head

<div>de head bevat onzichtbare informatie voor het document, zoals de titel die je bovenin het tabblad en boven zoekresultaten ziet. </div><div><br></div><div><span style="color: rgb(77, 198, 230)"><head>onzichtbare informatie over het document</head></span><br></div><div><br></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/tags/tag_head.asp">W3schools.com</a></span></div>

body

<div>De body bevat het zichtbare deel van de web-pagina</div><div><br></div><div><span style="color: rgb(77, 198, 230)"><body>zichtbare deel van de webpagina</body></span><br></div><div><br></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/tags/tag_body.asp">W3schools.com</a></span></div>

html

head

body

head & body

Slide 32 - Quiz

Welke tags vormen de binnenste HTML? (innerHTML)

<html>

</html>

body

head

html

head

body

head & body

Slide 33 - Quiz

In het nest zit een ....

keuken

kuiken

Slide 34 - Quiz

Stop het kuikentje in zijn nest

Slide 35 - Drag question

Nesten

In programmeertaal hebben we het over nesten als een stuk code in een andere stuk code voorkomt.

<outerHTML>innerHTML<outerHTML>

HTML mag je oneindig nesten.

Definitie

Slide 36 - Slide

HTML heeft ook familie

We zeggen ook wel dat de buitenste HTML de 'ouder' is en de geneste HTML het 'kind'. Je krijgt dan een soort familie-stamboom met grootouders, zusjes, neefjes etc.

Slide 37 - Slide

Welke tag is genest?

<head><head><body><p>gewone tekst</p></body>

head

body

gewone tekst

Slide 38 - Quiz

Welke tags zijn niet genest?

<head></head><body><p>gewone tekst</p></body>

head

body

gewone tekst

Slide 39 - Quiz

De onzichtbare structuur van HTML-documenten:

Doctype declaration

Dit is het enige wat in een HTML-document buiten de HTML-tags mag voorkomen. Het vertelt de browser welke versie HTML-gebruikt is. Deze declaratie hoort bij HTML5. Hoewel hij anders is dan andere tags noemen we het ook een tag.<div><br><div><br></div></div>

De HTML-sluitings-tag sluit het document af. Hierna mag geen enkele andere code komen. 

html (document root)

head

<div>Elk HTML-tag bevat 1 head-tag. Deze bevat onzichtbare informatie voor het document, zoals de titel die je bovenin het tabblad en boven zoekresultaten ziet en links naar CSS en scripts die essentieel zijn voor de pagina. </div><div><br></div><div><span style="color: rgb(77, 198, 230)"><head>onzichtbare informatie over het document</head></span><br></div><div><br></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/tags/tag_head.asp">W3schools.com</a></span></div>

body

<div>Elk HTML-bestand bevat 1 body-tag. Deze bevat het zichtbare deel van de web-pagina + scripts om de website naar behoren te laten werken.</div><div><br></div><div><span style="color: rgb(77, 198, 230)"><body>zichtbare deel van de webpagina</body></span><br></div><div><br></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/tags/tag_body.asp">W3schools.com</a></span></div>

Slide 40 - Slide

Empty tags

Sommige tags kunnen niks bevatten. Deze zijn altijd leeg. Empty tags hoeft je niet af te sluiten. De hele tag bestaat uit alleen maar de start-tag:

<br>

<hr>

Definitie

<div>Horizontal Rule - Horizontale lijn.</div><div><br></div><div>Voegt een horizontale lijn in.<br></div><div><br></div><div><a href="https://www.w3schools.com/tags/tag_hr.asp">w3schools</a><br></div>

Slide 41 - Slide

HTML tags hebben eigenchappen

HTML tags lijken op objecten: ze kunnen eigenschappen hebben. Dit noemen we een attribuut.

het label links is bijvoorbeeld rood.

m.a.w. de kleur = rood

Een attribuut bestaat dus uit de <span style="color: rgb(248, 200, 45)">naam</span><span style="color: rgb(236, 72, 77)"> </span>van het attribuut + de <span style="color: rgb(248, 200, 45)">waarde</span><span style="color: rgb(236, 72, 77)"> </span>die hij aanneemt.

Slide 42 - Slide

Welke attributen heeft deze man?

De man houdt een pijl en boog vast en hij heeft laaren aan. Dit zijn voorwerpen die hij heeft. In games herkennen we voorwerpen vaak als attrbuten. In een game zou zo'n karakter nog meer eigenschappen hebben, bijvoorbeeld of hij leeft of dood is, of hoeveel gezondheid hij heeft, of dat hij betoverd of gewond is. 

pijl & boog

laarzen

zwaard

hij leeft

Slide 43 - Quiz

Attributen plaats je in HTML in de start-tag

Slide 44 - Slide

Schrijf een HTML-start-tag voor een
lijn (hr) met een breedte (width) van "150%" als attribuut.

Slide 45 - Open question

Slide 46 - Slide

PLOH05 - 02 - HTML - Syntax Oefening

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Slide

Slide 4 - Slide

Slide 5 - Quiz

Slide 6 - Quiz

Slide 7 - Quiz

Slide 8 - Slide

Slide 9 - Quiz

Slide 10 - Open question

Slide 11 - Quiz

Slide 12 - Quiz

Slide 13 - Quiz

Slide 14 - Quiz

Slide 15 - Quiz

Slide 16 - Slide

Slide 17 - Slide

Slide 18 - Slide

Slide 19 - Quiz

Slide 20 - Quiz

Slide 21 - Quiz

Slide 22 - Quiz

Slide 23 - Quiz

Slide 24 - Quiz

Slide 25 - Drag question

Slide 26 - Drag question

Slide 27 - Drag question

Slide 28 - Drag question

Slide 29 - Open question

Slide 30 - Slide

Slide 31 - Slide

Slide 32 - Quiz

Slide 33 - Quiz

Slide 34 - Quiz

Slide 35 - Drag question

Slide 36 - Slide

Slide 37 - Slide

Slide 38 - Quiz

Slide 39 - Quiz

Slide 40 - Slide

Slide 41 - Slide

Slide 42 - Slide

Slide 43 - Quiz

Slide 44 - Slide

Slide 45 - Open question

Slide 46 - Slide

More lessons like this

De reis van Syntax Bosselman - Arend van Dam

Word

Berlin, the movie [History]

Mentoraat - les 2

3TL periode 2 les 17

Zomerquiz 2026 vo

Prague the movie

Barcelona the movie