HTML - Tags

Tags voor document-structuur

<html>

1 / 30

Slide 1: Slide

Communication & multimedia designHBOStudiejaar 1

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

Report this lesson

Items in this lesson

Tags voor document-structuur

<html>

Slide 1 - Slide

HTML

HTML is de computertaal waarin de structuur van webpagina's gecodeerd wordt. HTML vertelt de browser ook hoe en welke inhoud getoond moet worden, zoals afbeeldingen, links en tekst.

Met HTML kun je ook tekst opmaken, bijvoorbeeld
dikgedrukte, scheve, of onderstreepte tekst en koppen

Slide 2 - Slide

Met welke taal geef je een webpagina structuur?

FTP

XML

HTML

Slide 3 - Quiz

Met welke taal kun je web-teksten opmaken?

CSS

HTML

XML

HTTP

Slide 4 - 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
en samen omsluiten ze de innerHTML

HTML Syntax

Slide 5 - 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(236, 72, 77)">Genest </span>mag dus wel.

Slide 6 - Slide

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

Waar zie je een volledige HTML-tag?

<p>

</p>

<p>tekst</p>

Slide 8 - Quiz

Waar zie je een start-tag?

<p>

</p>

<p>tekst</p>

Slide 9 - Quiz

Parallellen met WORD

Het lint van WORD

HTML is oorspronkelijk bedacht om tekst op te maken (in het Engels: <span style="font-style: italic">to mark up</span>). 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 of CSS (groen). 

Underline - geeft onderstreepte tekst<div><br></div><div>voorbeeld:</div><div><span style="color: rgb(77, 198, 230)"><u>onderstreept</u></span></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/TAGS/tag_u.asp"><br></a></span></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/TAGS/tag_u.asp">W3schools</a></span></div>

Sub - subscript<div><span style="color: rgb(255, 255, 255)"><br></span></div><div><span style="color: rgb(255, 255, 255)">voorbeeld</span></div><div><span style="color: rgb(77, 198, 230)"><sub>subscript</sub></span></div><div><span style="color: rgb(77, 198, 230)"><br></span></div><div><a href="https://www.w3schools.com/TAGS/tag_sub.asp" style="color: rgb(101, 212, 97)">w3schools</a></div>

Sup - superscript<div><br></div><div>voorbeeld:</div><div><span style="color: rgb(77, 198, 230)"><sup>superscript text</sup></span></div><div><span style="color: rgb(77, 198, 230)"><br></span></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/TAGS/tag_sup.asp">W3schools</a></span></div>

Italic- geeft scheve tekst<div><br></div><div>voorbeeld:</div><div><span style="color: rgb(77, 198, 230)"><i>scheef</i></span></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/TAGS/tag_u.asp"><br></a></span></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/TAGS/tag_i.asp">W3schools</a></span></div>

Bold - geeft dikke tekst<div><br></div><div>voorbeeld:</div><div><span style="color: rgb(77, 198, 230)"><b>dik</b></span></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/TAGS/tag_u.asp"><br></a></span></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/TAGS/tag_b.asp">W3schools</a></span></div>

font-size - text-grootte<div><br></div><div>Met CSS kun je van HTML-tags het attribuut <span style="color: rgb(236, 72, 77)">font-size </span><span style="color: rgb(255, 255, 255)">aanpassen</span><span style="color: rgb(236, 72, 77)">:</span></div><div><span style="color: rgb(77, 198, 230)">font-size: 12px</span><span style="color: rgb(255, 255, 255)">nf</span></div><div><span style="color: rgb(255, 255, 255)"><br></span></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/cssref/pr_font_font-size.asp">W3schools</a></span></div>

font-family<div><br></div><div>Met CSS kun je van HTML-tags het attribuut <span style="color: rgb(236, 72, 77)">font-family</span><span style="color: rgb(255, 255, 255)">aanpassen</span><span style="color: rgb(236, 72, 77)">:</span></div><div><span style="color: rgb(77, 198, 230)">font-family: Calibri</span></div><div><span style="color: rgb(255, 255, 255)"><br></span></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/cssref/pr_font_font-family.asp">W3schools</a></span></div>

