‹Return to search

HTML & CSS 1 - Introductie

HTML & CSS 1 - Introductie & binaire getallen
HTML & CSS 
Les 1 - Introductie HTML
1 / 44
next
Slide 1: Slide
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4-6

This lesson contains 44 slides, with interactive quizzes, text slides and 2 videos.

time-iconLesson duration is: 100 min

Items in this lesson

HTML & CSS 1 - Introductie & binaire getallen
HTML & CSS 
Les 1 - Introductie HTML

Slide 1 - Slide

This item has no instructions

Hoeveel ervaring heb je met het maken van websites?
timer
0:20
Geen
Een beetje
Veel

Slide 2 - Poll

This item has no instructions

Even met de tijdmachine terug naar 1969...
Geen Snapchat/  TikTok/ insta internet etc... 

Slide 3 - Slide

This item has no instructions

Hoe zou jij met je vrienden communiceren als er geen internet was?
timer
1:00

Slide 4 - Open question

This item has no instructions

Aan het einde van de les kan je...
  • vertellen over de geschiedenis het internet
  • uitleggen wat HTML is
  • een basisstructuur binnen HTML aanbrengen

Slide 5 - Slide

This item has no instructions

Geschiedenis van het internet
  • 1957: Lancering Spoetnik I Спутник-1(Sovjet-Unie)
    Reactie VS: Advanced Research Projects Agency (ARPA)

  • 1969: Eerst computers met elkaar verbonden via ARPAnet
    Universiteit van Californië met Standford-universiteit

  • 1980: Brenners-Lee bedenkt HTML voor het delen van bestanden

  • 1991: World Wide Web wordt geïntroduceerd, maken en bekijken van webpagina's wordt mogelijk met browsers

Slide 6 - Slide

Spoetnik 1 (Russisch: Спутник-1) was een Russische kunstmaan uit 1957. Het was de eerste kunstmatige satelliet die in een baan om de Aarde werd gebracht.
ARPANET
Als reactie op de succesvolle lancering van de Spoetnik 1 start het Amerikaanse ministerie van defensie het Advanced Research Projects Agency (ARPA) project

Slide 7 - Slide

Via telefoonlijnen / kabels over land

ARPANET

Slide 8 - Slide

This item has no instructions

De jaren '80
Tim Berners-Lee: hoe deel je informatie op een manier die iedereen kan begrijpen?

HTML 
"HyperText Markup Language"

Klikbare linkjes
Opmaak
Taal
1980: delen van informatie/ bestanden
1989: html gelinkt aan het internet
1991: WWW browser om informatie te bekijken

Slide 9 - Slide

This item has no instructions

Waarom is HTML ontstaan?
timer
0:20
A
Uit de behoefte om website te maken
B
Uit de behoefte om bestanden te delen
C
Uit de behoefte om een standaard op te stellen voor het ontwerpen van websites.

Slide 10 - Quiz

This item has no instructions

wat jij ziet...
...de code erachter

Slide 11 - Slide

This item has no instructions

Slide 12 - Video

This item has no instructions

Wat is de juiste tag volgorde bij het starten van een HTML pagina?
timer
0:20
A
Head, Title, HTML
B
Title, Head, HTML
C
HTML, Head, Title

Slide 13 - Quiz

This item has no instructions

Met welke tag begint een HTML pagina?
timer
0:20
A
<body>
B
<head>
C
<html>
D
weet ik niet

Slide 14 - Quiz

This item has no instructions

Met welke tag eindigt een HTML pagina?
timer
0:20
A
</body>
B
</head>
C
</html>
D
weet ik niet

Slide 15 - Quiz

This item has no instructions

Terug naar het begin...
Heb je al ervaring met websites bouwen?
  • Kijk in de planner van Magister naar de deadlines & opdrachtnamen
  • Ga naar fundament - domein A - hoofdstuk 1 & 2
  • Maak daar alle opdrachten
  • Maak 2.8 in VSC en lever in bij Teams

Geen ervaring of nog wat onzeker?
  • Nu krijg je een kleine flitscursus HTML

Slide 16 - Slide

This item has no instructions

Wat ga je nu doen?
timer
0:20
Zelfstandig Fundament domein A - hfdstk 2 - 1&2
Meedoen met flitscursus

Slide 17 - Poll

This item has no instructions

Ik behandel niet alles, je zal ook zelf hoofdstuk 1 & 2 moeten doorlezen

Slide 18 - Slide

This item has no instructions

Slide 19 - Video

This item has no instructions

<title>Hier komt een of andere titel</title>

Slide 20 - Slide

This item has no instructions

2.3: HTML basis structuur
HTML bestaat voornamelijk uit HTML tags en begint altijd met een basisstructuur

een html tag is bijvoorbeeld 
<html> </html>
<head> </head>

er bestaan heel veel html tags


html basisstructuur

Slide 21 - Slide

This item has no instructions

Slide 22 - Slide

