HTML & CSS 0 - introductie

                      HTML & CSS
1 / 19
volgende
Slide 1: Tekstslide
InformaticaWOStudiejaar 4,5

In deze les zitten 19 slides, met interactieve quizzen en tekstslides.

time-iconLesduur 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:
  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 - 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?
  • 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 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies


Waar staat de afkorting HTML voor?
A
HyperText Markup Language
B
HyperText Management Language
C
Heavenly Taco Maker's Legacy
D
Hyperloop Terabyte Management Language

Slide 7 - Quizvraag

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Wat is het doel van CSS?
A
Het structureren van de inhoud op een webpagina
B
Het creëren van interactieve elementen op een website
C
Het bepalen van de stijl en het uiterlijk van een webpagina
D
Het versleutelen van gegevens verzonden van en naar een website

Slide 9 - Quizvraag

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Wat is het belangrijkste verschil tussen HTTP en HTTPS?

A
HTTPS is sneller dan HTTP
B
HTTP versleutelt gegevens, terwijl HTTPS dat niet doet
C
HTTPS gebruikt een veilige verbinding om gegevens te versleutelen
D
Er is geen verschil; HTTPS is gewoon een nieuwere versie van HTTP

Slide 11 - Quizvraag

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Wat is een tag in HTML?
A
Een element dat wordt gebruikt om structuur aan te brengen in een HTML-document
B
Een commando in een programmeertaal
C
Een manier om tekst te versleutelen
D
Een fout in de code

Slide 14 - Quizvraag

Deze slide heeft geen instructies

Wat is een essentieel onderdeel van een eenvoudig HTML-bestand?
A
Minstens één afbeelding
B
Een <body> tag
C
<script> tags
D
Een interactief element

Slide 15 - Quizvraag

Deze slide heeft geen instructies

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

Slide 16 - Quizvraag

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 17 - 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 18 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies