‹Revenir à la recherche

PLOH05 - 02 - HTML - Syntax Oefening

HTML Documenten
oefenen met syntax
1 / 46
suivant
Slide 1: Diapositive
Communication & multimedia designHBOStudiejaar 1

Cette leçon contient 46 diapositives, avec quiz interactifs et diapositives de texte.

Éléments de cette leçon

HTML Documenten
oefenen met syntax

Slide 1 - Diapositive

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 - Diapositive

WWW
the World Wide Web
= de pagina's die we bezoeken als we over het internet surfen
Definitie

Slide 3 - Diapositive

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 - Diapositive

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 - Quiz


Welke 3 dingen kun je met HTML aan een web-pagina toevoegen?
A
de inhoud
B
de opmaak van tekst
C
wat elementen doen
D
de structuur

Slide 6 - Quiz

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 - 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
Waar

Slide 8 - Diapositive

Met welke extensie sla je HTML-documenten op?
A
.js
B
.css
C
.html
D
.asp

Slide 9 - Quiz

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

index
pagina

Slide 10 - Question ouverte

HTML-documenten schrijf je in een tekst-editor. Welk programma is een tekst-editor?
A
Notepad
B
Photoshop
C
Indesign
D
Word

Slide 11 - Quiz

Met welke HTML-tag zou je tekst dikgedrukt kunnen maken (bold)?
A
b
B
i
C
u
D
s

Slide 12 - Quiz

Met welke HTML-tag zou je tekst onderstreept kunnen maken (Underlined)?
A
b
B
i
C
u
D
s

Slide 13 - Quiz

Met welke HTML-tag zou je tekst doorgestreept kunnen maken (Strikethrough)?
A
b
B
i
C
u
D
s

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:
  • 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 - 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 - Diapositive

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 - Diapositive

<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 - Diapositive


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. 

<p>tekst</p>

A
<br >
B
<h1>
C
<p>
D
<s>

Slide 19 - Quiz

Waar zie je een volledige HTML-tag?
Break of Line Break - voegt een nieuwe regel in je HTML, zoals wanneer je op ENTER drukt als je een tekst schrijft.

https://www.w3schools.com/tags/tag_br.asp
A
<p></h1>
B
<p>
C
</p>
D
<p>tekst</p>

Slide 20 - Quiz

Waar zie je alleen een start-tag?
A
<p></h1>
B
<p>
C
</p>
D
<p>tekst</p>

Slide 21 - Quiz

Waar zie je alleen een eind-tag?
A
<p></h1>
B
<p>
C
</p>
D
<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.

<html>innerHTML</html>

A
(html)
B
<html>
C
{html}
D
[html]

Slide 23 - Quiz

Welke is de eind-tag van de html-tag?
A
<html?>
B
<\html>
C
</html>
D
<HTML>

Slide 24 - Quiz

Maak de start-tag voor een paragraaf-element
p
<
>
/
{
}
(
)
html
head
body
h1
h2
h3
h4
h5
h6
u
i
b
s
em
strong
sub
sup

Slide 25 - Question de remorquage

Maak de eind-tag voor een paragraaf-element
p
<
>
/
{
}
(
)
html
head
body
h1
h2
h3
h4
h5
h6
u
i
b
s
em
strong
sub
sup

Slide 26 - Question de remorquage

Maak van mij een paragraaf
Sleep de juiste tags naar de juiste locatie
<\p>
</p>
<p>
<p/>
<!p>

Slide 27 - Question de remorquage

Maak van mij een html-document
Sleep de juiste tags naar de juiste locatie
<html>
</html>
<document>
</document>
<p>
</p>

Slide 28 - Question de remorquage

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

Slide 29 - Question ouverte

 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. 
Welke HTML-versie je gebruikt bepaal je zelf door de Doctype declaration die je in je document zet.
 
Dit document vergelijkt HTML5 met oudere versies. Goed om eens door te kijken.

Slide 30 - Diapositive

 een paar tags die we gaan leren:
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.
html
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 - Diapositive



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. 

<html>inhoud van het document</html>

head
de head bevat onzichtbare informatie voor het document, zoals de titel die je bovenin het tabblad en boven zoekresultaten ziet. 

<head>onzichtbare informatie over het document</head>

body
De body bevat het zichtbare deel van de web-pagina

<body>zichtbare deel van de webpagina</body>

A
html
B
head
C
body
D
head & body

Slide 32 - Quiz



Welke tags vormen de binnenste HTML? (innerHTML)
<html>
<head></head>
<body></body>
</html>
body
De body bevat het zichtbare deel van de web-pagina

<body>zichtbare deel van de webpagina</body>

head
de head bevat onzichtbare informatie voor het document, zoals de titel die je bovenin het tabblad en boven zoekresultaten ziet. 

<head>onzichtbare informatie over het document</head>

html
De HTML-tag bevat alle HTML van het document. Het vormt dus de buitenste tag van elk HTML-document. 

<html>inhoud van het document</html>

A
html
B
head
C
body
D
head & body

Slide 33 - Quiz


In het nest zit een ....
A
keuken
B
kuiken

Slide 34 - Quiz

Stop het kuikentje in zijn nest

Slide 35 - Question de remorquage

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 - Diapositive

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 - Diapositive

Welke tag is genest?
<head><head><body><p>gewone tekst</p></body>
A
head
B
body
C
p
D
gewone tekst

Slide 38 - Quiz

Welke tags zijn niet genest?
<head></head><body><p>gewone tekst</p></body>
A
head
B
body
C
p
D
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.


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. 

<html>inhoud van het document</html>

head
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>

body
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.

<body>zichtbare deel van de webpagina</body>

Slide 40 - Diapositive

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
Break of Line Break - voegt een nieuwe regel in je HTML, zoals wanneer je op ENTER drukt als je een tekst schrijft.

https://www.w3schools.com/tags/tag_br.asp
Horizontal Rule - Horizontale lijn.

Voegt een horizontale lijn in.

Slide 41 - Diapositive

 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 naam van het attribuut + de waarde die hij aanneemt.

Slide 42 - Diapositive

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 - Quiz

Attributen plaats je in HTML in de start-tag

Slide 44 - Diapositive


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

Slide 45 - Question ouverte

Slide 46 - Diapositive

Plus de leçons comme celle-ci

bkup 03-HTML-document

- Leçon avec 37 diapositives
Communication & multimedia designHBOStudiejaar 2

HTML - Tags

- Leçon avec 30 diapositives
Communication & multimedia designHBOStudiejaar 1

HWUD04-sj2122-03-HTML-document

- Leçon avec 31 diapositives
Communication & multimedia designHBOStudiejaar 2

05 - HTML - tags

- Leçon avec 11 diapositives
ICTMBOStudiejaar 1-4

HTML & CSS 01 - 1 tmt 2.3 - introductie

- Leçon avec 30 diapositives
InformaticaWOStudiejaar 4,5

04 - HTML - head body

- Leçon avec 13 diapositives
ICTMBOStudiejaar 1-4

2 HTML: CSS

- Leçon avec 17 diapositives

Les1 - HTML101

- Leçon avec 25 diapositives
Applicatie- en mediaontwikkelaarMBOStudiejaar 1