In deze les zitten 46 slides, met interactieve quizzen en tekstslides.
Onderdelen in deze les
HTML Documenten
oefenen met syntax
Slide 1 - Tekstslide
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 - Tekstslide
WWW
the World Wide Web
= de pagina's die we bezoeken als we over het internet surfen
Definitie
Slide 3 - Tekstslide
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.
In programmeertaal is woordvolgorde vaak strict en bepaalt interpunctie hoe de computer of browser de code interpreteert en uitvoert.
Slide 4 - Tekstslide
Wat betekent de afkorting HTML?
A
Hyper Text Makeup Language
B
Hyper Text Markup Language
C
Hyper Tech Markup Language
D
Hyper Tag Markup Language
Slide 5 - Quizvraag
Welke 3 dingen kun jemet HTML aan een web-pagina toevoegen?
A
de inhoud
B
de opmaak van tekst
C
wat elementen doen
D
de structuur
Slide 6 - Quizvraag
wat is waar?
mijndocument.html
A
.html is de extensie
B
.html is het bestandstype
C
.html is de intentie
D
.html is het bestandsformaat
Slide 7 - Quizvraag
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
Waar
Slide 8 - Tekstslide
Met welke extensie sla je HTML-documenten op?
A
.js
B
.css
C
.html
D
.asp
Slide 9 - Quizvraag
Vul de volgende bestandsnamen aan zodat de documenten worden opgeslagen als HTML-documenten:
index pagina
Slide 10 - Open vraag
HTML-documenten schrijf je in een tekst-editor. Welk programma is een tekst-editor?
A
Notepad
B
Photoshop
C
Indesign
D
Word
Slide 11 - Quizvraag
Met welke HTML-tag zou je tekst dikgedrukt kunnen maken (bold)?
A
b
B
i
C
u
D
s
Slide 12 - Quizvraag
Met welke HTML-tag zou je tekst onderstreept kunnen maken (Underlined)?
A
b
B
i
C
u
D
s
Slide 13 - Quizvraag
Met welke HTML-tag zou je tekst doorgestreept kunnen maken (Strikethrough)?
A
b
B
i
C
u
D
s
Slide 14 - Quizvraag
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:
een foutmelding
een onverwacht resultaat - dingen staan ergens anders dan verwacht, of ze werken niet.
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 crasht.
A
De code ' breekt': het werkt niet, of je krijgt een error-message
B
Niks, syntax maakt toch niks uit?
C
Je krijgt een onverwacht resultaat
D
Je computer loopt vast
Slide 15 - Quizvraag
<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 - Tekstslide
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 - Tekstslide
<html>innerHTML</html>
Een HTML-tag bestaat dus uit
1. een begin-tag
2. een eind-tag en
3. innerHTML
<html> is een voorbeeld van een start-tag. De start-tag bestaat zelf uit een start-teken: < een tag: html
en een eind-teken: >
De syntax van een start-tag is dus: <tag>
1
</html> is een voorbeeld van een eind-tag. Ook de eind-tag bestaat uit een start-teken: <
Vervolgens komt een teken dat aangeeft dat het om een eind-teken gaat: / Vervolgens de tag die wordt afgesloten: html
en het einde-teken van de tag: >
De syntax van een eind-tag is dus: </tag>
2
De innerHTML kan uit vanalles bestaan. Afbeeldingen, tekst, links en HTML. HTML kan alleen volledig in een andere HTML-tag voorkomen. ze mogen niet 'deels overlappen'. Genest mag dus wel.
3
Slide 18 - Tekstslide
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.
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.
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 - Tekstslide
Welke tag vormt de buitenste HTML?
<html>
<head></head>
<body></body>
</html>
html
De HTML-tag bevat alle HTML van het document. Het vormt dus de buitenste tag van elk HTML-document.
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 - Tekstslide
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 - Tekstslide
Welke tag is genest?
<head><head><body><p>gewone tekst</p></body>
A
head
B
body
C
p
D
gewone tekst
Slide 38 - Quizvraag
Welke tags zijn niet genest?
<head></head><body><p>gewone tekst</p></body>
A
head
B
body
C
p
D
gewone tekst
Slide 39 - Quizvraag
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.
De HTML-sluitings-tag sluit het document af. Hierna mag geen enkele andere code komen.
html (document root)
De HTML-tag bevat alle HTML van het document. Het vormt dus de buitenste tag van elk HTML-document.
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.
<head>onzichtbare informatie over het document</head>
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 naamvan het attribuut + de waardedie hij aanneemt.
Slide 42 - Tekstslide
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.
A
pijl & boog
B
laarzen
C
zwaard
D
hij leeft
Slide 43 - Quizvraag
Attributen plaats je in HTML in de start-tag
Slide 44 - Tekstslide
Schrijf een HTML-start-tag voor een lijn (hr) met een breedte (width) van "150%" als attribuut.