h1 - Kop 1<div><br></div><div>voorbeeld:</div><div><span style="color: rgb(77, 198, 230)"><h1>kop</h1></span></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/TAGS/tag_u.asp"><br></a></span></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/TAGS/tag_hn.asp">W3schools</a></span></div>

Strikethrough - geeft doorgestreepte tekst<div><br></div><div>voorbeeld:</div><div><span style="color: rgb(77, 198, 230)"><s>doorgestreept</s></span></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/TAGS/tag_u.asp"><br></a></span></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/TAGS/tag_s.asp">W3schools</a></span></div>

h2 - Kop 2 (iets kleiner dan kop1)<div><br></div><div>voorbeeld:</div><div><span style="color: rgb(77, 198, 230)"><h2>kop</h2></span></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/TAGS/tag_u.asp"><br></a></span></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/TAGS/tag_hn.asp">W3schools</a></span></div>

Background-color - Achtergrondkleur<div><br></div><div>Met CSS kun je van HTML-tags het attribuut <span style="color: rgb(236, 72, 77)">background-color </span><span style="color: rgb(255, 255, 255)">aanpassen</span><span style="color: rgb(236, 72, 77)">:</span></div><div><span style="color: rgb(77, 198, 230)">background-color: yellow</span></div><div><span style="color: rgb(255, 255, 255)"><br></span></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/cssref/pr_background-color.asp">W3schools</a></span></div>

Color - tekst-kleur<div><br></div><div>Met CSS kun je van HTML-tags het attribuut <span style="color: rgb(236, 72, 77)">color </span><span style="color: rgb(255, 255, 255)">aanpassen</span><span style="color: rgb(236, 72, 77)">:</span></div><div><span style="color: rgb(77, 198, 230)"><p style="color:red">This is a paragraph.</p></span></div><div><span style="color: rgb(255, 255, 255)"><br></span></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/cssref/pr_text_color.asp">W3schools</a></span></div>

UL - Unordered list - ongeordende lijst<div><br></div><div>voorbeeld:</div><div><span style="color: rgb(77, 198, 230)"><ul></span></div><div><span style="color: rgb(77, 198, 230)">     <li>element van de lijst</li></span></div><div><span style="color: rgb(77, 198, 230)">     <li>tweede element van de lijst</li>
</span></div><div><span style="color: rgb(77, 198, 230)"></ul></span><br></div><div><span style="color: rgb(77, 198, 230)"><br></span></div><div><a href="https://www.w3schools.com/TAGS/tag_li.asp" style="color: rgb(101, 212, 97)">W3schools</a></div>

ol - ordered list - geordende lijst<div><br></div><div>voorbeeld:</div><div><span style="color: rgb(77, 198, 230)"><ol></span></div><div><span style="color: rgb(77, 198, 230)">     <li>element van de lijst</li></span></div><div><span style="color: rgb(77, 198, 230)">     <li>tweede element van de lijst</li>
</span></div><div><span style="color: rgb(77, 198, 230)"></ol></span><br></div><div><span style="color: rgb(77, 198, 230)"><br></span></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/TAGS/tag_ol.asp">W3schools</a></span></div>

text-align - tekst-uitlijning<div><br></div><div>Met CSS kun je van HTML-tags het attribuut <span style="color: rgb(236, 72, 77)">text-align</span><span style="color: rgb(255, 255, 255)">aanpassen</span><span style="color: rgb(236, 72, 77)">:</span></div><div><span style="color: rgb(77, 198, 230)"><p style="text-align:center">This is a paragraph.</p></span></div><div><span style="color: rgb(255, 255, 255)"><br></span></div><div><span style="color: rgb(101, 212, 97)"><a href="https://www.w3schools.com/cssref/pr_text_text-align.asp">W3schools</a></span></div>

