‹Revenir à la recherche

HTML & CSS 1 - Introductie

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

Cette leçon contient 44 diapositives, avec quiz interactifs, diapositives de texte et 2 vidéos.

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

Éléments de cette leçon

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

Slide 1 - Diapositive

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

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

Slide 2 - Sondage

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

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

Slide 3 - Diapositive

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

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

Slide 4 - Question ouverte

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

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

Via telefoonlijnen / kabels over land

ARPANET

Slide 8 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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

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

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

Slide 11 - Diapositive

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

Slide 12 - Vidéo

Cet élément n'a pas d'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

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

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

Slide 14 - Quiz

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

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

Slide 15 - Quiz

Cet élément n'a pas d'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 - Diapositive

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

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

Slide 17 - Sondage

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

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

Slide 18 - Diapositive

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

Slide 19 - Vidéo

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

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

Slide 20 - Diapositive

Cet élément n'a pas d'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 - Diapositive

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

Slide 22 - Diapositive

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

Belangrijke tags Koppen
Koppen in word

Slide 23 - Diapositive

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

Belangrijke tags in opmaak






Welk foutje ontdek je in de tags?

Slide 24 - Diapositive

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

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

URL
uniform resource locator = webadres

Slide 26 - Diapositive

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

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

Slide 27 - Diapositive

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

een vaste URL

Slide 28 - Diapositive

Cet élément n'a pas d'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 - Diapositive

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

een relatieve URL

Slide 30 - Diapositive

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

een mailto URL

Slide 31 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

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

pauze

Slide 35 - Diapositive

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

henkreuling.nl

Slide 36 - Lien

Cet élément n'a pas d'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 - Diapositive

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

Vandaag was
timer
0:30
Makkelijk
Normaal
Moeilijk

Slide 38 - Sondage

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

Wat heb je vandaag allemaal geleerd?

Slide 39 - Carte mentale

Cet élément n'a pas d'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

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

Is deze html code syntactisch juist?

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

Slide 41 - Quiz

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

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

Slide 42 - Question ouverte

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

Wat wil je volgende les nog herhalen?

Slide 43 - Carte mentale

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

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

Slide 44 - Sondage

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

Plus de leçons comme celle-ci

HTML & CSS 0 - introductie

- Leçon avec 19 diapositives
InformaticaWOStudiejaar 4,5

Html en Css - les 1

- Leçon avec 16 diapositives
InformaticaMiddelbare schoolvwoLeerjaar 4

HTML les 3

- Leçon avec 21 diapositives
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

Html en Css - les 2

- Leçon avec 23 diapositives
InformaticaMiddelbare schoolvwoLeerjaar 4

Building Your First Website: HTML + CSS Fundamentals

- Leçon avec 15 diapositives

HTML & CSS 0 - introductie

- Leçon avec 11 diapositives
InformaticaWOStudiejaar 4,5

HTML & CSS 01 - 1 tmt 2.3 - introductie

- Leçon avec 30 diapositives
InformaticaWOStudiejaar 4,5

Webdesign - Les 1 (22/23)

- Leçon avec 17 diapositives
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4