05 - HTML - tags

HTML-tags

1 / 11

Slide 1: Diapositive

ICTMBOStudiejaar 1-4

Cette leçon contient 11 diapositives, avec quiz interactifs et diapositives de texte.

La durée de la leçon est: 60 min

Éléments de cette leçon

HTML-tags

Slide 1 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

Wat weet je al over HTML-tags?

Slide 3 - Carte mentale

Cet élément n'a pas d'instructions

HTML-tags

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

Slide 4 - Diapositive

Cet élément n'a pas d'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 - Diapositive

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

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

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

Oefening

Slide 9 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 11 - Question ouverte

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.

05 - HTML - tags

Éléments de cette leçon

Slide 1 - Diapositive

Slide 2 - Diapositive

Slide 3 - Carte mentale

Slide 4 - Diapositive

Slide 5 - Diapositive

Slide 6 - Diapositive

Slide 7 - Diapositive

Slide 8 - Diapositive

Slide 9 - Diapositive

Slide 10 - Diapositive

Slide 11 - Question ouverte

Plus de leçons comme celle-ci

BBL Week 2

8.4.2 - Words are not enough

01 - HTML - intro

Week 2 - Les 1

HTML101

HTML & CSS: Blokkendoos

Les1 - HTML101

HTML & CSS: Meer opmaak en blokken