This lesson contains 11 slides, with interactive quizzes and text slides.
Lesson duration is: 60 min
Items in this lesson
HTML-tags
Slide 1 - Slide
This item has no instructions
Leerdoel van de les
Aan het eind van de les kun je uitleggen wat container- en empty tags zijn en deze correct toepassen in HTML.
Slide 2 - Slide
This item has no instructions
Wat weet je al over HTML-tags?
Slide 3 - Mind map
This item has no instructions
HTML-tags
HTML-tags worden gebruikt om de structuur en inhoud van een webpagina te definiëren.
Slide 4 - Slide
This item has no instructions
Voorbeelden van Tags
TAG
Uitleg
<!DOCTYPE HTML>
Deze tag definieert het documenttype en de versie van HTML
<html>
Deze tag omsluit het HTML-document
<head>
Deze tag bevat metagegevens voor het document, zoals de titel en link naar CSS en JS.
<title>
Deze tag definieert de titel van het document, die wordt weergegeven in de titelbalk van de browser.
<body>
Deze tag bevat de inhoud van het document, zoals tekst, afbeeldingen, video’s, etc.
<h1> tot <h6>
Deze tags worden gebruikt om koppen te definiëren, waarbij <h1> de hoogste en <h6> de laagste kop is.
<p>
Deze tag definieert een paragraaf.
<a>
Deze tag definieert een hyperlink, die wordt gebruikt om naar andere pagina’s te linken.
.....
.....
.....
.....
Slide 5 - Slide
Wie kent deze tags? of 1 van de tags?
Kan je nog meer tags opnoemen?
Container Tags
Container tags omvatten inhoud en hebben een opening- en sluitingstags
In dit voorbeeld is <div> een container tag. Het omsluit het <p> element, dat een paragraaf definieert. Merk op dat de openingstag <div> is en de sluitingstag </div>. Andere voorbeelden van container tags zijn <body>, <head>, <p>, <a>, enz.
<div>
<p>Dit is een paragraaf binnen een div container.</p>
</div>
Slide 6 - Slide
Hoeveel container tags zie je?
Kan je nog meer container tags opnoemen?
Empty Tags
Empty tags bevatten geen inhoud en hebben slechts één tag.
In dit voorbeeld is <img> een lege tag. Het heeft attributen (src en alt), maar het heeft geen sluitingstag en bevat geen inhoud.
<img src="afbeelding.jpg" alt="Beschrijving van de afbeelding">
Slide 7 - Slide
This item has no instructions
Nested Tags
In HTML worden tags vaak binnen andere tags geplaatst - dit wordt “nesten” genoemd. Geneste tags zijn essentieel voor het structureren van HTML-documenten en het creëren van complexe webpagina’sEmpty tags bevatten geen inhoud en hebben slechts één tag.
In dit voorbeeld is <img> een lege tag. Het heeft attributen (src en alt), maar het heeft geen sluitingstag en bevat geen inhoud.
<div>
<h1>Dit is een kop</h1>
<p>Dit is een paragraaf.</p>
</div>
In dit voorbeeld is de <div> tag de buitenste tag en de <h1> en <p> tags zijn genest binnen de <div> tag.
Slide 8 - Slide
This item has no instructions
Oefening
Slide 9 - Slide
This item has no instructions
Samenvatting
Container tags omvatten inhoud en hebben een opening- en sluitingstag, terwijl empty tags geen inhoud bevatten en slechts één tag hebben.
Slide 10 - Slide
This item has no instructions
Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.
Slide 11 - Open question
De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.