This item has no instructions

Belangrijke tags Koppen
Koppen in word

Slide 23 - Slide

This item has no instructions

Belangrijke tags in opmaak






Welk foutje ontdek je in de tags?

Slide 24 - Slide

welk foutje ontdek je in de tags?
Wat is een URL?
timer
0:20
A
een unieke internetadres
B
een internetadres die vaak voor komt
C
verwijzing naar tekst
D
icon van e-mailadres

Slide 25 - Quiz

This item has no instructions

URL
uniform resource locator = webadres

Slide 26 - Slide

This item has no instructions

Hyperlinks 
Een Hyperlink is een koppeling die verwijst naar een ander document. 

Slide 27 - Slide

This item has no instructions

een vaste URL

Slide 28 - Slide

This item has no instructions

Subpagina's
Verwijzen naar een andere pagina die je hebt gemaakt.
De webpagina's zijn onderling verbonden


BELANGRIJK:
Maak per website een map aan in je mappenstructuur
Elke pagina van die website gaat in die map

Slide 29 - Slide

This item has no instructions

een relatieve URL

Slide 30 - Slide

This item has no instructions

een mailto URL

Slide 31 - Slide

This item has no instructions

Antwoorden
  1. De <title>-tag is verkeerd gespeld als <titel>.
  2. Mismatch in opening en sluiting van de <h1>-tag: De opening <h1>-tag wordt gesloten met een </h2>-tag.
  3. Ontbrekend sluitingsteken in de <a>-tag: De <a>-tag wordt niet correct gesloten.
  4. De html wordt niet juist gesloten </htm> -> </html>
Ontdek de 4 fouten
timer
1:00

Slide 32 - Slide

This item has no instructions

Ga nu zelf op zoek naar wat HTML tags en probeer ze uit
Maak een document aan met alle belangrijke tags & instructies zodat jij het zelf begrijpt
zelf zoeken op internet naar andere html tags.
hint ga naar w3schools

Slide 33 - Slide

This item has no instructions

Opdrachten
  • Kijk in de planner van Magister naar de deadlines & opdrachtnamen
  • Ga naar fundament - domein A - hoofdstuk 2 HTML - subhoofdstuk 1 & 2
  • Maak daar alle opdrachten

  • Maak 2.8 in VSC en lever in bij Teams
Vraag?
  1. Fundament
  2. Internet & YouTube
  3. Klasgenoot 
  4. Docent


Slide 34 - Slide

This item has no instructions

pauze

Slide 35 - Slide

This item has no instructions

henkreuling.nl

Slide 36 - Link

This item has no instructions

Opdrachten
  • Kijk in de planner van Magister naar de deadlines & opdrachtnamen
  • Ga naar fundament - domein A - hoofdstuk 2 HTML - subhoofdstuk 1 & 2
  • Maak daar alle opdrachten

  • Maak 2.8 in VSC en lever in bij Teams
Vraag?
  1. Fundament
  2. Internet & YouTube
  3. Klasgenoot 
  4. Docent


Slide 37 - Slide

This item has no instructions

Vandaag was
timer
0:30
Makkelijk
Normaal
Moeilijk

Slide 38 - Poll

This item has no instructions

Wat heb je vandaag allemaal geleerd?

Slide 39 - Mind map

This item has no instructions

Waarom? is HTML ontstaan?
timer
0:30
A
Uit de behoefte om website te maken
B
Uit de behoefte om bestanden te delen
C
Uit de behoefte om een standaard op te stellen voor het ontwerpen van websites.

Slide 40 - Quiz

This item has no instructions

Is deze html code syntactisch juist?

<h1>Dit is mijn<br>titel<h1>
timer
0:30
A
true
B
false

Slide 41 - Quiz

This item has no instructions

Wat maakt deze tag?
<h1>Ik vind het helemaal mooi</h1>

Slide 42 - Open question

This item has no instructions

Wat wil je volgende les nog herhalen?

Slide 43 - Mind map

This item has no instructions

Wat vond je van deze les?
timer
0:30
😒🙁😐🙂😃

Slide 44 - Poll

This item has no instructions

More lessons like this

HTML & CSS 0 - introductie

- Lesson with 19 slides
InformaticaWOStudiejaar 4,5

Html en Css - les 1

- Lesson with 16 slides
InformaticaMiddelbare schoolvwoLeerjaar 4

HTML les 3

- Lesson with 21 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

Html en Css - les 2

- Lesson with 23 slides
InformaticaMiddelbare schoolvwoLeerjaar 4

Building Your First Website: HTML + CSS Fundamentals

- Lesson with 15 slides

HTML & CSS 0 - introductie

- Lesson with 11 slides
InformaticaWOStudiejaar 4,5

HTML & CSS 01 - 1 tmt 2.3 - introductie

- Lesson with 30 slides
InformaticaWOStudiejaar 4,5

Webdesign - Les 1 (22/23)

- Lesson with 17 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4