HTML & CSS 0 - introductie

HTML & CSS

1 / 11

Slide 1: Tekstslide

InformaticaWOStudiejaar 4,5

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

Lesduur is: 45 min

Onderdelen in deze les

HTML & CSS

Slide 1 - Tekstslide

Deze slide heeft geen instructies

Fundament

Kerndomein A

HTML & CSS

Hoofdstuk 1

https://fundament-online.nl/leeromgeving/hoofdstuk.php?id=10485

Slide 2 - Tekstslide

Deze slide heeft geen instructies

Leerdoelen:

Na deze les kun je:

uitleggen wat HTML is
uitleggen wat (het verschil tussen ) HTTP en HTTPS is
een eenvoudig HTML bestand maken
de volgorde van <html>, <head>, en <body> geven
uitleggen wat tags zijn en laten zien hoe je ze gebruikt in HTML

Slide 3 - Tekstslide

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

Wat is HTML?

HTML

HyperText Markup Language
1980 HTML ontwikkeld als opmaakcode voor documenten
1989 HTML omgezet naar hypertext voor het internet
al snel de standaard voor het internet voor het maken van websites (wereldwijd geaccepteerd)
HTML versie 5 is de huidige versie

Slide 4 - Tekstslide

Deze slide heeft geen instructies

HTML en IDE

Een HTML bestand is een tekstbestand

Een HTML bestand heeft als bestandsextensie: .html

Om HTML te schrijven kun je een IDE gebruiken

Een IDE is een Integrated Development Editor

Een IDE maakt het schrijven van code makkelijker, onder andere door syntax highlighting

Slide 5 - Tekstslide

Deze slide heeft geen instructies

IDE: Visual Studio Code

Visual Studio Code (VS Code) is een voorbeeld van een IDE

Als VSC te zwaar is voor je laptop, dan kun je ook gebruik maken van de online versie https://vscode.dev/

Slide 6 - Tekstslide

Deze slide heeft geen instructies

IDE: Notepad ++

Een ander ("lichter") programma is Notepad++
https://notepad-plus-plus.org/downloads/

Tip: stel in dat je via
CTRL-F5 het huidige bestand
kan "uitvoeren":
$(FULL_CURRENT_PATH)

Slide 7 - Tekstslide

Deze slide heeft geen instructies

Een

Slide 8 - Tekstslide

Deze slide heeft geen instructies

Welke van onderstaande opties is geen netwerk?

ARPA

LAN

WAN

PAN

Slide 9 - Quizvraag

Deze slide heeft geen instructies

Leerdoelen:

Je weet wat een IDE is en waar het voor staat
Je kunt de termen editor en console uitleggen
Je kunt 3 verschillende manieren van variabelen definiëren benoemen in JS en het verschil uitleggen
Je kunt uitleggen hoe je op 2 manieren commentaar toevoegt in JS en wat het verschil ertussen is
Je kunt invoer van de gebruiker verwerken in JS

Slide 10 - Tekstslide

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

En nu?

Uitdagingen:

a) met 1 knop tussen blauw en rood toggelen
b) een dark-modus maakt van een index0_2.htm

Slide 11 - Tekstslide

Deze slide heeft geen instructies

HTML & CSS 0 - introductie

Onderdelen in deze les

Slide 1 - Tekstslide

Slide 2 - Tekstslide

Slide 3 - Tekstslide

Slide 4 - Tekstslide

Slide 5 - Tekstslide

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Slide 8 - Tekstslide

Slide 9 - Quizvraag

Slide 10 - Tekstslide

Slide 11 - Tekstslide

Meer lessen zoals deze

HTML & CSS 0 - introductie

HTML & CSS 01 - 1 tmt 2.3 - introductie

JavaScript 0 - introductie

BBL Week 3

HTML les 1

HTML5, CSS3 en JS QUiZ

JavaScript 1 - IDE commentaar invoer gebruiker variabelen

HTML les 1