table -tabel<div><br></div><div>voorbeeld:</div><div><span style="color: rgb(77, 198, 230)"><table></span></div><div><span style="color: rgb(77, 198, 230)">     <tr><td>tabel-cel in de eerste rij</td><td></td></tr></span></div><div><span style="color: rgb(77, 198, 230)">     <tr><td>tabel-cel in de eerste rij</td><td></td></tr>
</span></div><div><span style="color: rgb(77, 198, 230)"></ol></span><br></div><div><span style="color: rgb(77, 198, 230)"><br></span></div><div><a href="https://www.w3schools.com/TAGS/tag_tr.asp" style="color: rgb(101, 212, 97)">W3schools</a></div>

Slide 10 - Slide

Waar zie je een eind-tag?

<p>

</p>

<p>tekst</p>

Slide 11 - Quiz

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

(html)

<html>

{html}

[html]

Slide 12 - Quiz

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

<html?>

<\html>

</html>

<HTML>

Slide 13 - Quiz

Maak de start-tag voor een paragraaf-element

{

}

(

)

html

head

body

strong

sub

sup

Slide 14 - Drag question

Maak de eind-tag voor een paragraaf-element

{

}

(

)

html

head

body

strong

sub

sup

Slide 15 - Drag question

Maak van mij een paragraaf

Sleep de juiste tags naar de juiste locatie

<\p>

</p>

<p>

<p/>

<!p>

Slide 16 - Drag question

Maak van mij een html-document

Sleep de juiste tags naar de juiste locatie

<html>

</html>

</document>

<p>

</p>

Slide 17 - Drag question

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

Slide 18 - Open question

Sleep de tags die de onzichtbare structuur van een HTML-document definieren naar het doel.

html

head

body

strong

sub

sup

Slide 19 - Drag question

Sleep de tags die gebruikt worden om tekst op te maken naar het doel

p b u i s em strong

html

head

body

h1 h2 h3 h4 h5 h6

sub sup

Slide 20 - Drag question

Met welke tag maak je scheve tekst?

Slide 21 - Quiz

Met welke tag zet je een titel bovenaan je pagina?

title

titel

Slide 22 - Quiz

Met welke tag maak je dikgedrukte tekst?

Slide 23 - Quiz

Wat is een andere manier om tekst scheef te drukken?

hint: scheefgedrukte tekst benadrukt meestal iets.<div>Het engelse woord daarvoor is <span style="color: rgb(236, 72, 77)">emphasis</span></div>

<strong>hello</strong>

<div>hello</div>

<p>hello</p>

<em>hello</em>

Slide 24 - Quiz

Welke tag vormt de buitenste HTML?

<html>

</html>

html

head

body

head & body

Slide 25 - Quiz

Welke tags vormen de binnenste HTML? (innerHTML)

<html>

</html>

html

head

body

head & body

Slide 26 - Quiz

Welke tag is genest?

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

head

body

gewone tekst

Slide 27 - Quiz

Welke tags zijn niet genest?

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

head

body

gewone tekst

Slide 28 - Quiz

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

HTML Syntax

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

Slide 30 - Slide

HTML - Tags

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Quiz

Slide 4 - Quiz

Slide 5 - Slide

Slide 6 - Slide

Slide 7 - Slide

Slide 8 - Quiz

Slide 9 - Quiz

Slide 10 - Slide

Slide 11 - Quiz

Slide 12 - Quiz

Slide 13 - Quiz

Slide 14 - Drag question

Slide 15 - Drag question

Slide 16 - Drag question

Slide 17 - Drag question

Slide 18 - Open question

Slide 19 - Drag question

Slide 20 - Drag question

Slide 21 - Quiz

Slide 22 - Quiz

Slide 23 - Quiz

Slide 24 - Quiz

Slide 25 - Quiz

Slide 26 - Quiz

Slide 27 - Quiz

Slide 28 - Quiz

Slide 29 - Slide

Slide 30 - Slide

More lessons like this

De reis van Syntax Bosselman - Arend van Dam

Berlin, the movie [History]

3TL periode 2 les 17

EM 2024 Quiz und Aussprache üben

3TL periode 2 les 18

Dé Top 2000 Quiz

EM 2024 Quiz und Aussprache üben

H1 + H2 + H3 herhaling