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

tot

,

, , en
.

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" style="background-color:#001343;color:#ffffff" class="pin-container view-mode slide-layout-2 "><div class=" 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<!-- --> -<!-- --> <!-- -->Tekstslide</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" style="background-color:#001343;color:#ffffff" class="pin-container view-mode openQuestion-layout-1 "><div class=" 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 vraag</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" style="background-color:#001343;color:#ffffff" class="pin-container view-mode openQuestion-layout-1 "><div class=" 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 vraag</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" style="background-color:#001343;color:#ffffff" class="pin-container view-mode openQuestion-layout-1 "><div class=" 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 vraag</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">Meer lessen zoals deze</h2><div class="lesson-summary-cards"><div class="base-summary-card lesson-summary-card"><a class="lesson-summary-card__inner" href="/nl/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">Februari 2024</time> - <!-- -->Les met<!-- --> <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="/nl/lesson/y8fS9CWg8h8JfH2wK"><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/lJsy1f0oH4BhtoJbPCrjBDbALsJk627Gwx8tGfcgbSo2694PWsKta3pXfSe99V5NCaSh704HQ1sa8KZv9U7h71PFPtpMyuBmWGNmYs0=s330-rw 1x, https://lh3.googleusercontent.com/lJsy1f0oH4BhtoJbPCrjBDbALsJk627Gwx8tGfcgbSo2694PWsKta3pXfSe99V5NCaSh704HQ1sa8KZv9U7h71PFPtpMyuBmWGNmYs0=s660-rw 2x, https://lh3.googleusercontent.com/lJsy1f0oH4BhtoJbPCrjBDbALsJk627Gwx8tGfcgbSo2694PWsKta3pXfSe99V5NCaSh704HQ1sa8KZv9U7h71PFPtpMyuBmWGNmYs0=s990-rw 3x"/><source srcSet="https://lh3.googleusercontent.com/lJsy1f0oH4BhtoJbPCrjBDbALsJk627Gwx8tGfcgbSo2694PWsKta3pXfSe99V5NCaSh704HQ1sa8KZv9U7h71PFPtpMyuBmWGNmYs0=s330 1x, https://lh3.googleusercontent.com/lJsy1f0oH4BhtoJbPCrjBDbALsJk627Gwx8tGfcgbSo2694PWsKta3pXfSe99V5NCaSh704HQ1sa8KZv9U7h71PFPtpMyuBmWGNmYs0=s660 2x, https://lh3.googleusercontent.com/lJsy1f0oH4BhtoJbPCrjBDbALsJk627Gwx8tGfcgbSo2694PWsKta3pXfSe99V5NCaSh704HQ1sa8KZv9U7h71PFPtpMyuBmWGNmYs0=s990 3x"/><img class="preview-thumbnail__image" src="https://lh3.googleusercontent.com/lJsy1f0oH4BhtoJbPCrjBDbALsJk627Gwx8tGfcgbSo2694PWsKta3pXfSe99V5NCaSh704HQ1sa8KZv9U7h71PFPtpMyuBmWGNmYs0=s330" width="231" height="169" alt=""/></picture></div></div></div></div><div class="lesson-summary-card__bottom"><h3 class="lesson-summary-card__title">03 - HTML - basis</h3><div class="lesson-summary-card__meta-info"><time class="lesson-summary-card__creation-date" dateTime="2024-01-17T20:19:40.685Z">Januari 2024</time> - <!-- -->Les met<!-- --> <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-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="/nl/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">Maart 2024</time> - <!-- -->Les met<!-- --> <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="/nl/lesson/mFou7nuLDjRzy3Cfq"><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/9cIhDe0djUQ5V_g--CIm6pdTYrXciP7BgKdGXHVZ8a9aM4SdOY8sDK_eflCdfGh9tuGKi9XyqZFhFVyomXvnkfT-np-gNuLd03vUkg=s330-rw 1x, https://lh3.googleusercontent.com/9cIhDe0djUQ5V_g--CIm6pdTYrXciP7BgKdGXHVZ8a9aM4SdOY8sDK_eflCdfGh9tuGKi9XyqZFhFVyomXvnkfT-np-gNuLd03vUkg=s660-rw 2x, https://lh3.googleusercontent.com/9cIhDe0djUQ5V_g--CIm6pdTYrXciP7BgKdGXHVZ8a9aM4SdOY8sDK_eflCdfGh9tuGKi9XyqZFhFVyomXvnkfT-np-gNuLd03vUkg=s990-rw 3x"/><source srcSet="https://lh3.googleusercontent.com/9cIhDe0djUQ5V_g--CIm6pdTYrXciP7BgKdGXHVZ8a9aM4SdOY8sDK_eflCdfGh9tuGKi9XyqZFhFVyomXvnkfT-np-gNuLd03vUkg=s330 1x, https://lh3.googleusercontent.com/9cIhDe0djUQ5V_g--CIm6pdTYrXciP7BgKdGXHVZ8a9aM4SdOY8sDK_eflCdfGh9tuGKi9XyqZFhFVyomXvnkfT-np-gNuLd03vUkg=s660 2x, https://lh3.googleusercontent.com/9cIhDe0djUQ5V_g--CIm6pdTYrXciP7BgKdGXHVZ8a9aM4SdOY8sDK_eflCdfGh9tuGKi9XyqZFhFVyomXvnkfT-np-gNuLd03vUkg=s990 3x"/><img class="preview-thumbnail__image" src="https://lh3.googleusercontent.com/9cIhDe0djUQ5V_g--CIm6pdTYrXciP7BgKdGXHVZ8a9aM4SdOY8sDK_eflCdfGh9tuGKi9XyqZFhFVyomXvnkfT-np-gNuLd03vUkg=s330" width="231" height="169" alt=""/></picture></div></div></div></div><div class="lesson-summary-card__bottom"><h3 class="lesson-summary-card__title">WEEK 2 - INFORMATICA</h3><div class="lesson-summary-card__meta-info"><time class="lesson-summary-card__creation-date" dateTime="2023-11-12T07:24:38.178Z">November 2023</time> - <!-- -->Les met<!-- --> <strong>32<!-- --> <!-- -->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="havo" class="ui-tag ui-tag--small bg-cyan">havo</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="/nl/lesson/meZ4N4bsQBCXacrzC"><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/hHj2MagtAX63V1JfpVpPacUvKSCI-vGs98HjMwmZ_jdYqsgcM8Uiul7L3QPODKbuClGaq55Ilsk4PzrxZEsnSts4XKYtO2WgOdK4eA=s330-rw 1x, https://lh3.googleusercontent.com/hHj2MagtAX63V1JfpVpPacUvKSCI-vGs98HjMwmZ_jdYqsgcM8Uiul7L3QPODKbuClGaq55Ilsk4PzrxZEsnSts4XKYtO2WgOdK4eA=s660-rw 2x, https://lh3.googleusercontent.com/hHj2MagtAX63V1JfpVpPacUvKSCI-vGs98HjMwmZ_jdYqsgcM8Uiul7L3QPODKbuClGaq55Ilsk4PzrxZEsnSts4XKYtO2WgOdK4eA=s990-rw 3x"/><source srcSet="https://lh3.googleusercontent.com/hHj2MagtAX63V1JfpVpPacUvKSCI-vGs98HjMwmZ_jdYqsgcM8Uiul7L3QPODKbuClGaq55Ilsk4PzrxZEsnSts4XKYtO2WgOdK4eA=s330 1x, https://lh3.googleusercontent.com/hHj2MagtAX63V1JfpVpPacUvKSCI-vGs98HjMwmZ_jdYqsgcM8Uiul7L3QPODKbuClGaq55Ilsk4PzrxZEsnSts4XKYtO2WgOdK4eA=s660 2x, https://lh3.googleusercontent.com/hHj2MagtAX63V1JfpVpPacUvKSCI-vGs98HjMwmZ_jdYqsgcM8Uiul7L3QPODKbuClGaq55Ilsk4PzrxZEsnSts4XKYtO2WgOdK4eA=s990 3x"/><img class="preview-thumbnail__image" src="https://lh3.googleusercontent.com/hHj2MagtAX63V1JfpVpPacUvKSCI-vGs98HjMwmZ_jdYqsgcM8Uiul7L3QPODKbuClGaq55Ilsk4PzrxZEsnSts4XKYtO2WgOdK4eA=s330" width="231" height="169" alt=""/></picture></div></div></div></div><div class="lesson-summary-card__bottom"><h3 class="lesson-summary-card__title">WEEK 3 - INFORMATIE TECHNOLOGIE</h3><div class="lesson-summary-card__meta-info"><time class="lesson-summary-card__creation-date" dateTime="2024-02-16T10:00:03.167Z">Februari 2024</time> - <!-- -->Les met<!-- --> <strong>30<!-- --> <!-- -->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="havo" class="ui-tag ui-tag--small bg-cyan">havo</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="/nl/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> - <!-- -->Les met<!-- --> <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="base-summary-card lesson-summary-card"><a class="lesson-summary-card__inner" href="/nl/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">Maart 2024</time> - <!-- -->Les met<!-- --> <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="/nl/lesson/yiJhk2aYg3nPDhPKd"><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/TBVG2rSBBr1BrXJ9jlSnATyHrhfT800-NLhqqBiYWC6nSXx_uBYOp2noiMPyeMuYCnEuqDPXUq9tr2jfkBrp8lA9dBBI0pR40F4EOZs=s330-rw 1x, https://lh3.googleusercontent.com/TBVG2rSBBr1BrXJ9jlSnATyHrhfT800-NLhqqBiYWC6nSXx_uBYOp2noiMPyeMuYCnEuqDPXUq9tr2jfkBrp8lA9dBBI0pR40F4EOZs=s660-rw 2x, https://lh3.googleusercontent.com/TBVG2rSBBr1BrXJ9jlSnATyHrhfT800-NLhqqBiYWC6nSXx_uBYOp2noiMPyeMuYCnEuqDPXUq9tr2jfkBrp8lA9dBBI0pR40F4EOZs=s990-rw 3x"/><source srcSet="https://lh3.googleusercontent.com/TBVG2rSBBr1BrXJ9jlSnATyHrhfT800-NLhqqBiYWC6nSXx_uBYOp2noiMPyeMuYCnEuqDPXUq9tr2jfkBrp8lA9dBBI0pR40F4EOZs=s330 1x, https://lh3.googleusercontent.com/TBVG2rSBBr1BrXJ9jlSnATyHrhfT800-NLhqqBiYWC6nSXx_uBYOp2noiMPyeMuYCnEuqDPXUq9tr2jfkBrp8lA9dBBI0pR40F4EOZs=s660 2x, https://lh3.googleusercontent.com/TBVG2rSBBr1BrXJ9jlSnATyHrhfT800-NLhqqBiYWC6nSXx_uBYOp2noiMPyeMuYCnEuqDPXUq9tr2jfkBrp8lA9dBBI0pR40F4EOZs=s990 3x"/><img class="preview-thumbnail__image" src="https://lh3.googleusercontent.com/TBVG2rSBBr1BrXJ9jlSnATyHrhfT800-NLhqqBiYWC6nSXx_uBYOp2noiMPyeMuYCnEuqDPXUq9tr2jfkBrp8lA9dBBI0pR40F4EOZs=s330" width="231" height="169" alt=""/></picture></div></div></div></div><div class="lesson-summary-card__bottom"><h3 class="lesson-summary-card__title">bkup 03-HTML-document</h3><div class="lesson-summary-card__meta-info"><time class="lesson-summary-card__creation-date" dateTime="2021-12-19T09:50:09.072Z">December 2021</time> - <!-- -->Les met<!-- --> <strong>37<!-- --> <!-- -->slides</strong></div><div class="ui-tags lesson-summary-card__tags"><span title="Communication & multimedia design" class="ui-tag ui-tag--small bg-yellow">Communication & multimedia design</span><span title="HBO" class="ui-tag ui-tag--small bg-cyan">HBO</span><span title="Studiejaar 2" class="ui-tag ui-tag--small bg-cyan">Studiejaar 2</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="/nl/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="/nl/voorwaarden" class="search-footer-nav-item">Algemene voorwaarden</a><a href="/nl/privacy" class="search-footer-nav-item">Privacy Statement</a><a href="/nl/cookie-statement" class="search-footer-nav-item">Cookie Statement</a><a href="/nl/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">Nederlands</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="f613636d-71b4-44f0-ba85-18376bedf434"> window.__INITIAL_STATE = {"search":{},"searchPins":{},"user":{},"ratings":{"userRatings":{}},"cluster":{},"lesson":{"lessonDetails":{"lesson":{"_id":"eWmydZ2yZ4d8DST5M","user":"Pyj8vaMrqEwD2Z5dA","name":"Basis HTML: Leer de grondbeginselen van webontwikkeling","region":["nl"],"country":["nl"],"showPhases":true,"sharing":{"sharePublic":false},"privacy":"public","schoolType":[],"levels":[],"years":[],"subjects":[],"creationDate":"2023-03-24T14:07:07.028Z","pinCount":15,"pinCountForLesson":15,"pinCountForStudent":15,"location":{"explorer":"rvGXR4n5HSMtZ32Cz","folder":"4e25c56f9152b24c2959d054"},"products":[],"order":"a2","modifiedDate":"2023-03-24T14:07:12.002Z","openendDate":"2023-03-24T14:07:07.088Z","thumbnail":{"url":"https://lh3.googleusercontent.com/ZfaruJ8aAtGgBLJn74mK3-iIuQ-Y65jsrSu0AXG09NYtdsp3ZKDmcQzE1iucpZPlkdnNpYZanW-lwJnQ8LPwqju0jwyQ31zQsg3_RkTA","modifiedDate":"2023-03-24T14:11:43.465Z","hash":"f380843729f8c4a928a27c0dc7deaa1c","v":3}},"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://lh3.googleusercontent.com/uz91yOUpniAUDa-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/beheersen, 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":72.51243},{"_id":"y8fS9CWg8h8JfH2wK","_index":"lessons-nl-1642004322162","doc":{"_id":"y8fS9CWg8h8JfH2wK","lesson":{"_id":"y8fS9CWg8h8JfH2wK","user":"mHAZ2Wy25PBA2jjey","name":"03 - HTML - basis","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-17T20:19:40.685Z","pinCount":12,"pinCountForLesson":12,"pinCountForStudent":12,"location":{"explorer":"sNCc2PpwAeMujefDg","folder":"MgXh3rJzx4ysN4awz"},"version":"v1","source":"openAi","products":[],"order":"a2","modifiedDate":"2024-02-06T16:22:15.373Z","openendDate":"2024-02-06T16:22:24.917Z","thumbnail":{"url":"https://lh3.googleusercontent.com/lJsy1f0oH4BhtoJbPCrjBDbALsJk627Gwx8tGfcgbSo2694PWsKta3pXfSe99V5NCaSh704HQ1sa8KZv9U7h71PFPtpMyuBmWGNmYs0","modifiedDate":"2024-01-22T17:54:15.577Z","hash":"33e2a4cdc26507cd5cd6559f16d8c8a0","v":3},"durationInMin":60},"firstPin":{"_id":"BcMnZKekenXRSNf94","user":"mHAZ2Wy25PBA2jjey","lesson":"y8fS9CWg8h8JfH2wK","item":{"type":"slide","custom":{"text1":"Je eerste webpagina!","text2":"","layout":1,"color":301,"colorbg":"#001343","colorfg":"#ffffff","opacity":100,"fontSize1":60,"fontSize2":60,"align2":2,"showImage":true},"notes":{"text":""},"components":[],"image":"https://lh3.googleusercontent.com/TsWG3tn1LpSCaODwxvaXhs9tUSRuqmaUSloJVKVXGitSzbIcAjoZe0jjKMRgaZcRjNvZ7NETTl6RpBEokCu3qE7oohQV9nJHZCTfyVU","uploadId":"9d58d0a3-1224-4b09-8750-64105b640930"},"order":1001,"creationDate":"2024-01-17T20:19:40.726Z","isPublic":true,"isFirstPin":true},"indexedContent":{"important":["Je eerste webpagina!","Leerdoel","Aan het einde van de les kun je de minimale code schrijven om een eenvoudige HTML-pagina te maken.","Wat is HTML?","HTML staat voor HyperText Markup Language. Het is de standaardtaal voor het maken van webpagina's en webapplicaties.","Benodigde structuur","Een HTML-pagina heeft een basale structuur bestaande uit de <HTML>, <head> en <body>  elementen.","<!DOCTYPE html><html>    <head>          <!-- Informatie over de pagina -->\n    </head>    <body>          <!-- Inhoud van de pagina -->    </body></html>","Doctype declaratie","Een HTML-document begint met een doctype declaratie, die aangeeft welke versie van HTML wordt gebruikt.","Titel van de pagina","tag wordt gebruikt om de titel van de webpagina in de browser weer te geven.","<!DOCTYPE html><html>    <head>          <title>titel pagina</title>    </head>    <body>          <!-- Inhoud pagina -->    </body></html>","De title kan worden toegevoegd middels de <title> tag. Deze wordt in de <head> tag geplaatst.","Tekst en afbeeldingen","<!DOCTYPE html><html>    <head>          <title>titel</title>    </head>    <body>          Plaats hier je tekst         en afbeeldingen    </body></html>","Tekst en afbeeldingen kunnen worden toegevoegd aan de <body> van de HTML-pagina met behulp van verschillende tags.","Opslaan en bekijken","Na het schrijven van de HTML-code kan de pagina worden opgeslagen met de extensie .html en in een webbrowser worden bekeken.","Eindresultaat","Gefeliciteerd! Je hebt zojuist je eerste HTML-pagina gemaakt en bekeken in een webbrowser.","Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.","Benodigde structuur","<!DOCTYPE html><html>    <head>          <!-- Informatie over de pagina -->\n    </head>    <body>          <!-- Inhoud van de pagina -->    </body></html>","Een HTML-pagina heeft een basale structuur bestaande uit de <HTML>, <head> en <body> elementen.","03 - HTML - basis","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/beheersen, maar ook een goed startpunt voor een volgende les."]},"pinHashes":["1da85261653b3694ecbd5e0ab0c6c9185d3f2ad5470f991f5047578c7a34b15d","3392aee73274e5bcb35802af94143bb36f9898a5e9561f7586d9bb4263c2f46a","39826075908e2f32c0c508200c036a1cafbfdee22e5b14d3fe6fd01d04ba5125","7791f32f50213a98977d016171e5cebef7087df152f18a0b0525c231a4f4c5db","7c7723c7f0ad13984db2d647da4a263327ce7bee971ea3dc821a1283b49dc4ab","8b8b1642c7d04bfbf4f947463f6383c4de6292dac12eb301e3ed7c8432b3166c","9646f77d25982d23f9fd52afd0302315dd5a598bc573037c8c951b57b9197ac1","b672f848fd1e81eefe3bf0af57509031d4b830fff3f46104e5e7637eea31c9f3","c7e985983dfc588b86c1a5762d9c0ee8f78c6674895f45f355ca064128050735","ca31fa44af2ed1293b55092790737c984511064df5a7e8342172336bf4d28527","e2ee7085abe7595164621e74092081c13c019cd5800152fb09afc1f45f28e309","e36609ee9b65365da4bafb85324469997223e0cf8657eaa0dde7c7a256dde54f"],"docType":"lesson","metaData":{"creationDate":"2024-01-17T20:19:40.685Z","country":["nl"],"schoolType":["mbo"],"levels":["n3","n4"],"years":[18,19,20,21],"organizations":["Z4deW6MoAs2t5jTEB"],"subjects":["ICT"],"privacy":"public","isTest":false},"statistics":{"id":"y8fS9CWg8h8JfH2wK","copiedCount":0,"sharedCount":0,"assignmentsCreatedCount":0,"testStartedCount":0,"finishPresentingCount":0,"averageRating":0,"ratingCount":2},"hash":"ffde63507bc6adb25032f17f909a4563b7a4e50919f60827344035a92d10fefb","cluster":{"winner":true,"size":1,"id":"w_y8fS9CWg8h8JfH2wK_i_y8fS9CWg8h8JfH2wK"},"curricula":{"list":[],"objectives":[]},"contentTypes":["slide","wordweb","openQuestion"]},"score":54.185642},{"_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://lh3.googleusercontent.com/TcMRwC8fDXN3LZCN14v1toU-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://lh3.googleusercontent.com/TsWG3tn1LpSCaODwxvaXhs9tUSRuqmaUSloJVKVXGitSzbIcAjoZe0jjKMRgaZcRjNvZ7NETTl6RpBEokCu3qE7oohQV9nJHZCTfyVU","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)","// HTML\n<form>\n          <label for=\"age\">Leeftijd:</label><br>\n        <input type=\"text\" id=\"age\" name=\"age\"                onkeyup=\"validateAge()\">\n        <p id=\"message\"></p>\n</form>","// 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</script>","INTERN","<script src=\"mijnScript.js\"></script>","<button onclick=\"alert('Hallo Wereld!')\">Klik op mij</button>","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://www.codecademy.com/learn/introduction-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/beheersen, 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.9668},{"_id":"mFou7nuLDjRzy3Cfq","_index":"lessons-nl-1642004322162","doc":{"_id":"mFou7nuLDjRzy3Cfq","lesson":{"_id":"mFou7nuLDjRzy3Cfq","user":"b7FrQAps8ZyCQyPkh","name":"WEEK 2 - INFORMATICA","privacy":"public","products":[],"order":"a0","location":{"explorer":"WHeuF2rBXbtpj5yZS","folder":"X57Z5rdNcg2Sux5wH"},"sharing":{"sharePublic":true,"shareDate":"2023-11-12T07:24:38.178Z"},"creationDate":"2023-11-12T07:24:38.178Z","openendDate":"2023-11-14T05:02:38.083Z","modifiedDate":"2023-11-14T05:04:48.557Z","trail":[],"region":["nl"],"country":["nl"],"levels":["H"],"years":[15],"subjects":["Informatica"],"schoolType":["vo"],"durationInMin":90,"showPhases":false,"isTest":false,"pinCount":32,"pinCountForLesson":32,"pinCountForStudent":32,"origin":{"id":"yXTKwD798YgJwmaF3","date":"2023-11-12T07:24:38.178Z"},"thumbnail":{"url":"https://lh3.googleusercontent.com/9cIhDe0djUQ5V_g--CIm6pdTYrXciP7BgKdGXHVZ8a9aM4SdOY8sDK_eflCdfGh9tuGKi9XyqZFhFVyomXvnkfT-np-gNuLd03vUkg","modifiedDate":"2023-11-14T05:09:17.721Z","hash":"4d67f4e5279d93d2928d114f505db165","v":3}},"firstPin":{"_id":"K4kwv2EyhS9TAcLic","item":{"source":"slide","type":"slide","name":"Slide","url":null,"custom":{"layout":2,"text1":"STARTKLAAR!","text2":"","align1":1,"align2":1,"showImage":true,"opacity":100,"imageSize":"contain","font1":"arial","color":1},"components":[{"_id":"KyWtJYMFofQ5HH5Wx","position":{"left":14.58,"top":32.273,"bottom":11.92,"right":16.31},"scale":{"x":1,"y":1},"creationDate":"2023-03-21T06:45:20.949Z","user":"qSSSXifQYNrqDNPWd","settings":{"transparency":100,"imageSize":"contain","borderRadius":"0","allowZoom":false,"correctDropzone":[],"dropzoneSnapback":true,"url":"https://lh3.googleusercontent.com/X8vpIHP9PMEMr2HQgQoEzronaIlru258o9iAVOjwM4kU5S20WBDg0JwGILYjSOOg_V9zKv4wNAK6Ptiv5C8Ku_ryvGw0-_DGmfK6nA"},"type":"image","origin":"image"},{"_id":"xE97rk24D3Y4rmwcp","position":{"left":24.522,"top":68.554,"bottom":16.446,"right":53.516},"scale":{"x":1,"y":1},"creationDate":"2023-06-11T09:16:27.958Z","user":"qSSSXifQYNrqDNPWd","settings":{"color":"white","strokeColor":"white","strokeWidth":"0","strokeDash":"0","correctDropzone":[],"dropzoneSnapback":true,"symbol":"rectangle"},"type":"symbol","origin":"symbol"},{"_id":"6e5277qsXG2YnnZ9K","position":{"left":25.875,"top":71.749,"bottom":19.641,"right":53.34},"scale":{"x":1,"y":1},"creationDate":"2023-11-09T08:38:14.476Z","user":"b7FrQAps8ZyCQyPkh","settings":{"text":"Tellie in zakkie","backgroundColor":"none","fontFamily":"arial","fontSize":"40","textAlign":"align-left","verticalAlign":"vertical-align-top","padding":1,"borderColor":"none","borderWidth":"0","borderRadius":"0","columns":1,"correctDropzone":[],"dropzoneSnapback":true},"type":"text","origin":"text"}],"uploadId":"vynjzHpqZXYNk8aBE","__isSavedPin":true,"__tempLessonId":1,"__itemIndex":0,"__hasPrev":false,"__hasNext":true,"modifiedDate":"2023-11-12T07:24:38.192Z","notes":{"text":"Startklaar zitten."}},"user":"b7FrQAps8ZyCQyPkh","lesson":"mFou7nuLDjRzy3Cfq","creationDate":"2023-11-12T07:24:38.192Z","order":0.5,"shouldIndex":"2023-11-12T07:24:38.193Z","trail":[],"isFirstPin":true},"indexedContent":{"important":["week 2 les 1","Deze periode","Werken aan het project- Scrum- HTML & CSS- Programmeren- Version Control System","Voorkennis activeren","Waar gebruiken wij een version control systeem","Wat is het verschil tussen remote en lokal repository?","Benoem het proces van scrum","LEERDOELEN","De leerling kan de basisbeginselen van HTMLDe leerling kan een code edit programma gebruiken om een HTML pagina te makenDe leerling kan een eenvoudig HTML pagina maken","Basisbeginselen HTML","HTML is een opmaak taal om websites mee te ontwikkelenAfkorting staat voor HyperText Markup LanguageHTML wordt vaak in combinatie met CSS en Javascript gebruiktHTML noemen wij ook declaratieve taalHet is een genestelde taalBij genesteld spreken wij van een parent en childChild is genesteld in parent","Code editor","HTML code schrijven kan je schrijven in een notepad of een code editor als visual code","Notepad","Visual code","Jouw eerste HTML pagina","In teams staat een opdracht klaar. Ga daarmee aan de slag","Samenvatting","Klasikaal invullen met leerlingen","week 2 les 2","STARTKLAAR!","Tellie in zakkie","Voorkennis activeren","Werken aan opdracht","De opdracht staat klaar in teams","Basisbeginselen HTML","HTML bestaat uit HTML tags.Een HTML tag is bijvoorbeeld <button>De voorbeeld hier boven is slechts 1 van de honderdend HTML tags.<head>, <body>, <h1>, <h2>, <div>, <nav>, <footer>, <span> enzovoort.....Bijna elke HTML tag heeft een open tag en een sluit tag. Bijvoorbeeld:<head> heeft </head><body> heeft </body>enzovoort","Basisbeginselen HTML","HTML bestaat uit HTML tags.Een HTML tag is bijvoorbeeld <button>De voorbeeld hier boven is slechts 1 van de honderdend HTML tags.<head>, <body>, <h1>, <h2>, <div>, <nav>, <footer>, <span> enzovoort.....Bijna elke HTML tag heeft een open tag en een sluit tag. Bijvoorbeeld:<head> heeft </head><body> heeft </body>enzovoort","Plaats in de goede volgorde","<!DOCTYPE html>","<html>","<head>","<body>","<title>","<div>","</body>","</html>","</div>","</title>","</head>","Basisbeginselen HTML","Wanneer wij HTML gebruiken dan moeten wij ons houden aan de basisstructuur van HTML.Die bestaat uit minimaal 4 HTML tags, namelijk:<!DOCTYPE html><html></html><head></head><body></body>","Basisbeginselen HTML","Dehead en body zijn childs van HTML. Dit betekend dat head en body genesteld zijn in html tag. Dat zier er als volgt uit<!DOCTYPE html><html>            <head></head>            <body></body>\n</html>","Dit mag niet<!DOCTYPE html><html>\n            <head> </html> </head>\n            <body></body>","of dit mag ook niet<!DOCTYPE html><html>\n            <head>  </head>\n            <body></html></body>","Basisbeginselen HTML","In head en body kan je weer meerdere html tags plaatsen. Maar hanteer wel de regels van parent en child, anders is het fout.","STARTKLAAR!","Tellie in zakkie","Plaats in de goede volgorde","<!DOCTYPE html>","<html>","<head>","<body>","<title>","</body>","</html>","</title>","</head>","<img>","HTML Beginselen","Sommige HTML tags hebben alleen een begin tag en geen eind tag. Bijvoorbeeld <img>, <br>, <hr> enz.Hier zijn er niet veel van.","HTML Beginselen","HTML element","Een HTML tag kan attributen noemen.dit zijn eigenschappen die de HTML tag kan beinvloeden","Basisbeginselen HTML","HTML Beginselen","HTML element beinvloeden","Een HTML tag kan attributen bevatten.dit zijn eigenschappen die de HTML element kan beinvloeden.de style attribuut beinvloed de style van het HTML element.Zo zijn er nog andere attributen","Basisbeginselen HTML","HTML bestaat uit HTML tags.Een HTML tag is bijvoorbeeld <button>De voorbeeld hier boven is slechts 1 van de honderdend HTML tags.<head>, <body>, <h1>, <h2>, <div>, <nav>, <footer>, <span> enzovoort.....Bijna elke HTML tag heeft een open tag en een sluit tag. Bijvoorbeeld:<head> heeft </head><body> heeft </body>enzovoort","Plaats in de goede volgorde",">","\"","<h1","color:blue",";","style","text-align:center","=","ik heet meester","\"","</h1>","Plaats in de goede volgorde","<img","alt=\"Girl with a jacket\"",">","src=\"img_girl.jpg\"","width=\"500\"","height=\"600\"","LEERDOELEN","De leerling kan een eenvoudig HTML pagina maken","Samenvatting","klasikaal bespreken","WEEK 2 - INFORMATICA","Informatica"],"normal":["Slide","Slide","Slide","openvraag","openvraag","openvraag","Slide","Slide","Slide","Slide","Slide","Slide","Slide","Startklaar zitten.","Slide","Slide","Slide","Slide","dragQuestion","Slide","Slide","Slide","Slide","Startklaar zitten.","dragQuestion","Slide","Slide","Slide","Slide","Slide","dragQuestion","dragQuestion","Slide","Slide"]},"pinHashes":["05d84578d4cea2a2a7839b5818e8d696afb212b605d177257c783bdf7064362e","05d84578d4cea2a2a7839b5818e8d696afb212b605d177257c783bdf7064362e","0a3c1cdcf97e230763baeb3f417e9a8bbead931fc8839d3e45c0063c169eb10a","0ed6d992919fd9feacb71ad64f302d2f357684ed414da41bfcfac0b1e20de1d2","11cdeab59acf83ff1e797227c3990b57dac620998136acd617d1888c188a94fc","1cce281984b92b082a2093779ac086a1f5a105ec8e87f86048f5e936adcb7ec0","42345585e1780ee3f8ffca39a272e09ee71755ed810dc8abc6f7d3248e0a3d74","4c1544550b699359cf19b4e4ec43fbb8565204435c334e3b9e9ada187eea581a","58456beac391cdd37a7ee537c8acb43ec4772ab9073e2cfbb60779ab04b0f565","5e774eee794e967f25a7fdc42d9085aeefb786f9ac0b4b2b8f6742d1d61b2270","69d68422c8a66f75e3a9c17986732543eaa0b8d6f8cf61bcba01eb4acdc2b95a","69d68422c8a66f75e3a9c17986732543eaa0b8d6f8cf61bcba01eb4acdc2b95a","8161e7d47b05a12783c27d4144bdb5a645931981872194caa6ea4bfb4275e238","897f9f528062062838746bd305efecd4435fc9821900f6d809dc70f8029bf47f","9b347c5c84ca62cdcef2c2e8463e6a24abb9029a873afc058cbf3c3f7ad864a2","9b36b4fb4e742576c5d62094a91d1645ceb4bac98c9a10acfc408389e42d5dbe","af06b3ed1165599a356168300815f71b554a3d1acbb8fd60e2e269dc0a4d11a2","af1c8857231b8ddc1855bd45fa20a1651816418d49b9899338d9d97916ab820c","af1c8857231b8ddc1855bd45fa20a1651816418d49b9899338d9d97916ab820c","af1c8857231b8ddc1855bd45fa20a1651816418d49b9899338d9d97916ab820c","bc9c9527df3ad4d0920e27d6780ecb1f7cfb4a6f928eb4eff161658d8e07f7b0","bd31f28f2dfd3d84653fc4136e6a124aa94ba025f51e5745ab45f73386d50eca","c06e3adb9a2730dcba8e66651c5e63ab44c63dccec9f9c4f197c648bd258e363","c8c49e3b68e9d002734e80abb071028931b08ec8ba369fc9339e37ebedf60147","d51c0ebb0ad01c14e834e92a2a468bf66faec9ce2ac44cf81038c323bc46cb15","d529788b9bc8ecc202660f3c24b717eb8432378f6a6a26cde8534bcb4f79cfeb","ef444abd124b0ce185d3c4d7ed62a286d4c40c5d5283b004719788d89ecb473b","f1dd2886b8ddcb7a6e4a600d7549632c20ee424c8c7591f759bb7987aab44c57","f1fa1036446c8b16a2be06f4f7a91415ffbf7c1d936634cc8836af77bc2807cc","f4ab9e6a7a10746f07e490102b8dc547dc775bd385b6c728def5d0485669ebca","fab312b0fbad42b149b3bb13b1dd762f56b713b707c555eb2f4fda110b056114","ff1a7eb07833e7bba53682a57aeb16e46724cea9966fd946b83f1def74d982ed"],"docType":"lesson","metaData":{"creationDate":"2023-11-12T07:24:38.178Z","country":["nl"],"schoolType":["vo"],"levels":["H"],"years":[15],"organizations":["o97T3ZZnFS6tXhPMD"],"subjects":["Informatica"],"privacy":"public","isTest":false},"statistics":{"id":"mFou7nuLDjRzy3Cfq","copiedCount":0,"sharedCount":0,"assignmentsCreatedCount":0,"testStartedCount":0,"finishPresentingCount":0,"averageRating":0,"ratingCount":2},"hash":"14bfbf9be8f0f2d765f7d1ea998aba698cb3836938873e3b860f810569d4e160","cluster":{"winner":true,"size":2,"id":"w_mFou7nuLDjRzy3Cfq_i_mFou7nuLDjRzy3Cfq"},"curricula":{"list":[],"objectives":[]},"contentTypes":["slide","openQuestion","dragQuestion"]},"score":47.793262},{"_id":"meZ4N4bsQBCXacrzC","_index":"lessons-nl-1642004322162","doc":{"_id":"meZ4N4bsQBCXacrzC","lesson":{"_id":"meZ4N4bsQBCXacrzC","user":"b7FrQAps8ZyCQyPkh","name":"WEEK 3 - INFORMATIE TECHNOLOGIE","privacy":"public","products":[],"order":"a1","location":{"explorer":"WHeuF2rBXbtpj5yZS","folder":"uNywreZX3znX5SHoy"},"sharing":{"sharePublic":true,"shareDate":"2024-02-16T10:00:03.167Z"},"creationDate":"2024-02-16T10:00:03.167Z","openendDate":"2024-02-16T10:12:57.312Z","modifiedDate":"2024-02-16T10:13:00.556Z","trail":[],"region":["nl"],"country":["nl"],"levels":["H"],"years":[15],"subjects":["Informatica"],"schoolType":["vo"],"durationInMin":90,"showPhases":false,"isTest":false,"pinCount":30,"pinCountForLesson":30,"pinCountForStudent":30,"origin":{"id":"8jPbzNPyAMfcvuKNc","date":"2024-02-16T10:00:03.167Z"},"thumbnail":{"url":"https://lh3.googleusercontent.com/hHj2MagtAX63V1JfpVpPacUvKSCI-vGs98HjMwmZ_jdYqsgcM8Uiul7L3QPODKbuClGaq55Ilsk4PzrxZEsnSts4XKYtO2WgOdK4eA","modifiedDate":"2024-02-16T10:15:13.916Z","hash":"d1860f80574b165b0a7d5f64a1dc09e5","v":3}},"firstPin":{"_id":"bDowMh8eA3Y25WJX5","item":{"source":"slide","type":"slide","name":"Slide","url":null,"custom":{"layout":2,"text1":"week 3 les 1","text2":"","align1":1,"align2":2,"showImage":true,"color":1,"fontSize2":"50","opacity":100},"components":[],"modifiedDate":"2024-02-16T10:00:03.187Z","uploadId":"499118a1-3034-4c8f-9d72-630cdbb68c97"},"user":"b7FrQAps8ZyCQyPkh","lesson":"meZ4N4bsQBCXacrzC","creationDate":"2024-02-16T10:00:03.187Z","order":0.25,"shouldIndex":"2024-02-16T10:00:03.187Z","trail":[],"isFirstPin":true},"indexedContent":{"important":["week 3 les 1","STARTKLAAR!","Tellie in zakkie","Deze periode","- Programmeren- HTML & CSS- Database & SQL Qeury- Windows en Office via DIGIT-VO","Deze periode","Jullie gaan een formulier met HTML & CSS maken waarbij het ingevulde formulier opgeslagen wordt in een database","Voorkennis activeren","Wat is waar als wij het hebben over HTML?","wat is de afkorting van HTML","Wat is waar als wij het hebben over CSS?","Wat is een database","Zoek uit wat een database is, schrijf dit op een post it en plak het op het bord","LEERDOELEN","De leerling is bewust van het nut van een database en kan een voorbeeld noemen waar dit wordt toegepastDe leerling is bewust van de structuur van een database zoals tabellen, kolommen en rijenDe leerling is bewust van het belang van een primaire sleutel in een databaseDe leerling kan simpele handelingen uitvoeren op een database zoals een rij verwijderenDe leerling kan zich inspannen om het gewenste tijdsinspanning te halen voor digit-vo","Database oefenen","https://dbstudent.com/ Maak hatsup.v1 volledig af.Ben je hiermee klaar ga dan verder met hatsup.v2 enz.","Samenvatting","Klasikaal invullen met leerlingen","week 3 les 2","STARTKLAAR!","Tellie in zakkie","Voorkennis activeren","LEERDOELEN","De leerling kan een webpagina maken met de extentie HTMLDe leerling kan de basis structuur van HTML toepassen in de webpagina","Basisstructuur HTML","Ik kan nu voorbeelden geven van waar een database gerbuikt kan worden","Samenvatting","Klassikaal","Wat is de functie van HTML?","Wat is een voorbeeld van een HTML-element?","Wat is het doel van CSS?","Wat is een voorbeeld van een CSS-eigenschap?","HTML zonder CSS","Dit is alleen HTML code","Dit is HTML met CSS","HTML basis structuur","HTML bestaat voornamelijk uit HTML tags en begint altijd met een basisstructuureen html tag is bijvoorbeeld <html> </html><head> </head>er bestaan heel veel html tags","html basisstructuur","HTML Elements","<p style=\"color:red\"> paragraaf </p>","HTML element","HTML element","Een HTML tag kan attributen noemen.dit zijn eigenschappen die de HTML tag kan beinvloeden","CSS","Om de website mooier te maken","HTML Tags","<h1> Aziz </h1>  =","Aziz","<ul>\n  <li>something</li>\n  <li>something</li>   =   <li>something</li>\n</ul>","somethingsomethingsomething","<ol>\n  <li>something</li>\n  <li>something</li>   =   <li>something</li>\n</ol>","somethingsomethingsomething","En zo heb je nog meer html tags","WEEK 3 - INFORMATIE TECHNOLOGIE","Informatica"],"normal":["Slide","Slide","Startklaar zitten.","Slide","Slide","Slide","is een programmeertaal","is een opmaaktaal","Deze gebruik je voor de stijl van jopuw website","Deze gebruik je om jouw website in te delen","Vraag","Hypertext markup language","Hypertext madeup language","Hypertext manipulate language","Hypertext makeup language","is een programmeertaal","kan alleen gebruikt worden met HTML","Deze gebruik je voor de stijl van jopuw website","Deze gebruik je om jouw website in te delen","Slide","Woordweb","Slide","Slide","Slide","Slide","Slide","Startklaar zitten.","Slide","Slide","Slide","poll","Slide","Programmeren van apps","Aanmaken van databases","Opmaak van afbeeldingen","Structureren van webpagina's","function()","","if-else statement","","Opmaak van webpagina's verbeteren","Het schrijven van server-side code","Berekeningen uitvoeren in JavaScript","Font-size: 16px","Slide","Slide","Slide","Slide","Slide","Slide"]},"pinHashes":["05d84578d4cea2a2a7839b5818e8d696afb212b605d177257c783bdf7064362e","05d84578d4cea2a2a7839b5818e8d696afb212b605d177257c783bdf7064362e","1a0f9378d0158f4f06bb62686f721c7bf5de1248a0749b3134dd37c052aa57f5","26974363966e5924c00e6a3d397661f815284ad7bd789cc1ed2f8c21dbd60534","29083ca701ede4f977cfbc427ccd20d400a3ce610fb7accf0f905fcf36408422","2a869d1337d3aa3f9153efb38ed15025f5e66ee978fa6b4ed9c8854fa9f6f6e3","3eef39c4b3a57b4baedef7d169dba13a55f59f16048b4a0be60ef8f20af8a87e","456fc01c89e9332ced8b02cb11c867702c24503c9bfd569e819526ddfc56a7bf","465b3e0203e52e75fb31a6f1dcde73e49e11ac4408080025690c86f342379a40","4a9c673ce97ce22f051370178474aef057366102b4e7b6764b5e539963b64cd7","500c97c67361c27fb22d574ae573614ea866b91941c02a3d2194aa753b8ded2a","541649776bd0d6861a0959fe74aafbfa3acdb47b89f2b885e5dafbe7b7ba4847","5753019a07f621343692f2de49a1f7508efc744c30b93ee13a430834623980ad","58456beac391cdd37a7ee537c8acb43ec4772ab9073e2cfbb60779ab04b0f565","592998849e6c2dc4bdb7460aa5209e6981842077a9cbd582a31a33a8d8cbba5f","675c7e3b7e51d999d5b3213a7d265109cd79f58450e9360850afc080f5500591","69d68422c8a66f75e3a9c17986732543eaa0b8d6f8cf61bcba01eb4acdc2b95a","84006e20a9b48eccd04e10e36e0a1a83a0fb807093b195b72f23a3c997eb8947","912f66dbe389e4f95b839c168c9a1c56bccc143f0ef1a70f50be33a5afd5faae","91dae27099d8f18edf32b2b3a42563fefa33955875addfdbd3684d05cf254e9d","b6db668a7ef2f808339683b9697b6a4ba8f1775fe2b2df80a07af3bcd6d43c7d","b7a749181b6cedfdcfbda244f2fb6558cd2c8e73a0f77fe12195867c0ee0674f","be52bcafe68c6f9664113ff878d623c550d05dfa5cd365dfcfa8179fc438de22","c3dc75b85e935b66e9293d1d2fe417944b3b1ba19467e8948c5bedcb3dc030eb","cb3f26d269e586282ba58a6f8b4744a16d5277e5ddc9a6af8a02a6f0a5980914","cf9424a0a5d9f2bd402c45c3869fffe610c4fca77639a23814953afbaafd2fd5","e5635703998b5054f2b5dbe3451b4fca284e9ecc52c6f58e15745a314ae1c270","e8b112f6e6905ba694b2854f0a4af6d0a3e4caaa4c95fe7ed5a7766a610a37b7","ef1c4689b042bdf104e6c2247658f2730e47c9a6893aa267354afaf0e2bfbf95","f659c5d5a413cf3bf72156467e50b0f67186d253722cf0fb70409d5a33343c8c"],"docType":"lesson","metaData":{"creationDate":"2024-02-16T10:00:03.167Z","country":["nl"],"schoolType":["vo"],"levels":["H"],"years":[15],"organizations":["o97T3ZZnFS6tXhPMD"],"subjects":["Informatica"],"privacy":"public","isTest":false},"statistics":{"id":"meZ4N4bsQBCXacrzC","copiedCount":0,"sharedCount":0,"assignmentsCreatedCount":0,"testStartedCount":0,"finishPresentingCount":0,"averageRating":0,"ratingCount":2},"hash":"a3fa8706428b1cb5c2e344179afe359ee7ddc64aa864de41059f3d5dd96d8230","cluster":{"winner":true,"size":2,"id":"w_meZ4N4bsQBCXacrzC_i_meZ4N4bsQBCXacrzC"},"curricula":{"list":[],"objectives":[]},"contentTypes":["slide","question","wordweb","poll"]},"score":47.68157},{"_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://lh3.googleusercontent.com/TdQwtjE7swTBA1B9d-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://lh3.googleusercontent.com/7-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/Directory Html aanmakenBrackets/NotepadDocumentatie: www.w3schools.com/Charset: عربيّة, Ελληνικά, 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://validator.w3.org","Code Along!","Tags!","De basis van elke website!Tags: code om de tekst te structureren of vorm te geven1. Open tags: <br /> of <hr />2. Container tags: <p>paragraaf</p>     <h1>titeltje</h1>","Open","Open","Sluiten","Sluiten","Structuur","Typische opbouw van een pagina","Code geldig maken","Pagina die je hebt gemaakt valideren op:http://validator.w3.org/","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://www.youtube.com”>Let's watch some clips!</a>-Relatieve koppeling (Geeft de bestandnaam en de mapverwijzing)<a href=“profiel.html”>naar mijn profiel</a>","Attribute","Waarde","Interne koppeling","Ankers<p id=\"goingUp\"> this side up </p><a href=\"#goingUp \"> Back to top </a>","Afbeelding","Tag: <img/>","<img src=\"images/spiderman_cover.jpg\"/>","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/Valideer je pagina! ( http://validator.w3.org/)","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/ h2/}","","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":3,"id":"w_nZM6hBD2LNg8sj5QC_i_JJkWse4WFDRitW59n"},"curricula":{"list":[],"objectives":[]},"contentTypes":["slide","question","poll"]},"score":47.003925},{"_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://lh3.googleusercontent.com/C4iZabBAoyNPhPmbfzrTKzOXblpQ6FrrgwAEB-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://lh3.googleusercontent.com/TsWG3tn1LpSCaODwxvaXhs9tUSRuqmaUSloJVKVXGitSzbIcAjoZe0jjKMRgaZcRjNvZ7NETTl6RpBEokCu3qE7oohQV9nJHZCTfyVU","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)","// HTML\n<form>\n          <label for=\"age\">Leeftijd:</label><br>\n        <input type=\"text\" id=\"age\" name=\"age\"                onkeyup=\"validateAge()\">\n        <p id=\"message\"></p>\n</form>","// 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</script>","INTERN","<script src=\"mijnScript.js\"></script>","<button onclick=\"alert('Hallo Wereld!')\">Klik op mij</button>","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/m KELVIN Javascript op CodeCademy door. Je moet hier even een account voor aanmaken.https://www.codecademy.com/learn/introduction-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/beheersen, 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":46.816643},{"_id":"yiJhk2aYg3nPDhPKd","_index":"lessons-nl-1642004322162","doc":{"_id":"yiJhk2aYg3nPDhPKd","lesson":{"_id":"yiJhk2aYg3nPDhPKd","user":"jpRps4CaBhKQhPawY","name":"bkup 03-HTML-document","region":["nl"],"country":["nl"],"sharing":{"sharePublic":false,"shareDate":null},"privacy":"public","products":[],"levels":[],"years":[19],"subjects":["Communication & multimedia design"],"schoolType":["hbo"],"creationDate":"2021-12-19T09:50:09.072Z","durationInMin":15,"showPhases":true,"isTest":false,"trail":[],"pinCount":37,"pinCountForLesson":20,"pinCountForStudent":37,"thumbnail":{"url":"https://lh3.googleusercontent.com/TBVG2rSBBr1BrXJ9jlSnATyHrhfT800-NLhqqBiYWC6nSXx_uBYOp2noiMPyeMuYCnEuqDPXUq9tr2jfkBrp8lA9dBBI0pR40F4EOZs","modifiedDate":"2021-12-19T09:54:41.665Z","hash":"fad3493ee9785c1d7952ccec98eea7d8","v":3},"location":{"explorer":"nrpNQATtkqprN86Qo","folder":"82b84df84f9d456554ff4a59"},"order":"aF","differentiation":[{"color":1,"label":"-"},{"color":3,"label":"custom-1","custom":"uitleg"}]},"firstPin":{"_id":"ScCzDgqure3zEgtJo","user":"jpRps4CaBhKQhPawY","lesson":"yiJhk2aYg3nPDhPKd","item":{"source":"googleimage","type":"slide","name":"A little introduction to HTML - Prototypr","url":"https://miro.medium.com/max/1200/1*28-1lYrYTQoLhi87mllgBw.png","thumb":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyuK3f95lLrrNLddsjKQ5ksE9u9gVIPhhtSULQv84mr14SJ4ffKgI31sc","image":"https://miro.medium.com/max/1200/1*28-1lYrYTQoLhi87mllgBw.png","custom":{"layout":3,"color":1,"text1":"","text2":"","align1":1,"align2":1,"showImage":true,"contextUrl":"https://blog.prototypr.io/a-little-introduction-to-html-2f82cd9f602c","visibleUrl":"blog.prototypr.io","dimension":"800 x 350"},"components":[{"_id":"xH7g9Tzv22vcEdN9x","position":{"left":47.35891553701772,"top":47.196846011131726,"bottom":21.90983302411874,"right":22.207403545359767},"scale":{"x":1,"y":1},"creationDate":"2019-10-07T19:21:26.446Z","user":"jpRps4CaBhKQhPawY","settings":{"text":"","backgroundColor":"#0caee0","fontFamily":"montserrat","fontSize":60,"textAlign":"align-left","verticalAlign":"vertical-align-top","padding":1,"columns":1,"correctDropzone":[],"dropzoneSnapback":true,"color":"#000000"},"type":"text","origin":"text"},{"_id":"v23B3Y9aXPsnNJBev","position":{"left":46.75,"top":29.305,"bottom":41.239,"right":8.114},"scale":{"x":1,"y":1},"creationDate":"2019-10-07T19:20:12.209Z","user":"jpRps4CaBhKQhPawY","settings":{"text":"Document","backgroundColor":"none","fontFamily":"montserrat","fontSize":"100","textAlign":"align-left","verticalAlign":"vertical-align-top","padding":1,"columns":1,"correctDropzone":[],"dropzoneSnapback":true},"type":"text","origin":"text","rotation":0}],"modifiedDate":"2021-12-19T09:50:09.088Z","exclusions":[]},"order":1001,"creationDate":"2021-12-19T09:50:09.088Z","isPublic":true,"isFirstPin":true,"shouldIndex":"2021-12-19T09:50:09.088Z"},"indexedContent":{"important":["Document","Hoe vaak mogen de volgende tags voorkomen?","<html><head><title><body>","Wat is een andere manier om tekst scheef te drukken?","hint: scheefgedrukte tekst benadrukt meestal iets.Het engelse woord daarvoor is emphasis","Maak van mij een paragraaf","Sleep de juiste tags naar de juiste locatie","<\\p>","</p>","<p>","<p/>","<!p>","Je moet de basis-html hebben voor een web-pagina. Hoe kom je hieraan?","In welk deel van de code hoort het element?","<HEAD>","<BODY>","<title>","<h3>","<sup>","<b>","<p>","<br>","Met welke tag maak je scheve tekst?","Maak het HTML-document","<body>","<head>","<!DOCTYPE html>","<html>","</html>","</body>","</head>","<title></title>","<h1></h1>","HTML Syntax","Met Syntaxis (Engels: Syntax) worden alle regels bedoeld die de opbouw en structuur van zinnen bepaalen. M.a.w. woordvolgorde, interpunctie en grammatica.NL = Jan zegt: “wat een mooie dag vandaag!”FR = Jean dit « il fait beau aujourdh’ui! »","Behalve dat de Fransen andere symbolen gebruiken om aan te geven dat iemand aan het praten is, gebruikt de taal ook een andere woordvolgorde. Dit verklaart wel waarom Google Translate vertalingen tussen Nederlands en Frans vaak niet zo goed zijn. De woorden worden dan wel vertaald, maar de woordvolgorde wordt niet aangepast. Woordvolgorde en interpunctie zijn beide verschillen zijn voorbeelden van syntaxis.","Waar zie je een volledige HTML-tag?","Plaats de gesproken tekst tussen aanhalingstekens.","Mieke zei:","Het is mooi weer vandaag!","\"","\"","'","'","(",")","Plaats 'vandaag' tussen haakjes.","Mieke heeft het","vandaag","te druk.","\"","\"","'","'","(",")","HTML attributes","Attribuut = eigenschap","Attributen zijn eigen schappen. Attributen van een tag plaats je in de start-tag. Een attribuut heeft meestal ook een waarde. Waardes kunnen getallen en percentages zijn, bijvoorbeeld als ze de breedte van een element aangeven. Attributen kunnen ook tekst als waarde hebben. Meestal zijn er dan maar een paar verschillende waardes die zijn toegestaan.","<HTML>innerHTML</HTML>","Net als met haakjes en aanhalingstekens\nBestaat HTML uit tekens die aangeven waareen HTML-tag begint en eindigten samen omsluiten ze de innerHTML","Tag = label","HTML  bestaat dus uit labels diehet begin en het eind aangeven van stukken codeen die iets kunnen bevatten.HTML is semantisch. De labels beschrijven goed wat de tag doet of voorstelt.","<html>innerHTML</html>","Een HTML-tag bestaat dus uit1. een begin-tag2. een eind-tag en3. innerHTML","<html> is een voorbeeld van een start-tag. De start-tag bestaat zelf uit een start-teken: <een tag: htmlen een eind-teken: >De syntax van een start-tag is dus: <tag>","</html> is een voorbeeld van een eind-tag. Ook de eind-tag bestaat uit een start-teken: <Vervolgens komt een teken dat aangeeft dat het om een eind-teken gaat: /Vervolgens de tag die wordt afgesloten: htmlen het einde-teken van de tag: >De syntax van een eind-tag is dus: </tag>","De innerHTML kan uit vanalles bestaan. Afbeeldingen, tekst, links en HTML. HTML kan alleen volledig in een andere HTML-tag voorkomen. ze mogen niet 'deels overlappen'. Genest mag dus wel.","Waar zie je een start-tag?","Waar zie je een eind-tag?","Waar zie je correct geneste tags?","Welke tag vormt de buitenste HTML?","Welke tags vormen de binnenste HTML? (innerHTML)","We zeggen ook wel dat de buitenste HTML de 'ouder' is en de geneste HTML het 'kind'. Je krijgt dan een soort familie-stamboom met Oma's, zusjes en neefjes","HTML = Object Oriented","Erven gaat volgens de stamboom. Kinderen erven van hun ouders.","Objecten van eenzelfde klasse zullen vaak een aantal eigenschappen hetzelfde hebben, of ze gedragen zich hetzelfde.","Gedrag krijgt een object meestal door javascript","Om het ene object van het andere te kunnen onderscheiden heeft elk object (of elke tag) een unieke ID. Een object kan wel lid zijn van meerdere klasses","De structuur van een HTML-documentvolgt een boom-structuurDie structuur noemen we de DOM =Document Object Modelen lijkt erg op een mappen-structuur","Elk html-document bevat 1 HTML-tag. Dit is de meest buitenste tag. Deze bevat dus alle andere tags en is dus meest de over-over-over-overgrootouder van het document. Vanuit de HTML-tag waaieren de andere tags uit, zoals de takken en wortels van een boom uitwaaieren vanuit de stam. De HTML-tag vormt dus de stam. Om  bij een blaadje te komen kun je de stam en haar vertakkingen aflopen tot je bij een blaadje komt.","html","De structuur van een HTML-documentis heel ZENHet bestaat uit een HEADen een BODY","Elk HTML-document bevat 1 head-tag, niet meer.Dit is het brein van het HTML-document. Het bevat informatie die we niet zien, maar die essentieel is voor de werking en het uiterlijk van het document.","head","Elk HTML-document bevat 1 body-tag. Hierin staat alle HTML die zichtbaar is in de browser, maar ook scripts om de web-pagina goed te laten functioneren.","body","De structuur van een HTML-document:","Dit is het enige wat in een HTML-document buiten de HTML-tags mag voorkomen. Het vertelt de browser welke versie HTML-gebruikt is. Deze declaratie hoort bij HTML5.","Doctype declaration","De html-tag is de buitenste tag en vormt dus de basis van het document.","Document Root","Elk HTML-document bevat 1 HEAD-tag. Deze bevat vooral meta-informatie over het document.","Head","De Body bevat het zichtbare deel van de website + scripts om de website naar behoren te laten werken.","Body","De HTML-sluitings-tag sluit het document af. Hierna mag geen enkele andere code komen.","HTML = a limited set of tags","Alleen bepaalde tags zijn toegestaan als je HTML schrijft.  Je kunt dus niet zomaar je eigen tags bedenken","Welke tags zijn toegestaan hangt af van de versie HTML die je gebruikt. HTML5 kent bijvoorbeeld veel meer tags dan HTML 3.2. Welke HTML-versie je gebruikt bepaal je zelf door de Doctype declaration die je in je document zet.","HTML tags die we gaan leren:","<br />\np\nh1, h2, h3, h4, h5, h6b, i, u, strong, em,","Dit zijn de meest-voorkomende tags. Ze geven het HTML-document structuur (linker rijtje) of je gebruikt ze om tekst op te maken (rechter rijtje). In andere lessen zul je nog meer tags leren.","html\nhead\ntitle\nbody","De Title-tag toont de titel van het document in het tabblad. Hij hoort in de HEAD. Zoekmachines gebruiken meestal deze titel in huis zoekresultaten.Sleep de Title in de HEAD.","Ga naar W3schools","<title> myname is </title>","HTML tags die we gaan leren:","<br />\np\nh1, h2, h3, h4, h5, h6b, i, u, strong, em, <hr />img&nbsp;","Dit zijn de meest-voorkomende tags. Ze geven het HTML-document structuur (linker rijtje) of je gebruikt ze om tekst op te maken (rechter rijtje). In andere lessen zul je nog meer tags leren.","html\nhead\ntitle\nbody","Dit icoontje bevat steeds een link naar W3schools. Je kunt daar de uitleg over de tags lezen en direct met de tags oefenen.","De Paragraaf-tag gebruik je om paragrafen met wit-regels van elkaar te scheidenSleep de p-tag in de BODY.","Ga naar W3schools","<p> Dit is een paragraaf</p>","De Break-tag gebruik je om het einde van een regel mee aan te geven, alsof je op ENTER drukt.Sleep de br in de BODY.","Ga naar W3schools","Ook als je in WORD schrijft wordt er een End-Of-Line teken aan de zin toegevoegd zodra je op ENTER drukt. Wij zien dit alleen niet. Je kunt ze wel zichtbaar maken als je wil.","Dit is een zin.<br>na de br begint een zin op<br> een nieuwe regel","De Heading-tags gebruik je om koppen op je pagina te plaatsen. H1 is de grootste, H6 de kleinste.Sleep de h1 in de BODY.","Ga naar W3schools","<h1> Dit is een kop </h1>","Meer parallellen met WORD","HTML is oorspronkelijk bedacht om tekst op te maken (in het Engels: to format). In de symbooltjes op het lint vind je dan ook dezelfde opties als die je met HTML hebt. Sommige dingen doe je met tags (wit). Andere met attributen (groen).","Het lint van WORD","Underline - geeft onderstreepte tekstvoorbeeld:<u>onderstreept</u>W3schools","Sub - subscriptvoorbeeld_subscriptw3schools","Sup - superscriptvoorbeeld:^{superscript text}W3schools","Italic- geeft scheve tekstvoorbeeld:<i>scheef</i>W3schools","Bold - geeft dikke tekstvoorbeeld:<b>dik</b>W3schools","font-size - text-grootteMet CSS kun je van HTML-tags het attribuut font-size aanpassen:font-size: 12pxnfW3schools","font-familyMet CSS kun je van HTML-tags het attribuut font-familyaanpassen:font-family: CalibriW3schools","h1 - Kop 1voorbeeld:<h1>kop</h1>W3schools","Strikethrough - geeft doorgestreepte tekstvoorbeeld:<s>doorgestreept</s>W3schools","h2 - Kop 2 (iets kleiner dan kop1)voorbeeld:<h2>kop</h2>W3schools","Background-color - AchtergrondkleurMet CSS kun je van HTML-tags het attribuut background-color aanpassen:background-color: yellowW3schools","Color - tekst-kleurMet CSS kun je van HTML-tags het attribuut color aanpassen:<p style=\"color:red\">This is a paragraph.</p>W3schools","UL - Unordered list - ongeordende lijstvoorbeeld:<ul>     <li>element van de lijst</li>     <li>tweede element van de lijst</li>\n</ul>W3schools","ol - ordered list - geordende lijstvoorbeeld:<ol>     <li>element van de lijst</li>     <li>tweede element van de lijst</li>\n</ol>W3schools","text-align - tekst-uitlijningMet CSS kun je van HTML-tags het attribuut text-alignaanpassen:<p style=\"text-align:center\">This is a paragraph.</p>W3schools","table -tabelvoorbeeld:<table>     <tr><td>tabel-cel in de eerste rij</td><td></td></tr>     <tr><td>tabel-cel in de eerste rij</td><td></td></tr>\n</ol>W3schools","Met welke tag maak je dikgedrukte tekst?","Je wil weten hoe je de paragraaf-tag moet gebruiken. Hoe vind je hierop antwoord?","Met welke tag zet je een titel bovenaan je pagina?","bkup 03-HTML-document","Communication & multimedia design"],"normal":["A little introduction to HTML - Prototypr","Vraag","html 1x, de rest zo vaak als nodig","Elk 1x max","Elk zo vaak als nodig","html en head 1x, title en body vaker","Vraag","hello","hello","hello","hello","dragQuestion","openvraag","W3schools","dragQuestion","Vraag","u","i","h1","b","dragQuestion","Slide","Vraag","","","","tekst","dragQuestion","dragQuestion","Slide","Slide","Slide","Slide","Vraag","","","","tekst","Vraag","","","","tekst","Vraag","","","","","Vraag","html","head","body","head & body","Vraag","html","head","body","head & body","Slide","Slide","Slide","Slide","Slide","Slide","Slide","dragQuestion","Slide","dragQuestion","dragQuestion","dragQuestion","Slide","Vraag","a","li","h1","b","openvraag","Zoek in Google naar \"W3schools p\"","Vraag","h1","h6","title","titel"]},"pinHashes":["022a1e959f0e19499a1d1277674d3eb7a5af946bbae6637a6821752fbae624f5","0828d8d48a43369021022622094157d2964fe5976971ff3058dbd1a5f03d6879","0afce2e1e44a53daefd4562590c093507e1a99dfd6667fa06f7314a41a85a687","1783438547d505e3d52400a8765a3bae518536cf37df40a55409e2366d1d941c","29e031e2faeabd2f32328974bb168a3c58c22068e74b70845443b1442560c26e","2f60914ceeb262765ef33ce708b345b6e2b1aa50aed52c792c139032974a1831","3319dee869efab923703a1af07fea6cd25c2f4460eaa472bc2079ba61d3c7bb2","37edc37176d84ef9f5ef648e44652b94432fdc5ab3be91e55c01ee414b9a89f3","3abd651bcba76a1f30432ee2811374abb0564bdecec2180f1e351cfd0de7326f","428ded2ae3316164f8e98e001abdae873dd44da74624dcb856efac6026dbd138","4968e69d44eaa9447b14b631beabb6264285d14440d8d1cf490b2d0825a38363","4cce1e04d12dc15fadd787023d39bc0844807fcab0d7f5d8020a842bcbc1dd70","51ab48a76dd769ff1a161c85faa396578d56345e5c5746891059678698aa08b2","5209648314e747daf85c439bc9f9624b201f9fb6cbfa0bd249ea85cefe49b05c","5daaea76fcd31e838cc4b8b8850cebff0a2da9e772f3be1d50b746bbcb9088bb","5e81acb338d127de597245cb6c7a2991770de69a925e516e6a6af7a36585950c","6d81454d9051ce73bb47ea0d8e0c1e623793f2c64e071432b8606ab1ac59988f","7608ebe05ccb9b0a44f7110facd4bdfcf0901a75f0ec101664f419a110f7ceae","7aa62554e1fac4f3d56f6f8a149b8cadbd2e401bb8049d860fb53f739eaf0315","83a584ea4789fca36854bc452165c6a5924e44e5c99d7235252c83532530c184","87af6cc2d2bf4099162639cf2490724b6f8f5ff83156546f4fc05e193a03c806","8890d0d6b45961c431a0658b66e883c7dd20161ec58a75833702957d24075914","917dba3b2c668f1b4fe39e2a00c25410affa3d4474c9875b05a51d88478f5678","97c15063de3fe9c2c1bdc2ddbab57ebd270f52e384b5f6d565aa87508fdc9140","a19bd914bd2f1f7744b0d3e912b25e0d24afb05cadf26509ce3de6f950f02293","a5c4e22e2e7408fe323c5f001d42556457e294bae409ed259023277addabe6dd","b1274d5a4f63f1ab2db6eb9567fd3e405071c853692c550f235444fa097e75ea","b99aadd438693e70832930bc9561bc99744421fb110639245ab3755ac33add75","ba7d61c35727f09dd2708eb5cd9edb045b69dd553f5c202520ddbd045e94c368","bc3e74825f4bcd6a1cc4106f3cb0aa7a15a899ad4b0a745f524e8e20fc642515","c009ea50115e8ec8ffa62dbda68f6036c29da043b704735ba8d503089be75089","cf9ab4412da01c1033b5fdbbf5ea4e7ccebbd352182b18b5efa8b4f6e1a60812","cfe6d386b4cdb3e39ab2d76b80166ffdda1391f9adead4c03191057a81e739ad","d5b9383e74324e4e769b1dd58b60019c7f5b8b4b809bd8a4453e3b6be72f8607","e319bae4197a6c8cf8240aaf7193b05e01e16516da4c1127fde7f1c4933cb790","ebdffb3677ca35f1024ae9a26ea5758396d305a05eef42064c0ad1d1611c29e9","f578e08fbdea6b1e2395dfb4344faf56735c95c0aaebc835e3043eb852108a3e"],"docType":"lesson","metaData":{"creationDate":"2021-12-19T09:50:09.072Z","country":["nl"],"schoolType":["hbo"],"levels":[],"years":[19],"organizations":["hjayjHAwRbCMGFucA"],"subjects":["Communication & multimedia design"],"privacy":"public","isTest":false},"statistics":{"id":"yiJhk2aYg3nPDhPKd","copiedCount":0,"sharedCount":0,"assignmentsCreatedCount":0,"testStartedCount":0,"finishPresentingCount":0,"averageRating":0,"ratingCount":2},"hash":"c75ce20225b0e6f3d8a0322dd4dd3e381a65b578337aeaa02e5f3332b4330bb2","cluster":{"winner":true,"size":1,"id":"w_yiJhk2aYg3nPDhPKd_i_yiJhk2aYg3nPDhPKd"},"curricula":{"list":[],"objectives":[]},"contentTypes":["slide","question","dragQuestion","openQuestion"]},"score":45.814083}],"pins":[{"_id":"wYhNWnJZG9Yq38Syw","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"<span><b>Basis HTML: Leer de grondbeginselen van webontwikkeling</b></span>","text2":"","layout":1,"color":301,"colorbg":"#001343","colorfg":"#ffffff","opacity":1,"fontSize1":60,"fontSize2":60},"notes":{"text":""},"components":[]},"order":1001,"creationDate":"2023-03-24T14:07:07.064Z","isPublic":true,"isFirstPin":true},{"_id":"qmqS9SNJhkXkksvkD","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"<b>Leerdoel: Begrijpen wat HTML is</b>","text2":"HTML staat voor HyperText Markup Language en is de basis van webontwikkeling.","layout":2,"color":301,"colorbg":"#001343","colorfg":"#ffffff","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":"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":301,"colorbg":"#001343","colorfg":"#ffffff","opacity":1,"showImage":false,"fontSize1":60},"components":[]},"order":1003,"creationDate":"2023-03-24T14:07:07.496Z","isPublic":true,"isFirstPin":false},{"_id":"5PoycRGnBoQy3jj4e","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"<b>HTML-tags en -elementen</b>","text2":"HTML maakt gebruik van tags en elementen om de inhoud van een webpagina te structureren.","layout":2,"color":301,"colorbg":"#001343","colorfg":"#ffffff","opacity":1,"fontSize1":60,"fontSize2":60},"notes":{"text":"Leg uit wat tags en elementen zijn en geef voorbeelden van veelgebruikte tags zoals <html>, <head>, <body>, <p>, <a>, <img> en <div>."},"components":[]},"order":2001,"creationDate":"2023-03-24T14:07:07.600Z","isPublic":true,"isFirstPin":false},{"_id":"hJGR8j2stk8t9TLt7","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"<b>Structuur van een HTML-pagina</b>","text2":"Een standaard HTML-pagina bestaat uit een doctype-declaratie, een HTML-element, een head-element en een body-element.","layout":2,"color":301,"colorbg":"#001343","colorfg":"#ffffff","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":"2023-03-24T14:07:07.733Z","isPublic":true,"isFirstPin":false},{"_id":"WD4WJ9EFdZhiRWto7","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"<b>Tekst opmaken met HTML</b>","text2":"HTML biedt verschillende tags om tekst op te maken, zoals tot , , , en .","layout":2,"color":301,"colorbg":"#001343","colorfg":"#ffffff","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":[]},"order":2003,"creationDate":"2023-03-24T14:07:07.829Z","isPublic":true,"isFirstPin":false},{"_id":"d4ZsNsbsDzkrdBkpb","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"<b>Afbeeldingen toevoegen</b>","text2":"Afbeeldingen kunnen worden toegevoegd met de img-tag en moeten een alt-attribuut bevatten voor toegankelijkheid.","layout":2,"color":301,"colorbg":"#001343","colorfg":"#ffffff","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":"2023-03-24T14:07:07.918Z","isPublic":true,"isFirstPin":false},{"_id":"x7hMW9x4toaLyu5v6","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"<b>Links maken</b>","text2":"Links worden gemaakt met de link-tag en kunnen worden gebruikt om te koppelen naar andere pagina's of bestanden.","layout":2,"color":301,"colorbg":"#001343","colorfg":"#ffffff","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":"2023-03-24T14:07:08.030Z","isPublic":true,"isFirstPin":false},{"_id":"9KBAkAAip6to7qhTi","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"<b>Lijsten maken</b>","text2":"Er zijn twee soorten lijsten in HTML: geordende en ongeordende lijsten.","layout":2,"color":301,"colorbg":"#001343","colorfg":"#ffffff","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":"2023-03-24T14:07:08.117Z","isPublic":true,"isFirstPin":false},{"_id":"qzRrgcrtZhwrXdDo8","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"<b>Tabellen maken</b>","text2":"Tabellen worden gebruikt om gegevens op te maken en te structureren.","layout":2,"color":301,"colorbg":"#001343","colorfg":"#ffffff","opacity":1,"fontSize1":60,"fontSize2":60},"notes":{"text":"Demonstreer hoe tabellen worden gemaakt en waarvoor ze worden gebruikt."},"components":[]},"order":2007,"creationDate":"2023-03-24T14:07:08.389Z","isPublic":true,"isFirstPin":false},{"_id":"x3dFFsWeo3aGD8fJ5","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"<b>Formulieren maken</b>","text2":"Formulieren kunnen worden gebruikt om informatie van gebruikers te verzamelen, zoals naam, e-mailadres en bericht.","layout":2,"color":301,"colorbg":"#001343","colorfg":"#ffffff","opacity":1,"fontSize1":60,"fontSize2":60},"notes":{"text":"Laat zien hoe formulieren worden gemaakt en hoe verschillende soorten invoerelementen worden gebruikt, zoals <input>, <textarea> en <select>."},"components":[]},"order":2008,"creationDate":"2023-03-24T14:07:09.490Z","isPublic":true,"isFirstPin":false},{"_id":"xcYveYRF9mrwAj85B","user":"Pyj8vaMrqEwD2Z5dA","lesson":"eWmydZ2yZ4d8DST5M","item":{"type":"slide","custom":{"text1":"<b>Validatie en debugging</b>","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":301,"colorbg":"#001343","colorfg":"#ffffff","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":"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":301,"colorbg":"#001343","colorfg":"#ffffff","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":"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":301,"colorbg":"#001343","colorfg":"#ffffff","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":"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":301,"colorbg":"#001343","colorfg":"#ffffff","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/beheersen, maar ook een goed startpunt voor een volgende les."},"components":[]},"order":4003,"creationDate":"2023-03-24T14:07:11.721Z","isPublic":true,"isFirstPin":false}],"eligibleToTeachWithoutCredits":false},"isLoading":false,"error":false,"lessonId":"eWmydZ2yZ4d8DST5M"},"plan":{"isLoading":false,"error":false},"tooltips":[],"selectPins":[],"followedChannels":[],"savedLessons":[],"organizationPicker":{"organizations":[]},"pins":{"pins":[],"pinCount":0,"teacherPins":[],"isV2Lesson":false},"channel":{"error":false,"isLoading":false},"channelOverview":{"channels":[],"hasLoaded":false},"featureFlags":["newPinSearch","accountMergeFlag","downloadReportSpreadsheet","joinWithQR","lessonModules","superCSVExports","defaultOrganizationExplorerPermissions","mySchoolsPage","channelStatsVersion2","schoolSuggestionPage","showSchoolLicenseDemoteOption","redeemedVoucherOverview","allEditorFocusWeekImprovements","openAIBeta","showUploadsNext","showSchoolPickerGB","schoolPickerV2"],"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.51.0","version":"2.51.0","branch":"release/2024w20-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 = 'nl'; window.__FONTS = '[object Set]'; </script> <script src="/search/public/dist/vendors.2c5a9bfc7fcd28fb0bd6.js"></script> <script src="/search/public/dist/packages.fea8f924ad46dfec262c.js"></script> <script src="/search/public/dist/client.c8b73bbe0bf40ec15006.js"></script> </body> </html>