HWUD04-sj2122-03-HTML-document


Document
1 / 31
next
Slide 1: Slide
Communication & multimedia designHBOStudiejaar 2

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

time-iconLesson duration is: 15 min

Items in this lesson


Document

Slide 1 - Slide

 HTML tags die we gaan leren:
<br />
p
h1, h2, h3, h4, h5, h6
b, i, u, strong, em, 
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
head
title
body

Slide 2 - Slide

Waar zie je correct geneste tags?
A
<html><body></html></body>
B
<html><body></body></html>
C
</html><body></body></html>
D
<html></body><html></body>

Slide 3 - Quiz

<html>
<head></head>
<body></body>
</html>
Welke tag vormt de buitenste HTML?
A
html
B
head
C
body
D
head & body

Slide 4 - Quiz

<html>
<head></head>
<body></body>
</html>
Welke tags vormen de binnenste HTML? (innerHTML)
A
html
B
head
C
body
D
head & body

Slide 5 - Quiz

  HTML heeft 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 Oma's, zusjes en neefjes 

Slide 6 - Slide

HTML attributes
Attribuut = eigenschap
Attributen zijn eigen schappen. Attributen van een tag plaats je in de start-tag. Een attribuut heeft meestal ook een waarde. Waardes kunnen getallen en percentages zijn, bijvoorbeeld als ze de breedte van een element aangeven. Attributen kunnen ook tekst als waarde hebben. Meestal zijn er dan maar een paar verschillende waardes die zijn toegestaan.

Slide 7 - Slide

HTML = Object Oriented
Erven gaat volgens de stamboom. Kinderen erven van hun ouders. 
Objecten van eenzelfde klasse zullen vaak een aantal eigenschappen hetzelfde hebben, of ze gedragen zich hetzelfde.
Gedrag krijgt een object meestal door javascript 
Om het ene object van het andere te kunnen onderscheiden heeft elk object (of elke tag) een unieke ID. Een object kan wel lid zijn van meerdere klasses 

Slide 8 - Slide

De structuur van een 
HTML-document
volgt een boom-structuur

Die structuur noemen we de DOM =
Document Object Model

en lijkt erg op een mappen-structuur
html
Elk html-document bevat 1 HTML-tag. Dit is de meest buitenste tag. Deze bevat dus alle andere tags en is dus meest de over-over-over-overgrootouder van het document. 
Vanuit de HTML-tag waaieren de andere tags uit, zoals de takken en wortels van een boom uitwaaieren vanuit de stam. 
De HTML-tag vormt dus de stam. Om  bij een blaadje te komen kun je de stam en haar vertakkingen aflopen tot je bij een blaadje komt.

Slide 9 - Slide

De structuur van een 
HTML-document
is heel ZEN

Het bestaat uit een 
HEAD
en een BODY
head
Elk HTML-document bevat 1 head-tag, niet meer.
Dit is het brein van het HTML-document. Het bevat informatie die we niet zien, maar die essentieel is voor de werking en het uiterlijk van het document.
body
Elk HTML-document bevat 1 body-tag. 
Hierin staat alle HTML die zichtbaar is in de browser, maar ook scripts om de web-pagina goed te laten functioneren.

Slide 10 - Slide

De structuur van een 
HTML-document:


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.
Document Root
De html-tag is de buitenste tag en vormt dus de basis van het document.
Head
Elk HTML-document bevat 1 HEAD-tag. Deze bevat vooral meta-informatie over het document.
Body
De Body bevat het zichtbare deel van de website + scripts om de website naar behoren te laten werken.
De HTML-sluitings-tag sluit het document af. Hierna mag geen enkele andere code komen. 

Slide 11 - Slide

Hoe vaak mogen de volgende tags voorkomen?
<html><head><title><body> 
A
html 1x, de rest zo vaak als nodig
B
Elk 1x max
C
Elk zo vaak als nodig
D
html en head 1x, title en body vaker

Slide 12 - Quiz

 HTML tags die we gaan leren:
<br />
p
h1, h2, h3, h4, h5, h6
b, i, u, strong, em, 
<hr />
img
&nbsp;

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
head
title
body
Dit icoontje bevat steeds een link naar W3schools. Je kunt daar de uitleg over de tags lezen en direct met de tags oefenen.

Slide 13 - Slide

De Title-tag toont de titel van het document in het tabblad. Hij hoort in de HEAD. Zoekmachines gebruiken meestal deze titel in hun zoekresultaten.


Sleep de Title in de HEAD. 
<title> myname is </title>

Slide 14 - Drag question

De Heading-tags gebruik je om koppen op je pagina te plaatsen. H1 is de grootste, H6 de kleinste.


Sleep de h1 in de BODY. 
<h1> Dit is een kop </h1>

Slide 15 - Drag question

