HTML & CSS 0 - introductie

                      HTML & CSS
1 / 11
suivant
Slide 1: Diapositive
InformaticaWOStudiejaar 4,5

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

time-iconLa durée de la leçon est: 45 min

Éléments de cette leçon

                      HTML & CSS

Slide 1 - Diapositive

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

Fundament
Kerndomein A

HTML & CSS
Hoofdstuk 1
https://fundament-online.nl/leeromgeving/hoofdstuk.php?id=10485


Slide 2 - Diapositive

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

Leerdoelen:
Na deze les kun je:
  1. uitleggen wat HTML is
  2. uitleggen wat (het verschil tussen ) HTTP en HTTPS is
  3. een eenvoudig HTML bestand maken
  4. de volgorde van <html>, <head>, en <body> geven
  5. uitleggen wat tags zijn en laten zien hoe je ze gebruikt in HTML






Slide 3 - Diapositive

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

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

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

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

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

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

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

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

Een 



Slide 8 - Diapositive

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


Welke van onderstaande opties is geen netwerk?
A
ARPA
B
LAN
C
WAN
D
PAN

Slide 9 - Quiz

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

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

Slide 10 - Diapositive

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

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