Inspirerend, verbindend en nieuwsgierig

Een leven lang leren

05 - HTML - tags

HTML-tags

1 / 11

Slide 1: Tekstslide

ICTMBOStudiejaar 1-4

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

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

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.

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>

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