De Paragraaf-tag gebruik je om paragrafen met wit-regels van elkaar te scheiden


Sleep de p-tag in de BODY. 
<p> Dit is een paragraaf</p>

Slide 16 - Drag question

De Break-tag gebruik je om het einde van een regel mee aan te geven, alsof je op ENTER drukt.


Sleep de br in de BODY. 
Ook als je in WORD schrijft wordt er een End-Of-Line teken aan de zin toegevoegd zodra je op ENTER drukt. Wij zien dit alleen niet. Je kunt ze wel zichtbaar maken als je wil.
Dit is een zin.<br>
na de br begint een zin op<br> 
een nieuwe regel

Slide 17 - Drag question

Meer parallellen met WORD
Het lint van WORD
HTML is oorspronkelijk bedacht om tekst op te maken (in het Engels: to format). In de symbooltjes op het lint vind je dan ook dezelfde opties als die je met HTML hebt. Sommige dingen doe je met tags (wit). Andere met attributen (groen). 
Underline - geeft onderstreepte tekst

voorbeeld:
<u>onderstreept</u>

Sub - subscript

voorbeeld
<sub>subscript</sub>

Sup - superscript

voorbeeld:
<sup>superscript text</sup>

Italic- geeft scheve tekst

voorbeeld:
<i>scheef</i>

Bold - geeft dikke tekst

voorbeeld:
<b>dik</b>

font-size - text-grootte

Met CSS kun je van HTML-tags het attribuut font-size aanpassen:
font-size: 12pxnf

font-family

Met CSS kun je van HTML-tags het attribuut font-familyaanpassen:
font-family: Calibri

h1 - Kop 1

voorbeeld:
<h1>kop</h1>

Strikethrough - geeft doorgestreepte tekst

voorbeeld:
<s>doorgestreept</s>

h2 - Kop 2 (iets kleiner dan kop1)

voorbeeld:
<h2>kop</h2>

Background-color - Achtergrondkleur

Met CSS kun je van HTML-tags het attribuut background-color aanpassen:
background-color: yellow

Color - tekst-kleur

Met CSS kun je van HTML-tags het attribuut color aanpassen:
<p style="color:red">This is a paragraph.</p>

UL - Unordered list - ongeordende lijst

voorbeeld:
<ul>
     <li>element van de lijst</li>
     <li>tweede element van de lijst</li>
</ul>

ol - ordered list - geordende lijst

voorbeeld:
<ol>
     <li>element van de lijst</li>
     <li>tweede element van de lijst</li>
</ol>

text-align - tekst-uitlijning

Met CSS kun je van HTML-tags het attribuut text-alignaanpassen:
<p style="text-align:center">This is a paragraph.</p>

table -tabel

voorbeeld:
<table>
     <tr><td>tabel-cel in de eerste rij</td><td></td></tr>
     <tr><td>tabel-cel in de eerste rij</td><td></td></tr>
</ol>

Slide 18 - Slide

In welk deel van de code hoort het element?
<HEAD>
<BODY>

Slide 19 - Drag question

Maak het HTML-document
<body>
<head>

<!DOCTYPE html>
<html>
</html>
</body>
</head>
<title></title>
<h1></h1>

Slide 20 - Drag question

Met welke tag maak je scheve tekst?
A
u
B
i
C
h1
D
b

Slide 21 - Quiz

Met welke tag maak je dikgedrukte tekst?
A
a
B
li
C
h1
D
b

Slide 22 - Quiz

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

Slide 23 - Drag question

Wat is een andere manier om tekst scheef te drukken?
hint: scheefgedrukte tekst benadrukt meestal iets.
Het engelse woord daarvoor is emphasis
A
<strong>hello</strong>
B
<div>hello</div>
C
<p>hello</p>
D
<em>hello</em>

Slide 24 - Quiz

Met welke tag zet je een titel bovenaan je pagina?
A
h1
B
h6
C
title
D
titel

Slide 25 - Quiz

Je moet de basis-html hebben voor een web-pagina. Hoe kom je hieraan?

Slide 26 - Open question

Je wil weten hoe je de paragraaf-tag moet gebruiken. Hoe vind je hierop antwoord?

Slide 27 - Open question

Hoe zouden we deze Lesson-UP nog beter kunnen maken?

Slide 28 - Open question

Zijn er nog andere onderwerpen waar je meer uitleg over wil, of andere manieren waarop je meer over een onderwerp zou willen leren?

Slide 29 - Open question

Hoe zou je meer willen leren over de onderwerpen die je nog niet goed begrijpt?
A
Klassikale uitleg
B
LessonUps
C
Online Documentatie
D
Uitleg in een Reader

Slide 30 - Quiz

Hoe vond jij deze LessonUP?
😒🙁😐🙂😃

Slide 31 - Poll