Basis HTML: Leer de grondbeginselen van webontwikkeling

Basis HTML: Leer de grondbeginselen van webontwikkeling

Leerdoel: Begrijpen wat HTML is

HTML staat voor HyperText Markup Language en is de basis van webontwikkeling.

Leg de basisprincipes van HTML uit en zorg ervoor dat studenten begrijpen wat HTML is en waarvoor het wordt gebruikt.

Wat weet je al over HTML?

HTML-tags en -elementen

HTML maakt gebruik van tags en elementen om de inhoud van een webpagina te structureren.

Leg uit wat tags en elementen zijn en geef voorbeelden van veelgebruikte tags zoals , , ,

, , en

.

Structuur van een HTML-pagina

Een standaard HTML-pagina bestaat uit een doctype-declaratie, een HTML-element, een head-element en een body-element.

Laat de structuur van een HTML-pagina zien en leg uit wat elk element doet.

Tekst opmaken met HTML

HTML biedt verschillende tags om tekst op te maken, zoals

Demonstreer hoe deze tags worden gebruikt om tekst op te maken en benadruk het belang van semantisch correcte HTML.

Afbeeldingen toevoegen

Afbeeldingen kunnen worden toegevoegd met de img-tag en moeten een alt-attribuut bevatten voor toegankelijkheid.

Laat zien hoe het toevoegen van een afbeelding werkt en waarom het belangrijk is om een alt-attribuut te gebruiken.

Links maken

Links worden gemaakt met de link-tag en kunnen worden gebruikt om te koppelen naar andere pagina's of bestanden.

Laat zien hoe links worden gemaakt en geef voorbeelden van verschillende soorten links.

Lijsten maken

Er zijn twee soorten lijsten in HTML: geordende en ongeordende lijsten.

Leg uit hoe lijsten worden gemaakt en geef voorbeelden van beide soorten lijsten.

Tabellen maken

Tabellen worden gebruikt om gegevens op te maken en te structureren.

Demonstreer hoe tabellen worden gemaakt en waarvoor ze worden gebruikt.

Formulieren maken

Formulieren kunnen worden gebruikt om informatie van gebruikers te verzamelen, zoals naam, e-mailadres en bericht.

