Inspirerend, verbindend en nieuwsgierig
Een leven lang leren

05 - HTML - tags

HTML-tags
1 / 11
volgende
Slide 1: Tekstslide
ICTMBOStudiejaar 1-4

In deze les zitten 11 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 60 min

Onderdelen in deze les

HTML-tags

Slide 1 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Wat weet je al over HTML-tags?

Slide 3 - Woordweb

Deze slide heeft geen instructies

HTML-tags
HTML-tags worden gebruikt om de structuur en inhoud van een webpagina te definiëren.

Slide 4 - Tekstslide

Deze slide heeft geen instructies

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

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

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Oefening

Slide 9 - Tekstslide

Deze slide heeft geen instructies

Samenvatting
Container tags omvatten inhoud en hebben een opening- en sluitingstag, terwijl empty tags geen inhoud bevatten en slechts één tag hebben.

Slide 10 - Tekstslide

Deze slide heeft geen instructies

Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

Slide 11 - Open vraag

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.