Inspirerend, verbindend en nieuwsgierig

Een leven lang leren

05 - HTML - tags

HTML-tags

1 / 11

Slide 1: Slide

ICTMBOStudiejaar 1-4

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.

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.

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>

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