Laat zien hoe formulieren worden gemaakt en hoe verschillende soorten invoerelementen worden gebruikt, zoals , en <select>.</div></div></div><div class="lesson-overview-pin-list-item"><div class="rel"><div class="lesson-overview-pin-container"><div class="pin-view relative lesson-overview-pin thumbPreview"><div id="slide" data-allow-image-zoom="1" class="pin-container view-mode slide-color-1 slide-layout-2 "><div class="slide-color-1 slide-layout-2 content-background"></div><div data-component-id="image" comp-remote-event="click" class="image opacity-1"></div><div data-component-id="image2" comp-remote-event="click" class="image2 opacity-1"></div><div id="text1" class="text text-comp text1 text-align-undefined font-size-60 font-undefined"><div class="text-inner"><b>Validatie en debugging</b></div></div><div id="text2" class="text text-comp text2 text-align-undefined font-size-60 font-undefined"><div class="text-inner">Validatie is het proces van het controleren van de syntaxis van HTML-code, terwijl debugging het proces is van het opsporen en oplossen van fouten in de code.</div></div><div class="view-components"></div></div></div></div></div><div class="lesson-overview-pin-list-item-notes"><h4 class="ui-heading ui-heading--h3 lesson-overview-pin-title">Slide <!-- -->12<!-- --> -<!-- --> <!-- -->Slide</h4><div>Geef tips voor het valideren en debuggen van HTML-code en leg uit waarom dit belangrijk is voor webontwikkeling.</div></div></div><div class="lesson-overview-pin-list-item"><div class="rel"><div class="lesson-overview-pin-container"><div class="pin-view relative lesson-overview-pin thumbPreview"><div id="openQuestion" data-allow-image-zoom="0" class="pin-container view-mode openQuestion-color-9 openQuestion-layout-1 "><div class="openQuestion-color-9 openQuestion-layout-1 content-background"></div><div id="title" class="question text-align-1 font-size-60"> <span>Schrijf 3 dingen op die je deze les hebt geleerd.</span><br/></div><div class="component-area"><div class="scale-up"><div class="view-components"></div></div></div><div class="placeholder-answers"></div></div></div></div></div><div class="lesson-overview-pin-list-item-notes"><h4 class="ui-heading ui-heading--h3 lesson-overview-pin-title">Slide <!-- -->13<!-- --> -<!-- --> <!-- -->Open question</h4><div>De leerlingen voeren hier drie dingen in die ze in deze les hebben geleerd. Hiermee geven ze aan wat hun eigen leerrendement van deze les is.</div></div></div><div class="lesson-overview-pin-list-item"><div class="rel"><div class="lesson-overview-pin-container"><div class="pin-view relative lesson-overview-pin thumbPreview"><div id="openQuestion" data-allow-image-zoom="0" class="pin-container view-mode openQuestion-color-9 openQuestion-layout-1 "><div class="openQuestion-color-9 openQuestion-layout-1 content-background"></div><div id="title" class="question text-align-1 font-size-60"> <span>Schrijf 2 dingen op waarover je meer wilt weten.</span><br/></div><div class="component-area"><div class="scale-up"><div class="view-components"></div></div></div><div class="placeholder-answers"></div></div></div></div></div><div class="lesson-overview-pin-list-item-notes"><h4 class="ui-heading ui-heading--h3 lesson-overview-pin-title">Slide <!-- -->14<!-- --> -<!-- --> <!-- -->Open question</h4><div>De leerlingen voeren hier twee dingen in waarover ze meer zouden willen weten. Hiermee vergroot je niet alleen betrokkenheid, maar geef je hen ook meer eigenaarschap.</div></div></div><div class="lesson-overview-pin-list-item"><div class="rel"><div class="lesson-overview-pin-container"><div class="pin-view relative lesson-overview-pin thumbPreview"><div id="openQuestion" data-allow-image-zoom="0" class="pin-container view-mode openQuestion-color-9 openQuestion-layout-1 "><div class="openQuestion-color-9 openQuestion-layout-1 content-background"></div><div id="title" class="question text-align-1 font-size-60"> <span>Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.</span><br/></div><div class="component-area"><div class="scale-up"><div class="view-components"></div></div></div><div class="placeholder-answers"></div></div></div></div></div><div class="lesson-overview-pin-list-item-notes"><h4 class="ui-heading ui-heading--h3 lesson-overview-pin-title">Slide <!-- -->15<!-- --> -<!-- --> <!-- -->Open question</h4><div>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.</div></div></div></div></div></div></div><div class="lesson-page__more-like-this"><div class="lesson-page-section page-center"><h2 class="lesson-page__header">More lessons like this</h2><div class="lesson-summary-cards"><div class="base-summary-card lesson-summary-card"><a class="lesson-summary-card__inner" href="/en/lesson/YN6B9cuFK88zGBLBo"><div class="lesson-summary-card__top"><div class="preview-thumbnail"><div class="aspect-ratio-box" style="padding-top:73.16017316017316%"><div class="aspect-ratio-box-content"><picture><source type="image/webp" srcSet="https://lh3.googleusercontent.com/uz91yOUpniAUDa-9mg8MU-Sk0ZexCbh73LtTl6NqBgdGg9l6kKYA5DKZi5z-k9YAf-9hhFsyAfmoGnq61L5o2_xG1DDOoPfNer5dqQ=s330-rw 1x, https://lh3.googleusercontent.com/uz91yOUpniAUDa-9mg8MU-Sk0ZexCbh73LtTl6NqBgdGg9l6kKYA5DKZi5z-k9YAf-9hhFsyAfmoGnq61L5o2_xG1DDOoPfNer5dqQ=s660-rw 2x, https://lh3.googleusercontent.com/uz91yOUpniAUDa-9mg8MU-Sk0ZexCbh73LtTl6NqBgdGg9l6kKYA5DKZi5z-k9YAf-9hhFsyAfmoGnq61L5o2_xG1DDOoPfNer5dqQ=s990-rw 3x"/><source srcSet="https://lh3.googleusercontent.com/uz91yOUpniAUDa-9mg8MU-Sk0ZexCbh73LtTl6NqBgdGg9l6kKYA5DKZi5z-k9YAf-9hhFsyAfmoGnq61L5o2_xG1DDOoPfNer5dqQ=s330 1x, https://lh3.googleusercontent.com/uz91yOUpniAUDa-9mg8MU-Sk0ZexCbh73LtTl6NqBgdGg9l6kKYA5DKZi5z-k9YAf-9hhFsyAfmoGnq61L5o2_xG1DDOoPfNer5dqQ=s660 2x, https://lh3.googleusercontent.com/uz91yOUpniAUDa-9mg8MU-Sk0ZexCbh73LtTl6NqBgdGg9l6kKYA5DKZi5z-k9YAf-9hhFsyAfmoGnq61L5o2_xG1DDOoPfNer5dqQ=s990 3x"/><img class="preview-thumbnail__image" src="https://lh3.googleusercontent.com/uz91yOUpniAUDa-9mg8MU-Sk0ZexCbh73LtTl6NqBgdGg9l6kKYA5DKZi5z-k9YAf-9hhFsyAfmoGnq61L5o2_xG1DDOoPfNer5dqQ=s330" width="231" height="169" alt=""/></picture></div></div></div></div><div class="lesson-summary-card__bottom"><h3 class="lesson-summary-card__title">Kennismaking met HTML Programmeren</h3><div class="lesson-summary-card__meta-info"><time class="lesson-summary-card__creation-date" dateTime="2024-02-16T08:52:53.173Z">February 2024</time> - <!-- -->Lesson with<!-- --> <strong>14<!-- --> <!-- -->slides</strong></div><div class="ui-tags lesson-summary-card__tags"></div></div></a></div><div class="base-summary-card lesson-summary-card"><a class="lesson-summary-card__inner" href="/en/lesson/KXEW3rSJza7ufhR8B"><div class="lesson-summary-card__top"><div class="preview-thumbnail"><div class="aspect-ratio-box" style="padding-top:73.16017316017316%"><div class="aspect-ratio-box-content"><svg viewBox="0 0 660 483" class="preview-thumbnail-image" width="231" height="169"><path d="M0 0h660v372H0zm0 391h160v92H0zm180 0h160v92H180zm180 0h160v92H360zm180 0h120v92H540z" fill="#e0e0e0" fill-rule="evenodd"></path></svg></div></div></div></div><div class="lesson-summary-card__bottom"><h3 class="lesson-summary-card__title">IAV HTML les 1</h3><div class="lesson-summary-card__meta-info"><time class="lesson-summary-card__creation-date" dateTime="2021-09-23T13:46:34.924Z">September 2021</time> - <!-- -->Lesson with<!-- --> <strong>18<!-- --> <!-- -->slides</strong></div><div class="ui-tags lesson-summary-card__tags"><span title="media, vormgeving en ict" class="ui-tag ui-tag--small bg-yellow">media, vormgeving en ict</span><span title="Middelbare school" class="ui-tag ui-tag--small bg-cyan">Middelbare school</span><span title="vmbo" class="ui-tag ui-tag--small bg-cyan">vmbo</span><span title="Leerjaar 3,4" class="ui-tag ui-tag--small bg-cyan">Leerjaar 3,4</span></div></div></a></div><div class="base-summary-card lesson-summary-card"><a class="lesson-summary-card__inner" href="/en/lesson/8gGkzjvyxoqaRwdcH"><div class="lesson-summary-card__top"><div class="preview-thumbnail"><div class="aspect-ratio-box" style="padding-top:73.16017316017316%"><div class="aspect-ratio-box-content"><picture><source type="image/webp" srcSet="https://lh3.googleusercontent.com/C4iZabBAoyNPhPmbfzrTKzOXblpQ6FrrgwAEB-iMCwrk1BDjpO3ADzE4WFbxQLlbLs08aVydKrMfoSn2F-eeY6fZxCT5iGCbvVzAbN0H=s330-rw 1x, https://lh3.googleusercontent.com/C4iZabBAoyNPhPmbfzrTKzOXblpQ6FrrgwAEB-iMCwrk1BDjpO3ADzE4WFbxQLlbLs08aVydKrMfoSn2F-eeY6fZxCT5iGCbvVzAbN0H=s660-rw 2x, https://lh3.googleusercontent.com/C4iZabBAoyNPhPmbfzrTKzOXblpQ6FrrgwAEB-iMCwrk1BDjpO3ADzE4WFbxQLlbLs08aVydKrMfoSn2F-eeY6fZxCT5iGCbvVzAbN0H=s990-rw 3x"/><source srcSet="https://lh3.googleusercontent.com/C4iZabBAoyNPhPmbfzrTKzOXblpQ6FrrgwAEB-iMCwrk1BDjpO3ADzE4WFbxQLlbLs08aVydKrMfoSn2F-eeY6fZxCT5iGCbvVzAbN0H=s330 1x, https://lh3.googleusercontent.com/C4iZabBAoyNPhPmbfzrTKzOXblpQ6FrrgwAEB-iMCwrk1BDjpO3ADzE4WFbxQLlbLs08aVydKrMfoSn2F-eeY6fZxCT5iGCbvVzAbN0H=s660 2x, https://lh3.googleusercontent.com/C4iZabBAoyNPhPmbfzrTKzOXblpQ6FrrgwAEB-iMCwrk1BDjpO3ADzE4WFbxQLlbLs08aVydKrMfoSn2F-eeY6fZxCT5iGCbvVzAbN0H=s990 3x"/><img class="preview-thumbnail__image" src="https://lh3.googleusercontent.com/C4iZabBAoyNPhPmbfzrTKzOXblpQ6FrrgwAEB-iMCwrk1BDjpO3ADzE4WFbxQLlbLs08aVydKrMfoSn2F-eeY6fZxCT5iGCbvVzAbN0H=s330" width="231" height="169" alt=""/></picture></div></div></div></div><div class="lesson-summary-card__bottom"><h3 class="lesson-summary-card__title">01 - Javascript - wat is javascript</h3><div class="lesson-summary-card__meta-info"><time class="lesson-summary-card__creation-date" dateTime="2024-03-19T07:12:15.242Z">March 2024</time> - <!-- -->Lesson with<!-- --> <strong>15<!-- --> <!-- -->slides</strong></div><div class="ui-tags lesson-summary-card__tags"><span title="ICT" class="ui-tag ui-tag--small bg-yellow">ICT</span><span title="MBO" class="ui-tag ui-tag--small bg-cyan">MBO</span><span title="Studiejaar 1,2" class="ui-tag ui-tag--small bg-cyan">Studiejaar 1,2</span></div></div></a></div><div class="base-summary-card lesson-summary-card"><a class="lesson-summary-card__inner" href="/en/lesson/TNZE6LKDRhw2xGQmC"><div class="lesson-summary-card__top"><div class="preview-thumbnail"><div class="aspect-ratio-box" style="padding-top:73.16017316017316%"><div class="aspect-ratio-box-content"><picture><source type="image/webp" srcSet="https://lh3.googleusercontent.com/TcMRwC8fDXN3LZCN14v1toU-unx8upNIQGniU9Ik-gUX8Bv2MxcG_crM2LG67r6JW41y7C8Lf44ttYA13vQYwOJan9chsbboLhVu_Pj_=s330-rw 1x, https://lh3.googleusercontent.com/TcMRwC8fDXN3LZCN14v1toU-unx8upNIQGniU9Ik-gUX8Bv2MxcG_crM2LG67r6JW41y7C8Lf44ttYA13vQYwOJan9chsbboLhVu_Pj_=s660-rw 2x, https://lh3.googleusercontent.com/TcMRwC8fDXN3LZCN14v1toU-unx8upNIQGniU9Ik-gUX8Bv2MxcG_crM2LG67r6JW41y7C8Lf44ttYA13vQYwOJan9chsbboLhVu_Pj_=s990-rw 3x"/><source srcSet="https://lh3.googleusercontent.com/TcMRwC8fDXN3LZCN14v1toU-unx8upNIQGniU9Ik-gUX8Bv2MxcG_crM2LG67r6JW41y7C8Lf44ttYA13vQYwOJan9chsbboLhVu_Pj_=s330 1x, https://lh3.googleusercontent.com/TcMRwC8fDXN3LZCN14v1toU-unx8upNIQGniU9Ik-gUX8Bv2MxcG_crM2LG67r6JW41y7C8Lf44ttYA13vQYwOJan9chsbboLhVu_Pj_=s660 2x, https://lh3.googleusercontent.com/TcMRwC8fDXN3LZCN14v1toU-unx8upNIQGniU9Ik-gUX8Bv2MxcG_crM2LG67r6JW41y7C8Lf44ttYA13vQYwOJan9chsbboLhVu_Pj_=s990 3x"/><img class="preview-thumbnail__image" src="https://lh3.googleusercontent.com/TcMRwC8fDXN3LZCN14v1toU-unx8upNIQGniU9Ik-gUX8Bv2MxcG_crM2LG67r6JW41y7C8Lf44ttYA13vQYwOJan9chsbboLhVu_Pj_=s330" width="231" height="169" alt=""/></picture></div></div></div></div><div class="lesson-summary-card__bottom"><h3 class="lesson-summary-card__title">01 - Javascript - wat is javascript</h3><div class="lesson-summary-card__meta-info"><time class="lesson-summary-card__creation-date" dateTime="2024-03-07T08:06:27.979Z">March 2024</time> - <!-- -->Lesson with<!-- --> <strong>12<!-- --> <!-- -->slides</strong></div><div class="ui-tags lesson-summary-card__tags"><span title="ICT" class="ui-tag ui-tag--small bg-yellow">ICT</span><span title="MBO" class="ui-tag ui-tag--small bg-cyan">MBO</span><span title="Studiejaar 1,2" class="ui-tag ui-tag--small bg-cyan">Studiejaar 1,2</span></div></div></a></div><div class="base-summary-card lesson-summary-card"><a class="lesson-summary-card__inner" href="/en/lesson/EZcKaToLd2uXw6NCR"><div class="lesson-summary-card__top"><div class="preview-thumbnail"><div class="aspect-ratio-box" style="padding-top:73.16017316017316%"><div class="aspect-ratio-box-content"><picture><source type="image/webp" srcSet="https://lh3.googleusercontent.com/XvpKyxSbAa51RR5dLEgk4U368GCNZ3UP5FrY9Dlm7eaWBqvOKdJI7DA4RlwYirEYdYgKavD0k9vHy3FpNYu01EQDJFXdwgavglrYCA=s330-rw 1x, https://lh3.googleusercontent.com/XvpKyxSbAa51RR5dLEgk4U368GCNZ3UP5FrY9Dlm7eaWBqvOKdJI7DA4RlwYirEYdYgKavD0k9vHy3FpNYu01EQDJFXdwgavglrYCA=s660-rw 2x, https://lh3.googleusercontent.com/XvpKyxSbAa51RR5dLEgk4U368GCNZ3UP5FrY9Dlm7eaWBqvOKdJI7DA4RlwYirEYdYgKavD0k9vHy3FpNYu01EQDJFXdwgavglrYCA=s990-rw 3x"/><source srcSet="https://lh3.googleusercontent.com/XvpKyxSbAa51RR5dLEgk4U368GCNZ3UP5FrY9Dlm7eaWBqvOKdJI7DA4RlwYirEYdYgKavD0k9vHy3FpNYu01EQDJFXdwgavglrYCA=s330 1x, https://lh3.googleusercontent.com/XvpKyxSbAa51RR5dLEgk4U368GCNZ3UP5FrY9Dlm7eaWBqvOKdJI7DA4RlwYirEYdYgKavD0k9vHy3FpNYu01EQDJFXdwgavglrYCA=s660 2x, https://lh3.googleusercontent.com/XvpKyxSbAa51RR5dLEgk4U368GCNZ3UP5FrY9Dlm7eaWBqvOKdJI7DA4RlwYirEYdYgKavD0k9vHy3FpNYu01EQDJFXdwgavglrYCA=s990 3x"/><img class="preview-thumbnail__image" src="https://lh3.googleusercontent.com/XvpKyxSbAa51RR5dLEgk4U368GCNZ3UP5FrY9Dlm7eaWBqvOKdJI7DA4RlwYirEYdYgKavD0k9vHy3FpNYu01EQDJFXdwgavglrYCA=s330" width="231" height="169" alt=""/></picture></div></div></div></div><div class="lesson-summary-card__bottom"><h3 class="lesson-summary-card__title">04 - HTML - head body</h3><div class="lesson-summary-card__meta-info"><time class="lesson-summary-card__creation-date" dateTime="2024-01-22T17:56:33.408Z">January 2024</time> - <!-- -->Lesson with<!-- --> <strong>13<!-- --> <!-- -->slides</strong></div><div class="ui-tags lesson-summary-card__tags"><span title="ICT" class="ui-tag ui-tag--small bg-yellow">ICT</span><span title="MBO" class="ui-tag ui-tag--small bg-cyan">MBO</span><span title="Studiejaar 1-4" class="ui-tag ui-tag--small bg-cyan">Studiejaar 1-4</span></div></div></a></div><div class="base-summary-card lesson-summary-card"><a class="lesson-summary-card__inner" href="/en/lesson/LEnQJMYcpdmQcdajg"><div class="lesson-summary-card__top"><div class="preview-thumbnail"><div class="aspect-ratio-box" style="padding-top:73.16017316017316%"><div class="aspect-ratio-box-content"><picture><source type="image/webp" srcSet="https://lh3.googleusercontent.com/tMTmr1DnHhYt3VCKRicJa9fkM2L4EU0-S6berqB0TaJTXpIiV91DCB17jtc23T3yWdvqqBDyzlKguCAVQqX4Z-SowDiGr6zp748DApk=s330-rw 1x, https://lh3.googleusercontent.com/tMTmr1DnHhYt3VCKRicJa9fkM2L4EU0-S6berqB0TaJTXpIiV91DCB17jtc23T3yWdvqqBDyzlKguCAVQqX4Z-SowDiGr6zp748DApk=s660-rw 2x, https://lh3.googleusercontent.com/tMTmr1DnHhYt3VCKRicJa9fkM2L4EU0-S6berqB0TaJTXpIiV91DCB17jtc23T3yWdvqqBDyzlKguCAVQqX4Z-SowDiGr6zp748DApk=s990-rw 3x"/><source srcSet="https://lh3.googleusercontent.com/tMTmr1DnHhYt3VCKRicJa9fkM2L4EU0-S6berqB0TaJTXpIiV91DCB17jtc23T3yWdvqqBDyzlKguCAVQqX4Z-SowDiGr6zp748DApk=s330 1x, https://lh3.googleusercontent.com/tMTmr1DnHhYt3VCKRicJa9fkM2L4EU0-S6berqB0TaJTXpIiV91DCB17jtc23T3yWdvqqBDyzlKguCAVQqX4Z-SowDiGr6zp748DApk=s660 2x, https://lh3.googleusercontent.com/tMTmr1DnHhYt3VCKRicJa9fkM2L4EU0-S6berqB0TaJTXpIiV91DCB17jtc23T3yWdvqqBDyzlKguCAVQqX4Z-SowDiGr6zp748DApk=s990 3x"/><img class="preview-thumbnail__image" src="https://lh3.googleusercontent.com/tMTmr1DnHhYt3VCKRicJa9fkM2L4EU0-S6berqB0TaJTXpIiV91DCB17jtc23T3yWdvqqBDyzlKguCAVQqX4Z-SowDiGr6zp748DApk=s330" width="231" height="169" alt=""/></picture></div></div></div></div><div class="lesson-summary-card__bottom"><h3 class="lesson-summary-card__title">Leer HTML in 8 stappen</h3><div class="lesson-summary-card__meta-info"><time class="lesson-summary-card__creation-date" dateTime="2023-03-21T12:10:50.380Z">March 2023</time> - <!-- -->Lesson with<!-- --> <strong>17<!-- --> <!-- -->slides</strong></div><div class="ui-tags lesson-summary-card__tags"><span title="Informatiekunde" class="ui-tag ui-tag--small bg-yellow">Informatiekunde</span><span title="Middelbare school" class="ui-tag ui-tag--small bg-cyan">Middelbare school</span><span title="havo, vwo" class="ui-tag ui-tag--small bg-cyan">havo, vwo</span><span title="Leerjaar 3" class="ui-tag ui-tag--small bg-cyan">Leerjaar 3</span></div></div></a></div><div class="base-summary-card lesson-summary-card"><a class="lesson-summary-card__inner" href="/en/lesson/SsapfFNqh5hEW2KiD"><div class="lesson-summary-card__top"><div class="preview-thumbnail"><div class="aspect-ratio-box" style="padding-top:73.16017316017316%"><div class="aspect-ratio-box-content"><picture><source type="image/webp" srcSet="https://lh3.googleusercontent.com/Tb5xbDEN7b6tQomg5b8Lmu1e4obLMFrGTp1KFigi_OEprYQsX9UKVZMSRlea3PcX1UuaPhR0k2HkZbAb8QVyjJWG2xEljKSTI2x2I7w=s330-rw 1x, https://lh3.googleusercontent.com/Tb5xbDEN7b6tQomg5b8Lmu1e4obLMFrGTp1KFigi_OEprYQsX9UKVZMSRlea3PcX1UuaPhR0k2HkZbAb8QVyjJWG2xEljKSTI2x2I7w=s660-rw 2x, https://lh3.googleusercontent.com/Tb5xbDEN7b6tQomg5b8Lmu1e4obLMFrGTp1KFigi_OEprYQsX9UKVZMSRlea3PcX1UuaPhR0k2HkZbAb8QVyjJWG2xEljKSTI2x2I7w=s990-rw 3x"/><source srcSet="https://lh3.googleusercontent.com/Tb5xbDEN7b6tQomg5b8Lmu1e4obLMFrGTp1KFigi_OEprYQsX9UKVZMSRlea3PcX1UuaPhR0k2HkZbAb8QVyjJWG2xEljKSTI2x2I7w=s330 1x, https://lh3.googleusercontent.com/Tb5xbDEN7b6tQomg5b8Lmu1e4obLMFrGTp1KFigi_OEprYQsX9UKVZMSRlea3PcX1UuaPhR0k2HkZbAb8QVyjJWG2xEljKSTI2x2I7w=s660 2x, https://lh3.googleusercontent.com/Tb5xbDEN7b6tQomg5b8Lmu1e4obLMFrGTp1KFigi_OEprYQsX9UKVZMSRlea3PcX1UuaPhR0k2HkZbAb8QVyjJWG2xEljKSTI2x2I7w=s990 3x"/><img class="preview-thumbnail__image" src="https://lh3.googleusercontent.com/Tb5xbDEN7b6tQomg5b8Lmu1e4obLMFrGTp1KFigi_OEprYQsX9UKVZMSRlea3PcX1UuaPhR0k2HkZbAb8QVyjJWG2xEljKSTI2x2I7w=s330" width="231" height="169" alt=""/></picture></div></div></div></div><div class="lesson-summary-card__bottom"><h3 class="lesson-summary-card__title">Html en Css - les 2</h3><div class="lesson-summary-card__meta-info"><time class="lesson-summary-card__creation-date" dateTime="2023-04-20T13:45:52.608Z">April 2023</time> - <!-- -->Lesson with<!-- --> <strong>23<!-- --> <!-- -->slides</strong></div><div class="ui-tags lesson-summary-card__tags"><span title="Informatica" class="ui-tag ui-tag--small bg-yellow">Informatica</span><span title="Middelbare school" class="ui-tag ui-tag--small bg-cyan">Middelbare school</span><span title="vwo" class="ui-tag ui-tag--small bg-cyan">vwo</span><span title="Leerjaar 4" class="ui-tag ui-tag--small bg-cyan">Leerjaar 4</span></div></div></a></div><div class="base-summary-card lesson-summary-card"><a class="lesson-summary-card__inner" href="/en/lesson/nZM6hBD2LNg8sj5QC"><div class="lesson-summary-card__top"><div class="preview-thumbnail"><div class="aspect-ratio-box" style="padding-top:73.16017316017316%"><div class="aspect-ratio-box-content"><picture><source type="image/webp" srcSet="https://lh3.googleusercontent.com/TdQwtjE7swTBA1B9d-RRUX-o8bvNYZEoWVdZ5CaarItvKbcpF48EuiL-LvMSddg8zuT3ChV3lQrTguCorsTuMaYHRfUhvc7M52TeiWw=s330-rw 1x, https://lh3.googleusercontent.com/TdQwtjE7swTBA1B9d-RRUX-o8bvNYZEoWVdZ5CaarItvKbcpF48EuiL-LvMSddg8zuT3ChV3lQrTguCorsTuMaYHRfUhvc7M52TeiWw=s660-rw 2x, https://lh3.googleusercontent.com/TdQwtjE7swTBA1B9d-RRUX-o8bvNYZEoWVdZ5CaarItvKbcpF48EuiL-LvMSddg8zuT3ChV3lQrTguCorsTuMaYHRfUhvc7M52TeiWw=s990-rw 3x"/><source srcSet="https://lh3.googleusercontent.com/TdQwtjE7swTBA1B9d-RRUX-o8bvNYZEoWVdZ5CaarItvKbcpF48EuiL-LvMSddg8zuT3ChV3lQrTguCorsTuMaYHRfUhvc7M52TeiWw=s330 1x, https://lh3.googleusercontent.com/TdQwtjE7swTBA1B9d-RRUX-o8bvNYZEoWVdZ5CaarItvKbcpF48EuiL-LvMSddg8zuT3ChV3lQrTguCorsTuMaYHRfUhvc7M52TeiWw=s660 2x, https://lh3.googleusercontent.com/TdQwtjE7swTBA1B9d-RRUX-o8bvNYZEoWVdZ5CaarItvKbcpF48EuiL-LvMSddg8zuT3ChV3lQrTguCorsTuMaYHRfUhvc7M52TeiWw=s990 3x"/><img class="preview-thumbnail__image" src="https://lh3.googleusercontent.com/TdQwtjE7swTBA1B9d-RRUX-o8bvNYZEoWVdZ5CaarItvKbcpF48EuiL-LvMSddg8zuT3ChV3lQrTguCorsTuMaYHRfUhvc7M52TeiWw=s330" width="231" height="169" alt=""/></picture></div></div></div></div><div class="lesson-summary-card__bottom"><h3 class="lesson-summary-card__title">HTML101</h3><div class="lesson-summary-card__meta-info"><time class="lesson-summary-card__creation-date" dateTime="2022-09-04T15:26:01.791Z">September 2022</time> - <!-- -->Lesson with<!-- --> <strong>22<!-- --> <!-- -->slides</strong></div><div class="ui-tags lesson-summary-card__tags"><span title="Applicatie- en mediaontwikkelaar" class="ui-tag ui-tag--small bg-yellow">Applicatie- en mediaontwikkelaar</span><span title="MBO" class="ui-tag ui-tag--small bg-cyan">MBO</span><span title="Studiejaar 1" class="ui-tag ui-tag--small bg-cyan">Studiejaar 1</span></div></div></a></div><div class="lesson-summary-card-dummy dummy"></div><div class="lesson-summary-card-dummy dummy"></div><div class="lesson-summary-card-dummy dummy"></div><div class="lesson-summary-card-dummy dummy"></div><div class="lesson-summary-card-dummy dummy"></div><div class="lesson-summary-card-dummy dummy"></div><div class="lesson-summary-card-dummy dummy"></div><div class="lesson-summary-card-dummy dummy"></div><div class="lesson-summary-card-dummy dummy"></div><div class="lesson-summary-card-dummy dummy"></div></div></div></div></div></div><footer class="search-footer css-1dhfdau"><a class="rocket-logo" href="/en/lessons/"><svg width="30" height="30" viewBox="0 0 32 32" fill-rule="evenodd" preserveAspectRatio="xMidYMid meet" fill="currentColor"><g fill-rule="evenodd" preserveAspectRatio="xMidYMid meet"><path d="M8.10791 25.6014C8.33859 24.7836 8.18588 24.3339 7.91093 24.0892C7.66614 23.8141 7.21641 23.6614 6.39859 23.8921C3.80876 24.6263 3.50293 27.9212 3.46838 28.5316C4.07886 28.497 7.37377 28.1912 8.10791 25.6014" fill="currentColor"></path><path d="M8.03871 13.3709C8.47292 12.5253 8.92879 11.7061 9.40109 10.9199C7.51798 10.7412 4.01009 11.1499 0 15.2499L1.5208 16.7375C1.5208 16.7375 4.63417 15.6975 6.72659 16.1621C7.13255 15.2182 7.57142 14.281 8.03871 13.3709Z" fill="currentColor"></path><path d="M18.6291 23.9612C17.7188 24.4287 16.7815 24.8676 15.8378 25.2733C16.3024 27.3657 15.2623 30.4791 15.2623 30.4791L16.7501 32C20.8502 27.9898 21.2588 24.4819 21.0799 22.5989C20.2939 23.0711 19.4747 23.5269 18.6291 23.9612Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M22.1536 9.7563C22.0063 9.90357 21.8134 9.97721 21.6204 9.97721C21.4273 9.97721 21.2344 9.90357 21.0871 9.7563C20.7926 9.46174 20.7926 8.98436 21.0871 8.68981C21.2344 8.54253 21.4273 8.46889 21.6204 8.46889C21.8134 8.46889 22.0063 8.54253 22.1536 8.68981C22.4482 8.98436 22.4482 9.46174 22.1536 9.7563ZM23.4181 8.58657C22.9216 8.09024 22.2711 7.84189 21.6204 7.84189C20.9698 7.84189 20.3192 8.09024 19.8226 8.58657C18.8298 9.57942 18.8298 11.1892 19.8226 12.182C20.3192 12.6783 20.9698 12.9265 21.6204 12.9265C22.2711 12.9265 22.9216 12.6783 23.4181 12.182C24.4109 11.1892 24.4109 9.57942 23.4181 8.58657Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M24.422 13.1896C23.6729 13.9388 22.6769 14.3516 21.6174 14.3516C20.5579 14.3516 19.5618 13.9388 18.8126 13.1896C17.2662 11.6427 17.2662 9.12583 18.8128 7.5789C19.5618 6.8297 20.5579 6.41693 21.6174 6.41693C22.6769 6.41693 23.6729 6.8297 24.4221 7.57908C25.9686 9.12583 25.9686 11.6427 24.422 13.1896ZM30.9834 1.01628C30.3114 0.344152 29.1914 0.000688939 27.7839 0.000688939C24.2013 0.000688939 18.7534 2.22408 14.0692 6.90929C13.0907 7.88788 12.3126 9.04967 11.545 10.2006C10.7261 11.4288 9.98479 12.7086 9.31066 14.0218C8.78207 15.0514 8.29436 16.1023 7.8493 17.1703C7.68605 17.5616 7.52879 17.9549 7.3781 18.351C7.23452 18.7291 7.09657 19.1094 6.96863 19.4929C6.98083 19.5401 6.99366 19.5873 7.00685 19.6341C7.0807 19.8887 7.16874 20.1392 7.26813 20.3852C7.36653 20.6285 7.47572 20.8675 7.59541 21.1009C7.95687 21.8076 8.41497 22.4662 8.96286 23.0414C9.53789 23.5894 10.1964 24.0476 10.9029 24.4092C11.1364 24.5288 11.3752 24.638 11.6185 24.7364C11.8643 24.8358 12.1149 24.9239 12.3694 24.9979C12.4162 25.011 12.4633 25.0239 12.5106 25.0361C12.894 24.908 13.2744 24.7701 13.6523 24.6264C14.0482 24.4757 14.4415 24.3185 14.8327 24.1552C15.9005 23.7099 16.9513 23.2223 17.9806 22.6936C19.2935 22.0194 20.573 21.2777 21.801 20.4587C22.9517 19.6909 24.1132 18.9126 25.0916 17.934C31.6159 11.4084 33.366 3.3994 30.9834 1.01628" fill="currentColor"></path></g></svg><span>LessonUp</span></a><div class="search-footer-nav-container"><div class="search-footer-nav"><a href="/en/terms" class="search-footer-nav-item">Terms</a><a href="/en/privacy" class="search-footer-nav-item">Privacy Statement</a><a href="/en/cookie-statement" class="search-footer-nav-item">Cookie Statement</a><a href="/en/contact" class="search-footer-nav-item">Contact</a></div></div><div class="search-footer-slot-right"><div class="language-switch language-switch-navbar"><div class="language-switch-button icon icon-language"><span class="selected-language">English</span><svg transform="" width="13" height="7" viewBox="0 0 13 7" class="picker-chevron"><path d="M0 0h13L6.5 7z" fill="#5A4D4C" fill-rule="evenodd"></path></svg></div></div></div></footer></div></div><div class="toast-provider"></div></div> <script nonce="a262fd91-69e8-471f-9b87-8212f8a89582"> window.__INITIAL_STATE = {"search":{"lessonResults":undefined,"planResults":undefined},"searchPins":{"results":undefined,"forComponent":undefined},"user":{"user":undefined},"ratings":{"userRatings":{}},"cluster":{"results":undefined,"clusterId":undefined,"forLessonId":undefined},"lesson":{"lessonDetails":{"lesson":{"_id":"eWmydZ2yZ4d8DST5M","user":"Pyj8vaMrqEwD2Z5dA","name":"Basis HTML: Leer de grondbeginselen van webontwikkeling","region":["nl"],"country":["nl"],"showPhases":true,"sharing":{"sharePublic":true,"shareDate":new Date("2024-05-22T12:24:28.669Z")},"privacy":"public","schoolType":[],"levels":[],"years":[],"subjects":[],"creationDate":new Date("2023-03-24T14:07:07.028Z"),"pinCount":15,"pinCountForLesson":15,"pinCountForStudent":15,"location":{"explorer":"rvGXR4n5HSMtZ32Cz","folder":"4e25c56f9152b24c2959d054"},"products":[],"order":"a2","modifiedDate":new Date("2024-07-12T11:28:21.179Z"),"openendDate":new Date("2024-07-12T11:28:21.481Z"),"thumbnail":{"url":"https:\u002F\u002Flh3.googleusercontent.com\u002F2rZRHi8W_B3gqLuzYEbGe0mR_kJM14MMzR2SX4LTUIqNyq-K0OjK3wwnyAw61MHvtXCxM8B_nEkgUK-nG9BWgBjJoXHQUi3APl2t9nw","modifiedDate":new Date("2024-05-22T13:00:41.237Z"),"hash":"def570b1fbede34127f5d34d744a856b","v":3},"information":undefined,"description":undefined},"channel":undefined,"accessTypes":{"copySearch":true,"shareWithStudents":false,"edit":false,"teach":true,"test":false,"userDoesNotHaveProduct":true},"moreLikeThis":[{"_id":"YN6B9cuFK88zGBLBo","_index":"lessons-nl-1642004322162","doc":{"_id":"YN6B9cuFK88zGBLBo","lesson":{"_id":"YN6B9cuFK88zGBLBo","user":"2iQLJhGtySx9adBf4","name":"Kennismaking met HTML Programmeren","region":["nl"],"country":["nl"],"showPhases":true,"sharing":{"sharePublic":false},"privacy":"public","schoolType":[],"levels":[],"years":[],"subjects":[],"creationDate":"2024-02-16T08:52:53.173Z","pinCount":14,"pinCountForLesson":14,"pinCountForStudent":14,"location":{"explorer":"FeQSaqjpEJT45viny","folder":"FeQSaqjpEJT45viny"},"version":"v1","source":"openAi","products":[],"order":"a6","modifiedDate":"2024-02-16T08:59:43.591Z","openendDate":"2024-02-16T08:52:53.396Z","thumbnail":{"url":"https:\u002F\u002Flh3.googleusercontent.com\u002Fuz91yOUpniAUDa-9mg8MU-Sk0ZexCbh73LtTl6NqBgdGg9l6kKYA5DKZi5z-k9YAf-9hhFsyAfmoGnq61L5o2_xG1DDOoPfNer5dqQ","modifiedDate":"2024-02-16T09:03:41.305Z","hash":"0b6fad64c77482557b3323360531c33b","v":3}},"firstPin":{"_id":"APzG9afqWdJ36iisz","user":"2iQLJhGtySx9adBf4","lesson":"YN6B9cuFK88zGBLBo","item":{"type":"slide","custom":{"text1":"Kennismaking met HTML Programmeren","text2":"","layout":1,"color":301,"colorbg":"#001343","colorfg":"#ffffff","opacity":1,"fontSize1":60,"fontSize2":60,"align2":2},"notes":{"text":""},"components":[]},"order":1001,"creationDate":"2024-02-16T08:52:53.359Z","isPublic":true,"isFirstPin":true},"indexedContent":{"important":["Kennismaking met HTML Programmeren","Leerdoel","Aan het einde van de les kun je basis HTML-codering begrijpen en toepassen.","Wat is HTML?","HTML staat voor HyperText Markup Language. Het is de standaardtaal voor het maken van webpagina's en webapps.","Structuur van een HTML-pagina","Een HTML-pagina bestaat uit verschillende elementen, waaronder de doctype, de html-tag, de head en body secties.","HTML-tags en elementen","HTML-tags worden gebruikt om elementen op een webpagina te definiëren. Voorbeeld: voor de hoofdtekst van een pagina.","Opmaak van tekst","Met HTML kun je tekst opmaken, zoals vetgedrukt, cursief, en onderstreept, door gebruik te maken van specifieke tags.","Afbeeldingen en hyperlinks","Je kunt afbeeldingen en hyperlinks toevoegen aan een webpagina met de en tags.","Lijsten en tabellen","HTML ondersteunt het maken van geordende en ongeordende lijsten, evenals tabellen om gegevens te structureren.","Introductie tot CSS","CSS (Cascading Style Sheets) wordt gebruikt om de vormgeving en opmaak van webpagina's te beheren.","Schrijf 3 dingen op die je deze les hebt geleerd.","Schrijf 2 dingen op waarover je meer wilt weten.","Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.","Waarvoor wordt CSS gebruikt?","Kennismaking met HTML Programmeren"],"normal":["De leerlingen voeren hier drie dingen in die ze in deze les hebben geleerd. Hiermee geven ze aan wat hun eigen leerrendement van deze les is.","De leerlingen voeren hier twee dingen in waarover ze meer zouden willen weten. Hiermee vergroot je niet alleen betrokkenheid, maar geef je hen ook meer eigenaarschap.","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\u002Fbeheersen, maar ook een goed startpunt voor een volgende les.","Vormgeving en opmaak van webpagina's","Het beheren van databases","Het ontwerpen van grafische afbeeldingen","Het schrijven van server-side code"]},"pinHashes":["0b854bcbb311e55e22d2ac4d46d0c71b01235a3893635f5b7a9a3c34d8dc947d","0f2e8c6efbc14e42fc4b0ba408c63a087fcdbb3918901e522d47930046ef0b48","4519ce8f0655a0bd5349b6a380a7e4f27f9dbe65f3396680dc976ab39f6e8ee8","457bb3367303cfb8611dc518a3b88775add55ade6347c14f953f0fe4cb9900c4","6a449be57204dd66f1dc260c88728eece7deedc2f6a7bf44d58b2d62e992a246","818cf47f152464d0e571605b431b58153091ab2e41329b0be2532b6742c476ba","820a89f688febe016425df15a259381d976dec9727194ec3b8c8c4d085dbf8cc","c60490f6bd433c5ed8a928cd5a4d25bbde5151ada0f5ab95c2381be65048f47e","c6eb406c618513d80236138c156faa0c6f7ef0bf44b55e103c0648e7808a8c1b","d31d7f9dcabf76b194b0e27cb3434c06bf0568912bdfcc3c9e0c285a5e27f7dc","dac9e9bc355066ca74922e99fd64bca44af71ef1590aae0189e8ceefecb676ce","e9fb67ae7b0c944ecb8a85084f5184afa02ddc5e168ae97d33bb449b9c812713","f8f86bdfbba4a9e1b378396a9bb9dc6772df93b90c9992d3b271a143e25b5cab","ff1cd2c6abcb4bc18c214ec412031d49e3f47f278d1b0f1b0f99f08887cf6fba"],"docType":"lesson","metaData":{"creationDate":"2024-02-16T08:52:53.173Z","country":["nl"],"schoolType":[],"levels":[],"years":[],"organizations":[],"subjects":[],"privacy":"public","isTest":false},"statistics":{"id":"YN6B9cuFK88zGBLBo","copiedCount":0,"sharedCount":0,"assignmentsCreatedCount":0,"testStartedCount":0,"finishPresentingCount":0,"averageRating":0,"ratingCount":2},"hash":"14ece919e1659fb180a56a1d43d027bbe8f451c08a0ee030b267cc7c24f82843","cluster":{"winner":true,"size":1,"id":"w_YN6B9cuFK88zGBLBo_i_YN6B9cuFK88zGBLBo"},"curricula":{"list":[],"objectives":[]},"contentTypes":["slide","wordweb","openQuestion","question"]},"score":59.216957,"explanation":undefined,"collapseCount":undefined},{"_id":"KXEW3rSJza7ufhR8B","_index":"lessons-nl-1642004322162","doc":{"_id":"KXEW3rSJza7ufhR8B","lesson":{"_id":"KXEW3rSJza7ufhR8B","user":"yi6RLGqLYDBo6sWvb","name":"IAV HTML les 1","privacy":"public","products":[],"sharing":{"sharePublic":true,"shareDate":"2021-09-23T13:46:34.924Z"},"creationDate":"2021-09-23T13:46:34.924Z","openendDate":"2021-09-23T13:46:34.924Z","modifiedDate":"2021-09-23T13:46:34.924Z","trail":[],"region":["nl"],"country":["nl"],"levels":["VB","VK","VG","VT"],"years":[14,15],"subjects":["media, vormgeving en ict"],"schoolType":["vo"],"showPhases":false,"pinCount":18,"pinCountForLesson":18,"pinCountForStudent":18,"origin":{"id":"gpfDgws54XbPveFD7","channel":null,"date":"2021-09-23T13:46:34.925Z","unmodified":true},"location":{"explorer":"8avyiKWePGyzn9TPd","folder":"tWGT32gcNPJdxZRDj"},"order":"a2"},"firstPin":{"_id":"dmTSpFZGE6D4hjCkH","user":"yi6RLGqLYDBo6sWvb","lesson":"KXEW3rSJza7ufhR8B","item":{"source":"slide","type":"slide","name":"Slide","url":null,"image":"https:\u002F\u002Flh3.googleusercontent.com\u002FDdL8W2bLF2v5PvXOAEFpH4A1jJCL0bXBbsqlcaryoqdi0JM3ZPoz5FC0JvEKEq8qDRZDOCVkV3YdCZB-sIS-pq4s9FUJFg1JP9GqmA","custom":{"layout":2,"text1":"IAV","text2":"Les 1Wat is <HTML>","align1":1,"align2":1,"showImage":true,"font1":"verdana","font2":"verdana","opacity":40,"fontSize1":"300","fontSize2":"100"},"components":[],"uploadId":"nSHqe7BXz624G6hhL","modifiedDate":"2021-09-23T13:46:34.925Z"},"order":1001,"creationDate":"2021-09-23T13:46:34.925Z","isPublic":true,"isFirstPin":true,"shouldIndex":"2021-09-23T13:46:34.925Z","trail":[]},"indexedContent":{"important":["IAV","Les 1Wat is <HTML>","Hyper Text Markup LanguageDit is de basis opmaaktaal voor iedere website.","<HTML>","HTML staat voor Hyper Text Markup Language. Het is de taal waarmee webpagina's worden weergegeven.","Opmaaktaal","HTML is een opmaaktaal. Door middel van HTML-instructies kunnen aan een website kleuren, afbeeldingen en hyperlinks worden toegevoegd. Deze instructies worden door middel van markeringen (tags) op de pagina aangebracht.","Noem een internet browser!","<TAG>","Een tag is een opdracht die door een browser kan worden geïnterpreteerd. HTML gebruikt tags om bijvoorbeeld de positie en weergave van elementen op een pagina aan te geven.Een tag staat altijd tussen een < en een >. Het element staat altijd tussen een begintag en een eindtag. Een eindtag kan je herkennen aan \u002F die is toegevoegd.","<begintag>element<\u002Feindtag>","Weergave van HTML","HTML kan worden bekeken met een browser. Een browser is een programma dat HTML omzet in opgemaakte tekst en afbeeldingen. Bekende browsers zijn oa. Microsoft Internet Explorer, Firefox, Safari en Google Chrome.","Voorbeeld van een tag.","Een voorbeeld van een tag:in de browser ziet het er zo uit:Deze woorden zijn vet en dit is onderstreept.","<b>Deze woorden zijn vet<\u002Fb> en <u>dit<\u002Fu> is onderstreept.","<ELEMENT>","Een element is het deel dat tussen de begintag en de eindtag staat. Dit is de tekst wat zichtbaar op je website.","<p>Dit is de plek waar het element staat<\u002Fp>","De basis van een webpagina.","Een website begint altijd met <!DOCTYPE html> en daarna de tag <html>.","De basis van een webpagina.","De inhoud tussen de <head> tag is niet zichtbaar op je webpagina. Wat staat tussen de tag <title> zie je op het tabblad van je webbrowser.","De basis van een webpagina.","Alles wat tussen de <body> tag staat, is te zien op je webpagina.","Waaraan herken je een tag?","Met welke tag begint een website?","Waaraan herken je een eindtag?","Wat zijn de enige twee tags die altijd direct onder de HTML-tag staan?","Wat wil je nog weten over HTML?","Opdracht HTMLGa na de website https:\u002F\u002Fwww.w3schools.com\u002Fhtml\u002FMaak de opdracht en lever in. Voor IAV lever je deze periode de website en de HTML opdracht in.Succes!","IAV HTML les 1","media, vormgeving en ict"],"normal":["Slide","Slide","Slide","Slide","openvraag","Slide","Slide","Slide","Slide","Slide","Slide","Slide","openvraag","Een woord dat tussen < en > staat","Vraag","","","","","Vraag","?","\u002F",":","\\","Vraag","en","en","en","en","openvraag","Slide"]},"pinHashes":["17be8b7b4fe2b368a3861e1307750b4488b5df7fb88ca835aa8b5b791b63c9a5","276e83ca30a4fc745cb49adfb498527233e11b948e53801870c3930c0a1b9d98","3ceacf5193e1a5ea3fce9a7b64b12b8623d8f0a29ee0faf596a21352149bdaad","3d264f8c50cca1b1afd86d07e2997a8c1becdb408c37dedfceaaa0be9804dfc4","408912306b9ec105faf5613994d5e297f408490e7722257f01b699b31c594310","4561d0c4ee99959d5c1c04f64c3461c3d1622006770e16e51632be9814564643","47090695a6149d26b4794578074d9d6f5d9418cdb0dbc83ff20e2e5fea598326","5581c9d010790d581980980a7fa9039905d9fe8334c53b99458d71816b30b42b","5c05966b46ea9be8f45ffa442be7c5408995a5c737d041c083bb034311c593b0","60bfb30cae0fe8fc73802617acd970b27c6377f6762f364b870c63a6eb376db5","76b8a748aa73e0017d95f16a62c3325e1f56dd80737c24d90fbc7261746cc37f","7cb98f5dd8a745a8255fea12a99770b7e439f7008f9460893d2379fc0ca8b61d","82d8b253bcc5c2fe87ad83da0588789195a55121bf393dfeef6253a4de2ec2e9","af488a04fdd7a94bc027b01aa6466fdcf6947d048c35617be04c45aa3685a223","b321eac4eaf5bcc008a5deab958160b917eebdfeb805b7f57c9bbd3d316948eb","bb8a73db326a4cc35c2b0a892eed81076349b46c4cfa08d64fb15ce4a8d8a170","c65b3c5657571b9c296fd2c10c05beb892ea7e394593f1f49393565967ed950d","c6e6fc35482eedd60f898b999a02eac37e7907ed6b38694c099d734b2519ea62"],"docType":"lesson","metaData":{"creationDate":"2021-09-23T13:46:34.924Z","country":["nl"],"schoolType":["vo"],"levels":["VB","VK","VG","VT"],"years":[14,15],"organizations":[],"subjects":["media, vormgeving en ict"],"privacy":"public","isTest":false},"statistics":{"id":"KXEW3rSJza7ufhR8B","copiedCount":0,"sharedCount":0,"assignmentsCreatedCount":0,"testStartedCount":0,"finishPresentingCount":0,"averageRating":0,"ratingCount":2},"hash":"feb2936804f8ba1f8cecf264e7cf989451f569e992899b9e8c7d693daf1b371a","cluster":{"winner":true,"size":3,"id":"w_KXEW3rSJza7ufhR8B_i_gpfDgws54XbPveFD7"},"curricula":{"list":[],"objectives":[]},"contentTypes":["slide","openQuestion","question"]},"score":49.4348,"explanation":undefined,"collapseCount":undefined},{"_id":"8gGkzjvyxoqaRwdcH","_index":"lessons-nl-1642004322162","doc":{"_id":"8gGkzjvyxoqaRwdcH","lesson":{"_id":"8gGkzjvyxoqaRwdcH","user":"KPy23gENCJeQmfW6R","name":"01 - Javascript - wat is javascript","privacy":"public","products":[],"order":"a0","plan":null,"location":{"explorer":"8AnzBKGNdGDawpiBj","folder":"8DeLXgYdMnjugpuNw"},"sharing":{"sharePublic":true,"shareDate":"2024-03-19T07:12:15.242Z"},"creationDate":"2024-03-19T07:12:15.242Z","openendDate":"2024-03-19T07:13:06.970Z","modifiedDate":"2024-03-19T07:19:15.220Z","differentiation":null,"trail":[],"region":["nl"],"country":["nl"],"levels":["n4","n3"],"years":[18,19],"subjects":["ICT"],"schoolType":["mbo"],"durationInMin":60,"showPhases":true,"pinCount":15,"pinCountForLesson":15,"pinCountForStudent":15,"origin":{"id":"TNZE6LKDRhw2xGQmC","channel":null,"date":"2024-03-19T07:12:15.242Z"},"thumbnail":{"url":"https:\u002F\u002Flh3.googleusercontent.com\u002FC4iZabBAoyNPhPmbfzrTKzOXblpQ6FrrgwAEB-iMCwrk1BDjpO3ADzE4WFbxQLlbLs08aVydKrMfoSn2F-eeY6fZxCT5iGCbvVzAbN0H","modifiedDate":"2024-03-19T07:21:56.506Z","hash":"ba974f02c22b59b1bec3db2c340ac328","v":3},"attachments":null,"channel":null},"firstPin":{"_id":"Mo68LupFHeSkgWXwb","user":"KPy23gENCJeQmfW6R","lesson":"8gGkzjvyxoqaRwdcH","item":{"type":"slide","custom":{"text1":"JavaScript: De Taal van Interactiviteit","text2":"","layout":1,"color":301,"colorbg":"#001343","colorfg":"#ffffff","opacity":100,"fontSize1":60,"fontSize2":60,"align2":2,"showImage":true},"notes":{"text":""},"components":[],"image":"https:\u002F\u002Flh3.googleusercontent.com\u002FTsWG3tn1LpSCaODwxvaXhs9tUSRuqmaUSloJVKVXGitSzbIcAjoZe0jjKMRgaZcRjNvZ7NETTl6RpBEokCu3qE7oohQV9nJHZCTfyVU","uploadId":"9d58d0a3-1224-4b09-8750-64105b640930","modifiedDate":"2024-03-19T07:12:15.681Z"},"order":1001,"creationDate":"2024-03-19T07:12:15.681Z","isPublic":true,"isFirstPin":true,"shouldIndex":"2024-03-19T07:12:15.681Z","trail":[]},"indexedContent":{"important":["JavaScript: De Taal van Interactiviteit","Leerdoel","Aan het einde van de les zul je begrijpen wat JavaScript is en hoe het wordt gebruikt in webontwikkeling.","Wat is JavaScript?","JavaScript is een programmeertaal die:\rInteractieve elementen op websites creëertDe gebruikerservaring verbetertDynamische en interactieve functionaliteiten toevoegt, zoals formulieren en games.\"","Voorbeeld: Interactief Formulier (1)","JavaScript kan bijvoorbeeld gebruikt worden om invoervelden van een formulier te veranderen op basis van de gebruikers-input, waardoor real-time validatie mogelijk is.","Voorbeeld: Interactief Formulier (2)","\u002F\u002F HTML\n<form>\n          <label for=\"age\">Leeftijd:<\u002Flabel><br>\n        <input type=\"text\" id=\"age\" name=\"age\"                onkeyup=\"validateAge()\">\n        <p id=\"message\"><\u002Fp>\n<\u002Fform>","\u002F\u002F JavaScriptfunction validateAge() {\n      let age = document.getElementById(\"age\").value;\n      let message = document.getElementById(\"message\");      if(age >= 18) {\n        message.style.color = \"green\";\n        message.innerHTML = \"Toegang tot de website!\";\n      } else {\n        message.style.color = \"red\";\n        message.innerHTML = \"Sorry, geen toegang\";\n      }\n }","Hoe voegen we JavaScript toe aan een website?","Je kan javascript op 3 manieren toevoegen aan je website:Inline scriptingExterne javascript bestandenDirect in een HTML element","JavaScript-code wordt dan binnen <script> tags geplaats","JavaScript-code wordt in een extern bestand geplaatst met extensie .js","In HTML-attributen om te reageren op bepaalde gebeurtenissen","Hoe voegen we JavaScript toe aan een website?","<script>\n  document.write('JavaScript geschreven.');\n<\u002Fscript>","INTERN","<script src=\"mijnScript.js\"><\u002Fscript>","<button onclick=\"alert('Hallo Wereld!')\">Klik op mij<\u002Fbutton>","EXTERN","HTML","Praktische Toepassingen","JavaScript wordt gebruikt voor het maken van animaties, het laden van inhoud zonder de pagina te vernieuwen en het implementeren van interactieve kaarten.","Wat moet al klaar zijn?","Werk de introductiecursus t\u002Fm KELVIN Javascript op CodeCademy door. Je moet hier even een account voor aanmaken.https:\u002F\u002Fwww.codecademy.com\u002Flearn\u002Fintroduction-to-javascriptIngeleverd = screenshot in Teams in van je inlogpagina en een screenshot van de opdracht waar je bent gebleven.","Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.","Datatypes in JavaScript","In JavaScript zijn er verschillende datatypes, waaronder string, number, boolean, object en meer.\nJullie hebben hier al mee kennisgemaakt in CodeCademyDataTypes komen in alle programmeertalen voor. In HTML CSS hebben we daar niet mee gewerkt. Hoe komt dat?","Wat nu?","Zie Teams voor specifieke eisenMaak map aan: JavascriptBoekje: hoofdstuk 7 vanaf blz 43","01 - Javascript - wat is javascript","ICT"],"normal":["Wat is JavaScript?","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\u002Fbeheersen, maar ook een goed startpunt voor een volgende les.","Slide","Slide"]},"pinHashes":["11f0b18c7f1831ec691160769425cdde1ac60d253fb1becd98f4731bc6bafe13","21b43c4cd87648538bde35984cb7e0be79bdabe62c71e64f1f6f0afade04d86d","26d45f6f6aac17aae77e43d500b9618aacd047b0dc2639bb67816140f45a6882","322976d20cb3f433408b7be4ef17d6963c1c3295a69bf88df06a81e981ed2f96","4fdbc1c0be4a15a463460fad125b8075109028bb2843213c408b4a6f275a81e5","644604af7378528c7bc8985b7c9f46432b027781e5228811d97e42768bf0d1ce","767ed814631d74650c90a112c5230b6b93e9b05dc50c28b695d80791a8b9ecbc","7c7723c7f0ad13984db2d647da4a263327ce7bee971ea3dc821a1283b49dc4ab","8189b7884ba7b0dd421626145d2db4c3a06a59a8f0a43396bfdb4ef78f9a46c3","9fbb4042532d8275248049cde5709f179766b967a65fa38c3dfc4710ae24b18a","a3e0d62e9948e6aae7c69d2f43f889376a069a47213d855a08ef9e15643e8f80","a60063c070aceef7d63413df7ad41c392cc9b3de15b6da4b9d2983931c424d91","d66dc24dc7b4506534be20ea387856798ab6a5a320f584d83b98d0ac48754fb4","dbd93e47099eb5e4fb5ca1a593d4b2734003be981375b12ed202b3c76fca4378","efbf0ff9e6ed9eeea1de6903927c758db914027a8c1d3c52a876d2d70a802ae6"],"docType":"lesson","metaData":{"creationDate":"2024-03-19T07:12:15.242Z","country":["nl"],"schoolType":["mbo"],"levels":["n4","n3"],"years":[18,19],"organizations":["qFKciLN9Hjghbu5sf"],"subjects":["ICT"],"privacy":"public","isTest":false},"statistics":{"id":"8gGkzjvyxoqaRwdcH","copiedCount":0,"sharedCount":0,"assignmentsCreatedCount":0,"testStartedCount":0,"finishPresentingCount":0,"averageRating":0,"ratingCount":2},"hash":"48c88ea5b5967054512a817656c9ed3d2415963e26e3230070f717f7c9ba4d8e","cluster":{},"curricula":{"list":[],"objectives":[]},"contentTypes":["slide","wordweb","video","openQuestion"]},"score":48.980564,"explanation":undefined,"collapseCount":undefined},{"_id":"TNZE6LKDRhw2xGQmC","_index":"lessons-nl-1642004322162","doc":{"_id":"TNZE6LKDRhw2xGQmC","lesson":{"_id":"TNZE6LKDRhw2xGQmC","user":"C3EzwnGMWs2fHm8vY","name":"01 - Javascript - wat is javascript","privacy":"public","products":[],"order":"a0","plan":null,"location":{"explorer":"Ab68f8pC3pocfbbM7","folder":"mxKzDphEPM8bTCwNW"},"sharing":{"sharePublic":true,"shareDate":"2024-03-07T08:06:27.979Z"},"creationDate":"2024-03-07T08:06:27.979Z","openendDate":"2024-03-11T11:08:46.891Z","modifiedDate":"2024-03-11T11:08:45.430Z","differentiation":null,"trail":[],"region":["nl"],"country":["nl"],"levels":["n4","n3"],"years":[18,19],"subjects":["ICT"],"schoolType":["mbo"],"durationInMin":60,"showPhases":true,"pinCount":12,"pinCountForLesson":12,"pinCountForStudent":12,"origin":{"id":"egXaqDBKHRsANLLok","channel":null,"date":"2024-03-07T08:06:27.980Z"},"thumbnail":{"url":"https:\u002F\u002Flh3.googleusercontent.com\u002FTcMRwC8fDXN3LZCN14v1toU-unx8upNIQGniU9Ik-gUX8Bv2MxcG_crM2LG67r6JW41y7C8Lf44ttYA13vQYwOJan9chsbboLhVu_Pj_","modifiedDate":"2024-03-11T11:10:16.626Z","hash":"aa426ad66b8ec896ca2d1807e4662018","v":3},"attachments":null,"channel":null},"firstPin":{"_id":"eFYEBjmQ9JH4KcwCx","user":"C3EzwnGMWs2fHm8vY","lesson":"TNZE6LKDRhw2xGQmC","item":{"type":"slide","custom":{"text1":"JavaScript: De Taal van Interactiviteit","text2":"","layout":1,"color":301,"colorbg":"#001343","colorfg":"#ffffff","opacity":100,"fontSize1":60,"fontSize2":60,"align2":2,"showImage":true},"notes":{"text":""},"components":[],"image":"https:\u002F\u002Flh3.googleusercontent.com\u002FTsWG3tn1LpSCaODwxvaXhs9tUSRuqmaUSloJVKVXGitSzbIcAjoZe0jjKMRgaZcRjNvZ7NETTl6RpBEokCu3qE7oohQV9nJHZCTfyVU","uploadId":"9d58d0a3-1224-4b09-8750-64105b640930","modifiedDate":"2024-03-07T08:06:28.004Z"},"order":1001,"creationDate":"2024-03-07T08:06:28.004Z","isPublic":true,"isFirstPin":true,"shouldIndex":"2024-03-07T08:06:28.004Z","trail":[]},"indexedContent":{"important":["JavaScript: De Taal van Interactiviteit","Leerdoel","Aan het einde van de les zul je begrijpen wat JavaScript is en hoe het wordt gebruikt in webontwikkeling.","Wat is JavaScript?","JavaScript is een programmeertaal die:\rInteractieve elementen op websites creëertDe gebruikerservaring verbetertDynamische en interactieve functionaliteiten toevoegt, zoals formulieren en games.\"","Voorbeeld: Interactief Formulier (1)","JavaScript kan bijvoorbeeld gebruikt worden om invoervelden van een formulier te veranderen op basis van de gebruikers-input, waardoor real-time validatie mogelijk is.","Voorbeeld: Interactief Formulier (2)","\u002F\u002F HTML\n<form>\n          <label for=\"age\">Leeftijd:<\u002Flabel><br>\n        <input type=\"text\" id=\"age\" name=\"age\"                onkeyup=\"validateAge()\">\n        <p id=\"message\"><\u002Fp>\n<\u002Fform>","\u002F\u002F JavaScriptfunction validateAge() {\n      let age = document.getElementById(\"age\").value;\n      let message = document.getElementById(\"message\");      if(age >= 18) {\n        message.style.color = \"green\";\n        message.innerHTML = \"Toegang tot de website!\";\n      } else {\n        message.style.color = \"red\";\n        message.innerHTML = \"Sorry, geen toegang\";\n      }\n }","Hoe voegen we JavaScript toe aan een website?","Je kan javascript op 3 manieren toevoegen aan je website:Inline scriptingExterne javascript bestandenDirect in een HTML element","JavaScript-code wordt dan binnen <script> tags geplaats","JavaScript-code wordt in een extern bestand geplaatst met extensie .js","In HTML-attributen om te reageren op bepaalde gebeurtenissen","Hoe voegen we JavaScript toe aan een website?","<script>\n  document.write('JavaScript geschreven.');\n<\u002Fscript>","INTERN","<script src=\"mijnScript.js\"><\u002Fscript>","<button onclick=\"alert('Hallo Wereld!')\">Klik op mij<\u002Fbutton>","EXTERN","HTML","Praktische Toepassingen","JavaScript wordt gebruikt voor het maken van animaties, het laden van inhoud zonder de pagina te vernieuwen en het implementeren van interactieve kaarten.","OPdracht: De taal Javascript leren kennen","Werk de introductiecursus Javascript op CodeCademy door. Je moet hier even een account voor aanmaken.https:\u002F\u002Fwww.codecademy.com\u002Flearn\u002Fintroduction-to-javascriptLever aan het eind van de les een screenshot in Teams in van je inlogpagina en een screenshot van de opdracht waar je bent gebleven.","Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.","01 - Javascript - wat is javascript","ICT"],"normal":["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\u002Fbeheersen, maar ook een goed startpunt voor een volgende les.","Wat is JavaScript?"]},"pinHashes":["11f0b18c7f1831ec691160769425cdde1ac60d253fb1becd98f4731bc6bafe13","21b43c4cd87648538bde35984cb7e0be79bdabe62c71e64f1f6f0afade04d86d","26d45f6f6aac17aae77e43d500b9618aacd047b0dc2639bb67816140f45a6882","322976d20cb3f433408b7be4ef17d6963c1c3295a69bf88df06a81e981ed2f96","4fdbc1c0be4a15a463460fad125b8075109028bb2843213c408b4a6f275a81e5","7c7723c7f0ad13984db2d647da4a263327ce7bee971ea3dc821a1283b49dc4ab","8189b7884ba7b0dd421626145d2db4c3a06a59a8f0a43396bfdb4ef78f9a46c3","8883cf1330f1007cf4bba3c9198a67be4df24b19d78a6954d77696b60347755c","9fbb4042532d8275248049cde5709f179766b967a65fa38c3dfc4710ae24b18a","a3e0d62e9948e6aae7c69d2f43f889376a069a47213d855a08ef9e15643e8f80","d66dc24dc7b4506534be20ea387856798ab6a5a320f584d83b98d0ac48754fb4","dbd93e47099eb5e4fb5ca1a593d4b2734003be981375b12ed202b3c76fca4378"],"docType":"lesson","metaData":{"creationDate":"2024-03-07T08:06:27.979Z","country":["nl"],"schoolType":["mbo"],"levels":["n4","n3"],"years":[18,19],"organizations":["qFKciLN9Hjghbu5sf"],"subjects":["ICT"],"privacy":"public","isTest":false},"statistics":{"id":"TNZE6LKDRhw2xGQmC","copiedCount":0,"sharedCount":0,"assignmentsCreatedCount":0,"testStartedCount":0,"finishPresentingCount":0,"averageRating":0,"ratingCount":2},"hash":"811c3e88f88abf12787356ba802c4629881a360567736c98de26b3f9fefa8142","cluster":{},"curricula":{"list":[],"objectives":[]},"contentTypes":["slide","wordweb","openQuestion","video"]},"score":48.39914,"explanation":undefined,"collapseCount":undefined},{"_id":"EZcKaToLd2uXw6NCR","_index":"lessons-nl-1642004322162","doc":{"_id":"EZcKaToLd2uXw6NCR","lesson":{"_id":"EZcKaToLd2uXw6NCR","user":"mHAZ2Wy25PBA2jjey","name":"04 - HTML - head body","region":["nl"],"country":["nl"],"showPhases":true,"sharing":{"sharePublic":false},"privacy":"public","schoolType":["mbo"],"levels":["n3","n4"],"years":[18,19,20,21],"subjects":["ICT"],"creationDate":"2024-01-22T17:56:33.408Z","pinCount":13,"pinCountForLesson":13,"pinCountForStudent":13,"location":{"explorer":"sNCc2PpwAeMujefDg","folder":"MgXh3rJzx4ysN4awz"},"source":"openAi","products":[],"order":"a3","modifiedDate":"2024-09-01T10:28:59.522Z","openendDate":"2024-09-01T10:29:13.695Z","thumbnail":{"url":"https:\u002F\u002Flh3.googleusercontent.com\u002FXvpKyxSbAa51RR5dLEgk4U368GCNZ3UP5FrY9Dlm7eaWBqvOKdJI7DA4RlwYirEYdYgKavD0k9vHy3FpNYu01EQDJFXdwgavglrYCA","modifiedDate":"2024-02-02T15:56:20.450Z","hash":"cffa477c042ffc5e5e80b1f86a401db1","v":3},"durationInMin":60},"firstPin":{"_id":"S2ucQCtyPvaDxYch8","user":"mHAZ2Wy25PBA2jjey","lesson":"EZcKaToLd2uXw6NCR","item":{"type":"slide","custom":{"text1":"HTML Head & Body","text2":"","layout":1,"color":301,"colorbg":"#001343","colorfg":"#ffffff","opacity":100,"fontSize1":60,"fontSize2":60,"align2":2,"showImage":true},"notes":{"text":""},"components":[],"image":"https:\u002F\u002Flh3.googleusercontent.com\u002FTsWG3tn1LpSCaODwxvaXhs9tUSRuqmaUSloJVKVXGitSzbIcAjoZe0jjKMRgaZcRjNvZ7NETTl6RpBEokCu3qE7oohQV9nJHZCTfyVU","uploadId":"9d58d0a3-1224-4b09-8750-64105b640930"},"order":1001,"creationDate":"2024-01-22T17:56:33.803Z","isPublic":true,"isFirstPin":true},"indexedContent":{"important":["HTML Head & Body","Leerdoel","Aan het einde van de les zul je een goed begrip hebben van wat de HTML <head> en <body> tags zijn en hoe je deze toepast in je webpagina’s.","Wat is de Head?","De head in HTML bevat metadata zoals titels, stijlinformatie en koppelingen naar externe bronnen.","Titel","element in de head definieert de titel van het document, die wordt weergegeven in de browser tab.","De `<title>`-tag in HTML definieert de titel van het document, die wordt weergegeven in de titelbalk van de webbrowser of op het tabblad van de pagina.","<!DOCTYPE html>\n<html>\n<head>\n    <title>1984 door George Orwell<\u002Ftitle><\u002Fhead>\n<body>\n<\u002Fbody>\n<\u002Fhtml>","Metadata","De <meta>-tag in HTML biedt metadata over het HTML-document, zoals beschrijving, trefwoorden en auteur, die door zoekmachines worden gebruikt om de pagina te indexeren en weer te geven in zoekresultaten.","<!DOCTYPE html>\n<html>\n<head>\n    <meta charset=\"UTF-8\">    <meta name=\"description\" content=\"1984 is een roman geschreven door George Orwell. \">\n    <meta name=\"keywords\" content=\"1984, George Orwell, Boek, Big Brother\">\n<\u002Fhead>\n<body>\n<\u002Fbody>\n<\u002Fhtml>","Oefening","Samenvatting","We hebben geleerd dat de <head> in HTML essentiële informatie en koppelingen bevat die de structuur en weergave van een webpagina beïnvloeden. Daarnaast definieert de <body>-tag de inhoud van een webpagina en biedt het diverse opmaak- en stijlopties.","Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.","Wat is de body-tag?","De body-tag in HTML wordt gebruikt om de inhoud van een webpagina te definiëren, zoals tekst, afbeeldingen en andere elementen.","Structuur van de body-tag","De body-tag wordt geopend <body> met en gesloten met <\u002Fbody>. Alle zichtbare inhoud van de webpagina wordt binnen deze tags geplaatst.","<!DOCTYPE html><html>    <head>    <\u002Fhead>    <body>          <!-- Inhoud van de pagina -->    <\u002Fbody><\u002Fhtml>","Opmaak en stijl","Je kunt de body-tag gebruiken om de achtergrondkleur, tekstkleur, lettertype en andere opmaakstijlen van de webpagina te definiëren.","Achtergrondafbeeldingen","Met de body-tag kun je ook achtergrond-afbeeldingen op de webpagina plaatsen met behulp van de 'background' eigenschap.","<!DOCTYPE html>\n<html>\n<head>\n    <title>Titel van de pagina<\u002Ftitle>\n<\u002Fhead>\n<body background=\"afbeelding.jpg\">\n    <h1>Dit is een kop<\u002Fh1>\n    <p>Dit is een paragraaf.<\u002Fp>\n<\u002Fbody>\n<\u002Fhtml>","04 - HTML - head body","ICT"],"normal":["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\u002Fbeheersen, maar ook een goed startpunt voor een volgende les."]},"pinHashes":["01575adfb694877a6e70d0ef3d96ce099901efc530364f903e22c13bf3e0abe8","0c9b9854281e4c595afc5bce432d54afc96e4d3c22d3c077e251f7380c87b144","1e67fac71b80990c36635aee82c09205e83f775f7d35f7d70221c93d9e95b601","2ea716d14fc81d217cfeb06f3b916cb5c174299e618a6a84bc9cd11f4a00229d","3f7a21452e3b91f7629374d4cb129ba11827add3c4752ecfc068ccbd3d6b9338","6e298ce080e7c4747e7b51dc7ad9734a75ffe24e4889e1f794cd3cdd1b293119","6f52cbdfda977fc23e4f261e90f30e759ae57148fac5b2e62979816d86759cdc","7c7723c7f0ad13984db2d647da4a263327ce7bee971ea3dc821a1283b49dc4ab","b71ed9815e3cb3b0a81e36f4953f89cf54844bd60e52d711722234f48c4d11dc","bc6bfe33e3a5057bb3c47652e254777cc1b3695bae0519141cde1da4ccc57af0","d97c7ae7a5e3e475a736731e5ee278986fe536d8432562491175777034c82be9","dcd5f36872c34535cb54558ff3e2b32faaa34127316b80dfc2cf0478c3fa5cc9","f777236334a20407958749dc005fafa14423ef941c90b46cf9c665d0ad5d835c"],"docType":"lesson","metaData":{"creationDate":"2024-01-22T17:56:33.408Z","country":["nl"],"schoolType":["mbo"],"levels":["n3","n4"],"years":[18,19,20,21],"organizations":["Z4deW6MoAs2t5jTEB"],"subjects":["ICT"],"privacy":"public","isTest":false},"statistics":{"id":"EZcKaToLd2uXw6NCR","copiedCount":0,"sharedCount":0,"assignmentsCreatedCount":0,"testStartedCount":0,"finishPresentingCount":0,"averageRating":0,"ratingCount":2},"hash":"8a1cc935047fe789cdece900805925940c47f2f6cd03977fb9d58ec04fe7f45e","cluster":{"winner":true,"size":1,"id":"w_EZcKaToLd2uXw6NCR_i_EZcKaToLd2uXw6NCR"},"curricula":{"list":[],"objectives":[]},"contentTypes":["slide","wordweb","openQuestion"]},"score":48.26292,"explanation":undefined,"collapseCount":undefined},{"_id":"LEnQJMYcpdmQcdajg","_index":"lessons-nl-1642004322162","doc":{"_id":"LEnQJMYcpdmQcdajg","lesson":{"_id":"LEnQJMYcpdmQcdajg","user":"kGveqw9CocyEnP2js","name":"Leer HTML in 8 stappen","region":["nl"],"country":["nl"],"showPhases":true,"sharing":{"sharePublic":false},"privacy":"public","schoolType":["vo"],"levels":["H","V"],"years":[14],"subjects":["Informatiekunde"],"creationDate":"2023-03-21T12:10:50.380Z","pinCount":17,"pinCountForLesson":17,"pinCountForStudent":17,"location":{"explorer":"HnEBMn7NWqWjLJsyC","folder":"HnEBMn7NWqWjLJsyC"},"products":[],"order":"a6","modifiedDate":"2023-03-26T18:45:34.974Z","openendDate":"2023-03-26T18:45:34.700Z","durationInMin":60,"thumbnail":{"url":"https:\u002F\u002Flh3.googleusercontent.com\u002FtMTmr1DnHhYt3VCKRicJa9fkM2L4EU0-S6berqB0TaJTXpIiV91DCB17jtc23T3yWdvqqBDyzlKguCAVQqX4Z-SowDiGr6zp748DApk","modifiedDate":"2023-03-21T12:53:31.955Z","hash":"b7d8b8c27aae5bcf43d77861fb0e3836","v":3}},"firstPin":{"_id":"wtwdA7j3NiNF7WKm3","user":"kGveqw9CocyEnP2js","lesson":"LEnQJMYcpdmQcdajg","item":{"type":"slide","custom":{"text1":"Leer HTML in 8 stappen","text2":"","layout":1,"color":301,"colorbg":"#001343","colorfg":"#ffffff","opacity":1,"fontSize1":60,"fontSize2":60},"notes":{"text":""},"components":[]},"order":1001,"creationDate":"2023-03-21T12:10:50.412Z","isPublic":true,"isFirstPin":true},"indexedContent":{"important":["Leer HTML in 8 stappen","Doel van de les","Aan het einde van de les kun je een simpele HTML pagina maken","Wat is HTML?","HTML staat voor HyperText Markup Language en is de basis van websites","De basis","HTML bestaat uit elementen en tags. Een element begint met een tag en eindigt met een sluit-tag<HTML>   ...<\u002FHTML>","Titel en body","De titel en body van een HTML pagina zijn belangrijk voor zoekmachines en gebruikers","Kopjes en alinea's","Kopjes en alinea's zorgen voor structuur in een HTML pagina","Links en afbeeldingen","Links en afbeeldingen maken een HTML pagina interactief en visueel aantrekkelijk","Lijsten","Lijsten zijn handig om informatie overzichtelijk te presenteren","Samenvatting","Je hebt nu geleerd hoe je een simpele HTML pagina kunt maken met de basis elementen en tags","Schrijf 3 dingen op die je deze les hebt geleerd.","Schrijf 2 dingen op waarover je meer wilt weten.","Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.","Titel en body","De titel en body van een HTML pagina zijn belangrijk voor zoekmachines en gebruikers<title> ... <\u002Ftitle>In de TITLE komt de informatie over de webpagina","Titel en body","De titel en body van een HTML pagina zijn belangrijk voor zoekmachines en gebruikers<title> ... <\u002Ftitle>In de TITLE komt de informatie over de webpagina<body> ... <\u002Fbody>In de BODY komt de informatie die op de pagina te zien is.","Kopjes en alinea's","Kopjes en alinea's zorgen voor structuur in een HTML paginaKopjes herken je aan afwijken lettergroottes\u002Ftypes","Kopjes en alinea's","Kopjes en alinea's zorgen voor structuur in een HTML paginaKopjes herken je aan afwijkende lettergroottes\u002FtypesAlineas herken je aan de lege regels tussen in tekst","Leer HTML in 8 stappen","Informatiekunde"],"normal":["Vertel de leerlingen wat ze aan het einde van de les zullen kunnen","Leg kort uit wat HTML is en waar het voor staat","Laat de leerlingen zien wat de basis van HTML is en hoe het gebruikt wordt","Laat de leerlingen zien hoe ze de titel en body van een HTML pagina kunnen maken","Laat de leerlingen zien hoe ze kopjes en alinea's kunnen maken","Laat de leerlingen zien hoe ze links en afbeeldingen kunnen toevoegen aan een HTML pagina","Laat de leerlingen zien hoe ze lijsten kunnen maken in HTML","Vat de belangrijkste punten van de les samen en geef aan dat de leerlingen de opdracht kunnen maken","De leerlingen voeren hier drie dingen in die ze in deze les hebben geleerd. Hiermee geven ze aan wat hun eigen leerrendement van deze les is.","De leerlingen voeren hier twee dingen in waarover ze meer zouden willen weten. Hiermee vergroot je niet alleen betrokkenheid, maar geef je hen ook meer eigenaarschap.","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\u002Fbeheersen, maar ook een goed startpunt voor een volgende les.","Laat de leerlingen zien hoe ze de titel en body van een HTML pagina kunnen maken","Laat de leerlingen zien hoe ze de titel en body van een HTML pagina kunnen maken","Laat de leerlingen zien hoe ze kopjes en alinea's kunnen maken","Laat de leerlingen zien hoe ze kopjes en alinea's kunnen maken"]},"pinHashes":["0ab987480be3f41efb729a9b423847e6a40ade30635d3b33bd035cc69cae6584","2542e4a2b2adce213459ee71dcf95446e2bbfd15ea8d92f9103ed68ec036e440","4519ce8f0655a0bd5349b6a380a7e4f27f9dbe65f3396680dc976ab39f6e8ee8","5598ab2374563fcc511733de1858968cc0317fccff388628bd03bf066bf81945","7599552982683ddc68aed898755599c48b86a602356691de7b85432c909b46ca","7b073280ef32c229c2b70ed36267a06b68b37e5e5878c2bc804926964b3e170e","7fdbea7837a06dd05654acb3302949526f83764d0d68c3e0cf4633eb8177fef6","8f3f56c9fe832ee8c30e9505108cf3b6dc5f29b0cfcfc9b51acc80f1d9eeafcd","90768cf3d59d6b8a417faabfc14e893f7a1341d29f0e16415a605b1b3cc234b1","c6eb406c618513d80236138c156faa0c6f7ef0bf44b55e103c0648e7808a8c1b","d2f364e4f0ed134e70c79cc301a32639d5c69f397954dff0cd860db3c9faaadf","d3a734215f14514b585156efbf98209a3e90168bac9c9af444629ee9b1f28997","db62a69b69dd71732bc7f555db357fecd764236aa31f3804cbed031cfdcb0d01","e09ef14cb331c3a5aad857a57fff99b6cfc6cde207564e73dc10d7474cfc1faf","e24b1afc651922e9c9939f2612fef7efcacf83c86325b729e86493caf91a7e03","e4c85dfb8cdbebff05a8ce08da6b3b0f6e1da82db7241b7a32c6d5031071bb92","f8f86bdfbba4a9e1b378396a9bb9dc6772df93b90c9992d3b271a143e25b5cab"],"docType":"lesson","metaData":{"creationDate":"2023-03-21T12:10:50.380Z","country":["nl"],"schoolType":["vo"],"levels":["H","V"],"years":[14],"organizations":[],"subjects":["Informatiekunde"],"privacy":"public","isTest":false},"statistics":{"id":"LEnQJMYcpdmQcdajg","copiedCount":0,"sharedCount":0,"assignmentsCreatedCount":0,"testStartedCount":0,"finishPresentingCount":0,"averageRating":0,"ratingCount":2},"hash":"9b217035bcfcf29d49566e0876e3b85069c03252fff286318a1842bce87d9118","cluster":{"winner":true,"size":1,"id":"w_LEnQJMYcpdmQcdajg_i_LEnQJMYcpdmQcdajg"},"curricula":{"list":[],"objectives":[]},"contentTypes":["slide","wordweb","openQuestion"]},"score":48.115944,"explanation":undefined,"collapseCount":undefined},{"_id":"SsapfFNqh5hEW2KiD","_index":"lessons-nl-1642004322162","doc":{"_id":"SsapfFNqh5hEW2KiD","lesson":{"_id":"SsapfFNqh5hEW2KiD","user":"W2imuJABsH3M8NGG7","name":"Html en Css - les 2","privacy":"public","products":[],"order":"aD","location":{"explorer":"4saqP4Kpwxmm44nGQ","folder":"SMEn85qaxhJfcpL8j"},"sharing":{"sharePublic":true,"shareDate":"2023-04-20T13:45:52.608Z"},"creationDate":"2023-04-20T13:45:52.608Z","openendDate":"2023-04-20T13:45:52.608Z","modifiedDate":"2023-04-20T13:45:52.608Z","trail":[],"region":["nl"],"country":["nl"],"levels":["V"],"years":[15],"subjects":["Informatica"],"schoolType":["vo"],"durationInMin":45,"showPhases":false,"pinCount":23,"pinCountForLesson":23,"pinCountForStudent":23,"origin":{"id":"3aBBfMmL2Kqzbs7QA","date":"2023-04-20T13:45:52.608Z","unmodified":true},"thumbnail":{"url":"https:\u002F\u002Flh3.googleusercontent.com\u002FTb5xbDEN7b6tQomg5b8Lmu1e4obLMFrGTp1KFigi_OEprYQsX9UKVZMSRlea3PcX1UuaPhR0k2HkZbAb8QVyjJWG2xEljKSTI2x2I7w","modifiedDate":"2022-09-04T15:32:20.873Z","hash":"b39d99b073c9fd982d69594c2fedaee5","v":3}},"firstPin":{"_id":"uBnjpM6aYhaQEeZ8b","user":"W2imuJABsH3M8NGG7","lesson":"SsapfFNqh5hEW2KiD","item":{"source":"slide","type":"slide","name":"Slide","url":null,"image":"https:\u002F\u002Flh3.googleusercontent.com\u002Fr61nbBDKQMiAlZ-XYpmV9KiDXx62Jb-RggLTUFDpkdi0L8andzrCt5ybA9-o-F49_eZ76x3JD_r4ReklbeKA7gkn0FE_pHCRyn_K-qnt","custom":{"layout":1,"text1":"4V Informatica","text2":"HTML les 25 september 2022","align1":1,"align2":1,"showImage":true,"opacity":40,"color":5,"fontSize2":"80","font2":"montserrat","imageSize":"cover"},"components":[],"modifiedDate":"2023-04-20T13:45:53.121Z","uploadId":"fHWytr5nTtDXdg2PQ"},"order":5001,"creationDate":"2023-04-20T13:45:53.121Z","isPublic":true,"shouldIndex":"2023-04-20T13:45:53.121Z","trail":[]},"indexedContent":{"important":["4V Informatica","HTML les 25 september 2022","Hoe ging het maken van je eerste website(s)?","Op wat voor computer werk je thuis?","Waarmee begint je html-bestand?","Welke tag heeft geen closing tag nodig?","Heb je je wachtwoord voor Fundament al gewijzigd?","Terugblik vorige les","Basis van een website is html-bestand (of meerdere...)HTML = HyperText Markup LanguageSimpele teksteditor voldoendeHTML-bestand bevat de inhoud van je website (later voeg je daar styling aan toe via CSS)Inhoud van website moet in HTML-elementenHTML-elementen hebben opening- en closing-tagsCommentaar via <!-- dit is commentaar -->Geen Windows-computer??? Gebruik Replit!","Stap 1. HTML","In HTML schrijf je wat er in je website komt te staan. Denk daarbij in eerste instantie aan teksten en plaatjes en linkjes.HTML bestanden open je doorgaans in een browser. De browser leest het html bestand en \"tekent\" deze op een gebruiksvriendelijke(re) manier. Het onderstaande voorbeeld laat zien hoe dat eruit ziet.","Index.html in notepad","Index.html in chrome","HTML - tags","HTML bestaat uit elementen. En die elementen worden aangeduid met opening en closing tags. Een tag is het stukje tussen haakjes. Dus bijvoorbeeld <h1>. Na de tag komt de tekst die je wil schrijven. Vervolgens gebruik je weer een tag om af te sluiten. In dit geval <\u002Fh1>. let op de \u002F in de 'closing tag'Sommige tags hebben geen 'closing tag' nodig, zoals <br> of <img>","https:\u002F\u002Fwebsitesetup.org\u002Fwp-content\u002Fuploads\u002F2014\u002F09\u002Fhtml5-cheat-sheet.png","En nog veel meer elementen!","HTML - elementen","<h1> is een header\n<p> is een paragraaf\n<img> is een image\n<a> is een anchor\n<ul> is een unordered list\n<li> is een listitem\nenz.. enz..","Eerste deel opdracht 2.8","Tweede deel opdr. 2.8 Hyperlinks","a-element voor hyperlinksa-element heeft attribuut IN de tag;<a href=\"www.google.com>dierbare website<\u002Fa>verwijzen naar ander html-bestand:<a href=\"opdracht1.html\">vorige opdracht<\u002Fa>Of link naar mailadres:<a href= \"mailto:[e-mail]\">mailen<\u002Fa>Let op de aanhalingstekens!!!","Vandaag: afbeeldingen, lijsten, tabellen, inputvelden en video's aan je website toevoegen","Bestudeer de uitleg op www.htmldog.com (deels herhaling);Maak de code na\u002F Kopieer de code in je eigen bestand;Doe dit in onze team-omgeving in Replit (zie instructies in Classroom);Kijk ook naar paragraaf A.3 Multimedia in Fundament voor extra toelichting;Klaar? Lever het in via Replit en ga verder met de opdrachten in Fundament bij paragraaf 3.6","Afbeeldingen toevoegen","Via <img>-element met 5 attributen in de opening-tag:src = bron van je afbeelding (internet of bestand bij je website)alt = alternatieve tekst bij laadfouten (NB: verplicht, maar alt=\"\" mag ook)title = tekst die verschijnt als je over afbeelding gaat (niet verplicht) width en height voor breedte en hoogte van afbeelding (in pixels)Alleen width of alleen height mag ook","Video's invoegen\u002F embedden","<iframe>-element met tenminste 3 attributen: width en height voor omvang van frame;src voor de bron van je video (zie Fundament!)","Lijsten maken","Ongeordende lijst via <ul> = Unordered List Geordende = genummerde lijst via <ol> = Ordered ListPer item van de lijst een <li>-elementZie fundament voor de definitielijst met <dl>","Tabellen maken","<table> voor hele tabel (eventueel met 'border'-attribuut)<tr>-element per rij;<td>-element per cel;Zie Fundament voor samenvoegen cellen via colspan\u002Frowspan","Formulieren maken","<form> element voor hele formulier met attributen action (verwijzing naar bestand met code) en method (get\u002Fpost);<input>-element voor invoer van gebruiker (veel variatie);<textarea>-element voor grotere invoer;<select>-element voor drop-down-menu.","HTML","Ga naar www.htmldog.com","Huiswerk 12\u002F9","Bestudeer Fundament A.2 onderdeel 3lever uitwerking www.htmldog.com inMaak opdrachten 3.6","Hoe vond je deze les?","HTML","Html én css","Werkwijze","ZelfstandigheidDit wordt jullie eerste project voor informatica en je zal merken dat je veel zelf moet uitzoeken. Dat komt vooral omdat er niet één manier is om een website te maken en er niet één manier is jouw ontwerp te maken. En om het nog ingewikkelder te maken: er zijn vele verschillende manier en ze zijn vaak allemaal goed!","OpdrachtDe opdracht staat in classroom. Daarin staat wat je moet doen en hoe het beoordeeld wordt.LessenElke week zal ik in de les één of twee nieuwe onderwerpen toelichten.PlanningDe planning staat in classroom in de jaarplanner. Selecteer wel even het tabje voor jouw klas\u002Fjaar!","Html en Css - les 2","Informatica"],"normal":["Slide","Vraag","Totaal niet","Mwoh... snap het nog niet echt","Wel oké","Eitje!","Vraag","Chromebook","Windows-computer","Apple","Thuis doe ik niets...","Vraag","","","","","Vraag","","","","","Vraag","ja","nee","Slide","Slide","Slide","Slide","Slide","Slide","Slide","Slide","Slide","Slide","Slide","Slide","Slide","Slide","poll","Slide","Slide"]},"pinHashes":["02e6e61dce441ca4a3b312e332fa6efc5684ec16887e9780a4c1115536653605","068a406b9632f5a278df1f80d8c1f39985101077161b73d7795d4b838fa2891c","06d3609b7629fde1c0332b7d8fee72ee4ee4447395e27f6ea69a9d2fbc26c286","18291dde8f8e4eff6113c956c7391cb37a7818411f92edef48d3ddadabe56fed","578b87914ca2b171242d7fbcbeaea9987f8e860c759079810ff001ec12fbdebf","5a60e5c8b00526a05ff6e5aa2d51c2184094387be473aefd9ffc53237f8fda44","68824f9edb320d9b9bf4150814384cb73ce7737fb5937da69685e89c2d8e7597","69ee2ab2e50f2665a4a8080f12e850619d94d697b5466127b5efa2b12669afa5","713ee9efd35f051b06e871de4131ece7b63e4b7a0806e715e31d00fac2de87f4","7c627307a52a167e826b57ca66bd892d29f86ba1213cffdcea6d2a775c991eb9","a3dc677a34b27e28b00cc8b4d45d2cbe393320a606090529ed375cb2f8fb565f","ab659be8422e98ea0c04c9312837f0e33c24874bf527163d0bf4fd63d1da49f6","b16daebbe5617be3d53a3bada2f5ff359e5ee9bfb2d9cfd352c8cd665b5e2baa","b77d400eae28bdc4c14a381343e254089e92ab35e17c8b5a18c68d868a4b5ea1","ba8635af6d37aea68c552320d7291a872020184f88bdd1355dee121620244038","c94f17f77e3faa7d41eb00b3886e7729dc299ab06133a82c40a60e24abbfc365","cb0da9cbc74339541cda17ac15757647444a2acdedcaaf491d47fa00b2d8502e","cc3dc375f623705298206d1ad3b1d0a1c5fd1bae28815ccfba172e11acbb7138","d9d218c164cc3977b9ac61c4bee40652de75fbb727e6baef86430c86b56fe4aa","df1949f8fedaf75aebd7be9aba62101d17beea7dc6fcad8248d9b6c81a894f53","e1ac730dfb228b26f537cd565ce701cc0d27b0cbef0b65543ba36b437097ad09","e2e6f67d075d7b59dee0099368f57be0462803c9eb3219487fb06240ac169758","ea199fa20f9e0874aad5f033a3446db3c87beb0f0433ac2cfa077d6ea22be080"],"docType":"lesson","metaData":{"creationDate":"2023-04-20T13:45:52.608Z","country":["nl"],"schoolType":["vo"],"levels":["V"],"years":[15],"organizations":[],"subjects":["Informatica"],"privacy":"public","isTest":false},"statistics":{"id":"SsapfFNqh5hEW2KiD","copiedCount":0,"sharedCount":0,"assignmentsCreatedCount":0,"testStartedCount":0,"finishPresentingCount":0,"averageRating":0,"ratingCount":2},"hash":"3f7a382dc46b4f64eaad863d8bf2feef12cf29f46ed798600916a34a62de565d","cluster":{"winner":true,"size":2,"id":"w_SsapfFNqh5hEW2KiD_i_3aBBfMmL2Kqzbs7QA"},"curricula":{"list":[],"objectives":[]},"contentTypes":["slide","question","poll"]},"score":47.370422,"explanation":undefined,"collapseCount":undefined},{"_id":"nZM6hBD2LNg8sj5QC","_index":"lessons-nl-1642004322162","doc":{"_id":"nZM6hBD2LNg8sj5QC","lesson":{"_id":"nZM6hBD2LNg8sj5QC","user":"kxsWTb6DESZrtuCeX","name":"HTML101","privacy":"public","products":[],"order":"a4","plan":null,"location":{"explorer":"hPkHbr7Qud9igeYBR","folder":"hPkHbr7Qud9igeYBR"},"sharing":{"sharePublic":true,"shareDate":"2022-09-04T15:26:01.791Z"},"creationDate":"2022-09-04T15:26:01.791Z","openendDate":"2022-09-06T17:08:59.556Z","modifiedDate":"2022-09-06T17:09:00.180Z","trail":[],"region":["nl"],"country":["nl"],"levels":["n4"],"years":[18],"subjects":["Applicatie- en mediaontwikkelaar"],"schoolType":["mbo"],"showPhases":true,"pinCount":22,"pinCountForLesson":22,"pinCountForStudent":22,"origin":{"id":"JJkWse4WFDRitW59n","channel":null,"date":"2022-09-04T15:26:01.791Z","unmodified":true},"thumbnail":{"url":"https:\u002F\u002Flh3.googleusercontent.com\u002FTdQwtjE7swTBA1B9d-RRUX-o8bvNYZEoWVdZ5CaarItvKbcpF48EuiL-LvMSddg8zuT3ChV3lQrTguCorsTuMaYHRfUhvc7M52TeiWw","modifiedDate":"2022-09-04T15:30:34.969Z","hash":"f58ef89b354f73541f3ec92f5e23654e","v":3},"channel":null},"firstPin":{"_id":"E8WRhgQkPpSXuCLtw","user":"kxsWTb6DESZrtuCeX","lesson":"nZM6hBD2LNg8sj5QC","item":{"source":"upload","type":"slide","name":"Slide","url":null,"image":"https:\u002F\u002Flh3.googleusercontent.com\u002F7-A3ulRLdOU2FwOdiQPelrvo-VepPt5nwat63ALpGCCkH5gXBmRk3DkMq_ePEyeKBDEC3rIPPjUWybb0YFMjq7Lvq1G9HVoK1jSTwH4","custom":{"layout":3,"text1":"","text2":"","align1":1,"align2":1,"showImage":true},"size":"contain","uploadId":"WQhk9rNgb8YKG8LfY","components":[{"_id":"mFknz2HPEtZ5uaTWq","position":{"left":39.135,"top":32.486,"bottom":37.514,"right":37.487},"scale":{"x":1,"y":1},"creationDate":"2022-06-26T21:12:34.452Z","user":"WGyPiABpuKn4Dr8SY","settings":{"text":"HTML","backgroundColor":"none","fontFamily":"montserrat","fontSize":"100","textAlign":"align-left","verticalAlign":"vertical-align-top","padding":1,"borderColor":"none","borderWidth":"0","borderRadius":"0","columns":1,"correctDropzone":[],"dropzoneSnapback":true},"type":"text","origin":"text"}],"modifiedDate":"2022-09-04T15:26:01.801Z"},"order":1001,"creationDate":"2022-09-04T15:26:01.801Z","isPublic":true,"isFirstPin":true,"shouldIndex":"2022-09-04T15:26:01.801Z","trail":[]},"indexedContent":{"important":["HTML","Inhoud","WerkwijzeToolsTagsStructuurLink TagsOefening","Werkwijze","Map\u002FDirectory Html aanmakenBrackets\u002FNotepadDocumentatie: www.w3schools.com\u002FCharset: عربيّة, Ελληνικά, abcdefgBestandsnamen: - gebruik extensie: .html- geen hoofdletters- index.html- geen spaties- over_ons.html","Tools of the trade","Integrated Development Environment (eigen keuze)Brackets, Notepad++ (gratis)Code validator :  http:\u002F\u002Fvalidator.w3.org","Code Along!","Tags!","De basis van elke website!Tags: code om de tekst te structureren of vorm te geven1. Open tags: <br \u002F> of <hr \u002F>2. Container tags: <p>paragraaf<\u002Fp>     <h1>titeltje<\u002Fh1>","Open","Open","Sluiten","Sluiten","Structuur","Typische opbouw van een pagina","Code geldig maken","Pagina die je hebt gemaakt valideren op:http:\u002F\u002Fvalidator.w3.org\u002F","Pagina is niet geldig!","Attributen","-Alle HTML tags kunnen ze bevatten-Alle attributen moeten in de openingstag-Attributen bestaan voornamelijk uit naam en waarde combinaties-Naam van attribute in klein letters-Waarde tussen aanhalingstekens \" hoi \"","Encoding","Om een Html pagina correct te kunnen weergeven, moet je aangeven welke character set gebruikt moet wordenMet de <meta> tag kan je de character set aangeven","(Character sets)","HTML5 gebruikt UTF-8","<meta charset=\"UTF-8\">","HTML <!DOCTYPE> Declaration","De browser moet weten wat voor document het aan het lezen.Alle html documenten beginnen met:Dit is geen html tag!","<!DOCTYPE html>","Welke is een container tag?","Welke tag(s) kunnen Attributen bevatten?","Welke Encoding gebruikt HTML5","Link tags","-Absolute koppeling(verwijzen naar een vast adres)<a href=“https:\u002F\u002Fwww.youtube.com”>Let's watch some clips!<\u002Fa>-Relatieve koppeling (Geeft de bestandnaam en de mapverwijzing)<a href=“profiel.html”>naar mijn profiel<\u002Fa>","Attribute","Waarde","Interne koppeling","Ankers<p id=\"goingUp\"> this side up <\u002Fp><a href=\"#goingUp \"> Back to top <\u002Fa>","Afbeelding","Tag: <img\u002F>","<img src=\"images\u002Fspiderman_cover.jpg\"\u002F>","Attribute: source (waar de file te vinden is)","Opdracht: Maak een 2 pagina website","Maak een Mappen structuur aanMaak een index.html bestandLet op de structuur van je codeMaak gebruik van de verschillende koppelingenMaak gebruik van een image Nog meer info en tags op : www.w3schools.com\u002FValideer je pagina! ( http:\u002F\u002Fvalidator.w3.org\u002F)","Recap","-Werkwijze-Tools-Tags-Structuur","HTML101","Applicatie- en mediaontwikkelaar"],"normal":["Slide","Slide","Slide","Slide","Slide","Slide","Slide","Slide","Slide","Slide","Slide","Slide","Slide","Slide","Vraag","","(h1) (h1)","{h1\u002F h2\u002F}","","Vraag","Alleen Open Tags","Alle tags","Alleen 1 tag per structuur","Geen enkele tags","poll","Slide","Slide","Slide","Slide","Slide"]},"pinHashes":["14e78f04aa08da68ff4a7e944061a6c63af261495a5a42132f840d317bcb10ab","1876459abecd0735d6c48dd4401c9389efd8270c4420df3492b9ef185a0b521b","191f6970a167c78b7f851ded215bc510155d71874cd43c34958c7849ea29901d","1a7f45b4fbcc83fcdb5dd4d0f8ac377b9b79e6b52b965eff1d409203b06a16da","27f0c8af1efb1de0e507e072b52ea20a9c515ab45e8424f5da5c712ac08541fc","2a60fd96246693974ef54fd9a40da8220b2705e11392fd0716a42d179b4cdf5f","33ea50ac4b2eae3ed2b25574b6635a0eb1a801d70bc479e29849d74c5988fba7","3663d698c63bbb0ba12bfab6804841d1c357bae0129056752da76b62d885dbc9","552c0dfc81405b8cd0117ad1e0952225a759c33eb04f2c1c580fd4a8c6d4df43","5bcd4c6c3ae1c96e27efe2b9e227434a9edc049f5bfce64b1f61136bded60e9c","5c5d0f0030e03db8a0ab14338bda137468b06799602484cf6300fabce491de15","6fe10850823460c74471e0baef3c11bc8b1019976e62a9b0edfea63050c20c5d","982f7bf09b0b9ccacc974f2f9c8c9a7f5e8974dec0aa58b29974ee267887fbc2","aac5183de6380432a193ec0c8e0218d037e0dd49f4b7f1e98c29e36a13bad955","ce8f72ece890f3c90fc7930a0fbf40a4d99550382d543bcc35ba282137145993","cf5404d3415514de9ba22ce19628b64685d75969dc4edfb98fb6b5587edc70c1","d1e06ea3c82ee1a8e0e41f9f707371627b67937c74866497c8585bcd1a096e7f","d36e5a28cd7e3576ea6a4d7cf9a698ccf84c32976ede246087124008938b18af","dc2b201b8a587092b60648ef398d9c7142e0e5228d3fb7e131e591c8d3fbd5b6","ec0d52a7cc8c29380b2545d6397f16f8050190c935a04aae081722f4d5ca4f02","f4c02525799dc6d3285c0367824e50feadc3eeab960a86723543d349547a0a50","fdd3864cd6a031fca8ad2fc44370271d37a911237cd1fb075ffba3623b4a7825"],"docType":"lesson","metaData":{"creationDate":"2022-09-04T15:26:01.791Z","country":["nl"],"schoolType":["mbo"],"levels":["n4"],"years":[18],"organizations":[],"subjects":["Applicatie- en mediaontwikkelaar"],"privacy":"public","isTest":false},"statistics":{"id":"nZM6hBD2LNg8sj5QC","copiedCount":0,"sharedCount":0,"assignmentsCreatedCount":0,"testStartedCount":0,"finishPresentingCount":0,"averageRating":0,"ratingCount":2},"hash":"a8768e2b1b3ad26de1414391357ec7d77ea89b9005d032fb91a7479002477cf7","cluster":{"winner":true,"size":1,"id":"w_nZM6hBD2LNg8sj5QC_i_nZM6hBD2LNg8sj5QC"},"curricula":{"list":[],"objectives":[]},"contentTypes":["slide","question","poll"]},"score":46.350388,"explanation":undefined,"collapseCount":undefined}],"pins":[{"_id":"wYhNWnJZG9Yq38Syw","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"\u003Cb\u003EBasis HTML: Leer de grondbeginselen van webontwikkeling\u003C\u002Fb\u003E","text2":"","layout":1,"color":1,"opacity":1,"fontSize1":60,"fontSize2":60},"notes":{"text":""},"components":[]},"order":1001,"creationDate":new Date("2023-03-24T14:07:07.064Z"),"isPublic":true,"isFirstPin":true},{"_id":"qmqS9SNJhkXkksvkD","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"\u003Cb\u003ELeerdoel: Begrijpen wat HTML is\u003C\u002Fb\u003E","text2":"HTML staat voor HyperText Markup Language en is de basis van webontwikkeling.","layout":2,"color":1,"opacity":1,"fontSize1":60,"fontSize2":60},"notes":{"text":"Leg de basisprincipes van HTML uit en zorg ervoor dat studenten begrijpen wat HTML is en waarvoor het wordt gebruikt."},"components":[]},"order":1002,"creationDate":new Date("2023-03-24T14:07:07.185Z"),"isPublic":true,"isFirstPin":false},{"_id":"TZhKk44q4FxCButE7","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"wordweb","custom":{"word":"Wat weet je al over HTML?","color":9,"opacity":1,"showImage":false,"fontSize1":60},"components":[]},"order":1003,"creationDate":new Date("2023-03-24T14:07:07.496Z"),"isPublic":true,"isFirstPin":false},{"_id":"5PoycRGnBoQy3jj4e","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"\u003Cb\u003EHTML-tags en -elementen\u003C\u002Fb\u003E","text2":"HTML maakt gebruik van tags en elementen om de inhoud van een webpagina te structureren.","layout":2,"color":1,"opacity":1,"fontSize1":60,"fontSize2":60},"notes":{"text":"Leg uit wat tags en elementen zijn en geef voorbeelden van veelgebruikte tags zoals \u003Chtml\u003E, \u003Chead\u003E, \u003Cbody\u003E, \u003Cp\u003E, \u003Ca\u003E, \u003Cimg\u003E en \u003Cdiv\u003E."},"components":[]},"order":2001,"creationDate":new Date("2023-03-24T14:07:07.600Z"),"isPublic":true,"isFirstPin":false},{"_id":"hJGR8j2stk8t9TLt7","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"\u003Cb\u003EStructuur van een HTML-pagina\u003C\u002Fb\u003E","text2":"Een standaard HTML-pagina bestaat uit een doctype-declaratie, een HTML-element, een head-element en een body-element.","layout":2,"color":1,"opacity":1,"fontSize1":60,"fontSize2":60},"notes":{"text":"Laat de structuur van een HTML-pagina zien en leg uit wat elk element doet."},"components":[]},"order":2002,"creationDate":new Date("2023-03-24T14:07:07.733Z"),"isPublic":true,"isFirstPin":false},{"_id":"WD4WJ9EFdZhiRWto7","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"\u003Cb\u003ETekst opmaken met HTML\u003C\u002Fb\u003E","text2":"HTML biedt verschillende tags om tekst op te maken, zoals \u003Ch1\u003E\u003C\u002Fh1\u003E","layout":2,"color":1,"opacity":1,"fontSize1":60,"fontSize2":60},"notes":{"text":"Demonstreer hoe deze tags worden gebruikt om tekst op te maken en benadruk het belang van semantisch correcte HTML."},"components":[{"_id":"f74668b5178a620a254bdac5","position":{"left":5.275,"top":39.517,"bottom":5.774,"right":5.725},"scale":{"x":1,"y":1},"creationDate":new Date("2024-07-12T11:33:34.281Z"),"user":"Pyj8vaMrqEwD2Z5dA","settings":{"transparency":100,"borderRadius":"0","allowZoom":false,"correctDropzone":[],"dropzoneSnapback":true,"url":"https:\u002F\u002Flh3.googleusercontent.com\u002FMF5NZwVb-s1aCSurD7LWlaVnoL27qcGK1Aour6DqsS1_6zcfXThjgg6_lsKdLNYvIaGhCHry0JFI7mX49edU9SvYabVnipI-Laht8os"},"type":"image","origin":"image"}]},"order":2003,"creationDate":new Date("2023-03-24T14:07:07.829Z"),"isPublic":true,"isFirstPin":false},{"_id":"d4ZsNsbsDzkrdBkpb","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"\u003Cb\u003EAfbeeldingen toevoegen\u003C\u002Fb\u003E","text2":"Afbeeldingen kunnen worden toegevoegd met de img-tag en moeten een alt-attribuut bevatten voor toegankelijkheid.","layout":2,"color":1,"opacity":1,"fontSize1":60,"fontSize2":60},"notes":{"text":"Laat zien hoe het toevoegen van een afbeelding werkt en waarom het belangrijk is om een alt-attribuut te gebruiken."},"components":[]},"order":2004,"creationDate":new Date("2023-03-24T14:07:07.918Z"),"isPublic":true,"isFirstPin":false},{"_id":"x7hMW9x4toaLyu5v6","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"\u003Cb\u003ELinks maken\u003C\u002Fb\u003E","text2":"Links worden gemaakt met de link\u003Ca\u003E-tag en kunnen worden gebruikt om te koppelen naar andere pagina's of bestanden.\u003C\u002Fa\u003E","layout":2,"color":1,"opacity":1,"fontSize1":60,"fontSize2":60},"notes":{"text":"Laat zien hoe links worden gemaakt en geef voorbeelden van verschillende soorten links."},"components":[]},"order":2005,"creationDate":new Date("2023-03-24T14:07:08.030Z"),"isPublic":true,"isFirstPin":false},{"_id":"9KBAkAAip6to7qhTi","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"\u003Cb\u003ELijsten maken\u003C\u002Fb\u003E","text2":"Er zijn twee soorten lijsten in HTML: geordende en ongeordende lijsten.","layout":2,"color":1,"opacity":1,"fontSize1":60,"fontSize2":60},"notes":{"text":"Leg uit hoe lijsten worden gemaakt en geef voorbeelden van beide soorten lijsten."},"components":[]},"order":2006,"creationDate":new Date("2023-03-24T14:07:08.117Z"),"isPublic":true,"isFirstPin":false},{"_id":"qzRrgcrtZhwrXdDo8","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"\u003Cb\u003ETabellen maken\u003C\u002Fb\u003E","text2":"Tabellen worden gebruikt om gegevens op te maken en te structureren.","layout":2,"color":1,"opacity":1,"fontSize1":60,"fontSize2":60},"notes":{"text":"Demonstreer hoe tabellen worden gemaakt en waarvoor ze worden gebruikt."},"components":[]},"order":2007,"creationDate":new Date("2023-03-24T14:07:08.389Z"),"isPublic":true,"isFirstPin":false},{"_id":"x3dFFsWeo3aGD8fJ5","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"\u003Cb\u003EFormulieren maken\u003C\u002Fb\u003E","text2":"Formulieren kunnen worden gebruikt om informatie van gebruikers te verzamelen, zoals naam, e-mailadres en bericht.","layout":2,"color":1,"opacity":1,"fontSize1":60,"fontSize2":60},"notes":{"text":"Laat zien hoe formulieren worden gemaakt en hoe verschillende soorten invoerelementen worden gebruikt, zoals \u003Cinput\u003E, \u003Ctextarea\u003E en \u003Cselect\u003E."},"components":[]},"order":2008,"creationDate":new Date("2023-03-24T14:07:09.490Z"),"isPublic":true,"isFirstPin":false},{"_id":"xcYveYRF9mrwAj85B","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"\u003Cb\u003EValidatie en debugging\u003C\u002Fb\u003E","text2":"Validatie is het proces van het controleren van de syntaxis van HTML-code, terwijl debugging het proces is van het opsporen en oplossen van fouten in de code.","layout":2,"color":1,"opacity":1,"fontSize1":60,"fontSize2":60},"notes":{"text":"Geef tips voor het valideren en debuggen van HTML-code en leg uit waarom dit belangrijk is voor webontwikkeling."},"components":[]},"order":2009,"creationDate":new Date("2023-03-24T14:07:09.572Z"),"isPublic":true,"isFirstPin":false},{"_id":"StLN7auepuXE4QDPe","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"openQuestion","custom":{"question":"Schrijf 3 dingen op die je deze les hebt geleerd.","color":9,"opacity":1,"checkAnswer":false,"showImage":false,"align":1,"caseSens":false,"diacriticSens":false,"description":"","fontSize1":60},"notes":{"text":"De leerlingen voeren hier drie dingen in die ze in deze les hebben geleerd. Hiermee geven ze aan wat hun eigen leerrendement van deze les is."},"components":[]},"order":4001,"creationDate":new Date("2023-03-24T14:07:11.527Z"),"isPublic":true,"isFirstPin":false},{"_id":"XwnZSihSmfiZwb6KD","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"openQuestion","custom":{"question":"Schrijf 2 dingen op waarover je meer wilt weten.","color":9,"opacity":1,"checkAnswer":false,"showImage":false,"align":1,"caseSens":false,"diacriticSens":false,"description":"","fontSize1":60},"notes":{"text":"De leerlingen voeren hier twee dingen in waarover ze meer zouden willen weten. Hiermee vergroot je niet alleen betrokkenheid, maar geef je hen ook meer eigenaarschap."},"components":[]},"order":4002,"creationDate":new Date("2023-03-24T14:07:11.620Z"),"isPublic":true,"isFirstPin":false},{"_id":"6HvkpSh88hfoEBkNn","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"openQuestion","custom":{"question":"Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.","color":9,"opacity":1,"checkAnswer":false,"showImage":false,"align":1,"caseSens":false,"diacriticSens":false,"description":"","fontSize1":60},"notes":{"text":"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\u002Fbeheersen, maar ook een goed startpunt voor een volgende les."},"components":[]},"order":4003,"creationDate":new Date("2023-03-24T14:07:11.721Z"),"isPublic":true,"isFirstPin":false}],"eligibleToTeachWithoutCredits":false,"indexedLesson":true},"isLoading":false,"error":false,"lessonId":"eWmydZ2yZ4d8DST5M"},"plan":{"planDetails":undefined,"isLoading":false,"error":false,"planId":undefined},"tooltips":[],"selectPins":[],"followedChannels":[],"savedLessons":[],"organizationPicker":{"organizations":[]},"pins":{"pins":[],"pinCount":0,"teacherPins":[],"isV2Lesson":false},"channel":{"channelDetails":undefined,"slug":undefined,"error":false,"isLoading":false},"channelOverview":{"channels":[],"hasLoaded":false},"featureFlags":["newPinSearch","accountMergeFlag","downloadReportSpreadsheet","joinWithQR","lessonModules","superCSVExports","defaultOrganizationExplorerPermissions","mySchoolsPage","channelStatsVersion2","schoolSuggestionPage","showSchoolLicenseDemoteOption","redeemedVoucherOverview","allEditorFocusWeekImprovements","openAIBeta","lessonEditorV2","showUploadsNext","showSchoolPickerGB","schoolPickerV2","editorUndoRedo","editorPlayerV2","slideDeckImport","editorOpenQuestion","editorMaiaV2Lessons","editorWordCloud","conversionStatusInModal","request-upgrade-to-member"],"geoLocation":{"countryCode":"us"},"error":{"currentError":null}}; window.__SETTINGS = {"app":"search","env":"live","urls":{"teacher":"https://www.lessonup.com/","student":"https://lessonUp.app/","admin":"https://admin.lessonup.com/","api":"https://api.lessonup.com/v1/","search":"https://www.lessonup.com/","site":"https://www.lessonup.com/","graphqlPublicApi":"https://graphql-api.lessonup.com","graphqlInternalApi":"https://graphql-api-internal.lessonup.com","graphqlInternalApiPrivateNetwork":"http://graphql-api-internal","hocuspocus":"wss://hocuspocus.lessonup.com","snowplow":"https://collector.lessonup.com"},"runsOnLocalhost":false,"shadowMode":false,"logAll":false,"defaultShutDownMinutes":10,"build":{"tag":"release-search-2.64.0","version":"2.64.0","branch":"release/2024w46-01"},"graphql":{"baseUrl":"https://graphql-api.lessonup.com"},"sentry":{"dsn":"https://[e-mail]/1546817","disabled":false},"office365":{"clientId":"c8c8b0b4-a661-4dda-be25-befb5d424d1a","tenant":"common"},"ga":{"awId":"AW-952526834","optimizeId":"OPT-MDP7KP4","analyticsV4":"G-DBSWZ6Z27F"},"snowplow":{"collectorEndpoint":"https://collector.lessonup.com","applicationName":"search"},"hotjar":{"id":"2813929"},"intercom":{"id":"x948t0gc","allowAnonymous":false},"mode":"production","apiHost":"/","geoLocation":{"countryCode":"us"}}; window.__LANGUAGE = 'en'; </script> <script src="/search/public/dist/vendors.0d50d72c3fd34008e72f.js"></script> <script src="/search/public/dist/packages.da96a91f58a9ebf625ef.js"></script> <script src="/search/public/dist/client.fcbfea787f86ac82657b.js"></script> </body> </html>