HTML & CSS 0 - introductie

HTML & CSS

1 / 19

Slide 1: Slide

InformaticaWOStudiejaar 4,5

This lesson contains 19 slides, with interactive quizzes and text slides.

Lesson duration is: 45 min

Items in this lesson

HTML & CSS

Slide 1 - Slide

This item has no instructions

Fundament

Kerndomein A

HTML & CSS

Hoofdstuk 1

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

Slide 2 - Slide

This item has no instructions

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

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?

Kernwoord: Structuur
Uitleg: HTML (HyperText Markup Language) is de standaardtaal voor het creëren en structureren van webpagina's.
Voorbeeld: Vergelijkbaar met het skelet van een mens, geeft HTML de basisstructuur aan een webpagina.

Slide 4 - Slide

This item has no instructions

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 5 - Slide

This item has no instructions

Wat is HTML?

Kernwoord: Structuur
Uitleg: HTML (HyperText Markup Language) is de standaardtaal voor het creëren en structureren van webpagina's.
Voorbeeld: Vergelijkbaar met het skelet van een mens, geeft HTML de basisstructuur aan een webpagina.

Slide 6 - Slide

This item has no instructions

Waar staat de afkorting HTML voor?

HyperText Markup Language

HyperText Management Language

Heavenly Taco Maker's Legacy

Hyperloop Terabyte Management Language

Slide 7 - Quiz

This item has no instructions

Wat is CSS?

Kernwoord: Opmaak
Uitleg: CSS (Cascading Style Sheets) wordt gebruikt om het uiterlijk en de vormgeving van een webpagina te bepalen.
Voorbeeld: Als HTML het skelet is, dan is CSS de kleding die bepaalt hoe de webpagina eruitziet.

Slide 8 - Slide

This item has no instructions

Wat is het doel van CSS?

Het structureren van de inhoud op een webpagina

Het creëren van interactieve elementen op een website

Het bepalen van de stijl en het uiterlijk van een webpagina

Het versleutelen van gegevens verzonden van en naar een website

Slide 9 - Quiz

This item has no instructions

HTTP & HTTPS

Kernwoorden: Protocol, Veiligheid
Uitleg: HTTP (HyperText Transfer Protocol) en HTTPS (HTTP Secure) zijn protocollen voor het overbrengen van gegevens op het internet. HTTPS is de veilige versie van HTTP, waarbij gegevens versleuteld worden verzonden.
Voorbeeld: HTTP is als het versturen van een brief zonder envelop, terwijl HTTPS is als het versturen van een brief in een gesloten, verzegelde envelop.

Slide 10 - Slide

This item has no instructions

Wat is het belangrijkste verschil tussen HTTP en HTTPS?

HTTPS is sneller dan HTTP

HTTP versleutelt gegevens, terwijl HTTPS dat niet doet

HTTPS gebruikt een veilige verbinding om gegevens te versleutelen

Er is geen verschil; HTTPS is gewoon een nieuwere versie van HTTP

Slide 11 - Quiz

This item has no instructions

Wat zijn tags?

Kernwoorden: Bouwstenen, Instructies
Uitleg: HTML-tags zijn codes die de structuur en het uiterlijk van inhoud op een webpagina bepalen. Ze vertellen de browser hoe tekst en elementen moeten worden weergegeven.

Slide 12 - Slide

This item has no instructions

Tags <html>, <head>, en <body>

Structuurvolgorde
Vergelijkbaar met de opbouw van een boek: de <html> tag is als de kaft, <head> is de titelpagina en <body> is waar het verhaal staat.

Slide 13 - Slide

This item has no instructions

Wat is een tag in HTML?

Een element dat wordt gebruikt om structuur aan te brengen in een HTML-document

Een commando in een programmeertaal

Een manier om tekst te versleutelen

Een fout in de code

Slide 14 - Quiz

This item has no instructions

Wat is een essentieel onderdeel van een eenvoudig HTML-bestand?

Minstens één afbeelding

Een <body> tag

<script> tags

Een interactief element

Slide 15 - Quiz

This item has no instructions

In welke volgorde moeten de <html>, <head>, en <body> tags in een HTML-document staan?

Slide 16 - Quiz

This item has no 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 17 - Slide

This item has no 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 18 - Slide

This item has no instructions

Opdrachten

Maak je eerste .html bestand, bestaande uit:

De tags <html>, <head> en <body> met ook een klein tekstje
opslaan in de juiste map --> mappenstructuur printscreen
juiste extensie gebruiken --> bestandsnaam.html
Inleverdeadline staat in planner --> Teams

Fundament:

Vergeet ook niet je Fundament opdrachten van Hoofdstuk 1 niet

Slide 19 - Slide

This item has no instructions

HTML & CSS 0 - introductie

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Slide

Slide 4 - Slide

Slide 5 - Slide

Slide 6 - Slide

Slide 7 - Quiz

Slide 8 - Slide

Slide 9 - Quiz

Slide 10 - Slide

Slide 11 - Quiz

Slide 12 - Slide

Slide 13 - Slide

Slide 14 - Quiz

Slide 15 - Quiz

Slide 16 - Quiz

Slide 17 - Slide

Slide 18 - Slide

Slide 19 - Slide

More lessons like this

HTML & CSS 0 - introductie

HTML & CSS 01 - 1 tmt 2.3 - introductie

Kennismaking met HTML Programmeren

HTML les 1

Webdesign - Les 1 (22/23)

HTML les 1

2 HTML: CSS

HTML & CSS 1 - Introductie