‹Return to search

bkup 03-HTML-document


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

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

time-iconLesson duration is: 15 min

Items in this lesson


Document

Slide 1 - Slide

HTML Syntax
Met Syntaxis (Engels: Syntax) worden alle regels bedoeld die de opbouw en structuur van zinnen bepaalen. M.a.w. woordvolgorde, interpunctie en grammatica.

NL = Jan zegt: “wat een mooie dag vandaag!”
FR = Jean dit « il fait beau aujourdh’ui! »
Behalve dat de Fransen andere symbolen gebruiken om aan te geven dat iemand aan het praten is, gebruikt de taal ook een andere woordvolgorde. Dit verklaart wel waarom Google Translate vertalingen tussen Nederlands en Frans vaak niet zo goed zijn. De woorden worden dan wel vertaald, maar de woordvolgorde wordt niet aangepast.
Woordvolgorde en interpunctie zijn beide verschillen zijn voorbeelden van syntaxis. 

Slide 2 - Slide

Plaats de gesproken tekst tussen aanhalingstekens.
Mieke zei:
Het is mooi weer vandaag!
"
"
' 
' 
(
)

Slide 3 - Drag question

Plaats 'vandaag' tussen haakjes.
Mieke heeft het
vandaag
te druk.
"
"
' 
' 
(
)

Slide 4 - Drag question

<HTML>innerHTML</HTML>
Net als met haakjes en aanhalingstekens
Bestaat HTML uit tekens die aangeven waar
een HTML-tag begint en eindigt
en samen omsluiten ze de innerHTML 

Slide 5 - Slide

Tag = label
HTML  bestaat dus uit labels die
het begin en het eind aangeven van stukken code
en die iets kunnen bevatten.
HTML is semantisch. De labels beschrijven goed wat de tag doet of voorstelt. 

Slide 6 - Slide

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

 HTML = a limited set of tags
Alleen bepaalde tags zijn toegestaan als je HTML schrijft.  Je kunt dus niet zomaar je eigen tags bedenken
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.

Slide 8 - 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 9 - Slide

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

Slide 10 - Quiz

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

Slide 11 - Quiz

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

Slide 12 - Quiz

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

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

Slide 14 - Quiz

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

Slide 15 - Quiz

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 16 - 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 17 - 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 18 - 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 19 - 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 20 - 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 21 - 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 22 - 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 23 - Slide

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


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

Slide 24 - 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 25 - 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 26 - 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 27 - 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 28 - Slide

In welk deel van de code hoort het element?
<HEAD>
<BODY>
<title>
<h3>
<sup>
<b>
<p>
<br>

Slide 29 - Drag question

Maak het HTML-document
<body>
<head>

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

Slide 30 - Drag question

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

Slide 31 - Quiz

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

Slide 32 - Quiz

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

Slide 33 - 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 34 - Quiz

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

Slide 35 - Quiz

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

Slide 36 - Open question

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

Slide 37 - Open question

More lessons like this

HWUD04-sj2122-03-HTML-document

- Lesson with 31 slides
Communication & multimedia designHBOStudiejaar 2

HTML - Tags

- Lesson with 30 slides
Communication & multimedia designHBOStudiejaar 1

PLOH05 - 02 - HTML - Syntax Oefening

- Lesson with 46 slides
Communication & multimedia designHBOStudiejaar 1

CSS review - HWUD04 20:21

- Lesson with 26 slides
Communication & multimedia designHBOStudiejaar 2

Webdesign - Les 2 (22/23)

- Lesson with 30 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

2. Lists en CSS Basics

- Lesson with 22 slides
ICTMBOStudiejaar 1

WEEK 2 - INFORMATICA

- Lesson with 31 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

HTML & CSS 90 - herhaling

- Lesson with 33 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5