‹Terug naar zoeken

HTML & CSS 1 - Introductie

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

In deze les zitten 44 slides, met interactieve quizzen, tekstslides en 2 videos.

time-iconLesduur is: 100 min

Onderdelen in deze les

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

Slide 1 - Tekstslide

Deze slide heeft geen instructies

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

Slide 2 - Poll

Deze slide heeft geen instructies

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

Slide 3 - Tekstslide

Deze slide heeft geen instructies

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

Slide 4 - Open vraag

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

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

Via telefoonlijnen / kabels over land

ARPANET

Slide 8 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Slide 11 - Tekstslide

Deze slide heeft geen instructies

Slide 12 - Video

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Slide 14 - Quizvraag

Deze slide heeft geen instructies

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

Slide 15 - Quizvraag

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Slide 17 - Poll

Deze slide heeft geen instructies

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

Slide 18 - Tekstslide

Deze slide heeft geen instructies

Slide 19 - Video

Deze slide heeft geen instructies

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

Slide 20 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Slide 22 - Tekstslide

Deze slide heeft geen instructies

Belangrijke tags Koppen
Koppen in word

Slide 23 - Tekstslide

Deze slide heeft geen instructies

Belangrijke tags in opmaak






Welk foutje ontdek je in de tags?

Slide 24 - Tekstslide

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

Deze slide heeft geen instructies

URL
uniform resource locator = webadres

Slide 26 - Tekstslide

Deze slide heeft geen instructies

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

Slide 27 - Tekstslide

Deze slide heeft geen instructies

een vaste URL

Slide 28 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

een relatieve URL

Slide 30 - Tekstslide

Deze slide heeft geen instructies

een mailto URL

Slide 31 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

pauze

Slide 35 - Tekstslide

Deze slide heeft geen instructies

henkreuling.nl

Slide 36 - Link

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Vandaag was
timer
0:30
Makkelijk
Normaal
Moeilijk

Slide 38 - Poll

Deze slide heeft geen instructies

Wat heb je vandaag allemaal geleerd?

Slide 39 - Woordweb

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Is deze html code syntactisch juist?

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

Slide 41 - Quizvraag

Deze slide heeft geen instructies

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

Slide 42 - Open vraag

Deze slide heeft geen instructies

Wat wil je volgende les nog herhalen?

Slide 43 - Woordweb

Deze slide heeft geen instructies

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

Slide 44 - Poll

Deze slide heeft geen instructies

Meer lessen zoals deze

HTML & CSS 0 - introductie

- Les met 19 slides
InformaticaWOStudiejaar 4,5

Html en Css - les 1

- Les met 16 slides
InformaticaMiddelbare schoolvwoLeerjaar 4

HTML les 3

- Les met 21 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

HTML & CSS 0 - introductie

- Les met 11 slides
InformaticaWOStudiejaar 4,5

Html en Css - les 2

- Les met 23 slides
InformaticaMiddelbare schoolvwoLeerjaar 4

HTML & CSS 01 - 1 tmt 2.3 - introductie

- Les met 30 slides
InformaticaWOStudiejaar 4,5

Webdesign - Les 1 (22/23)

- Les met 17 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

HTML & CSS 04 - 4.1 tmt 4.3 - CSS methodes, opmaak

- Les met 26 slides
InformaticaWOStudiejaar 4,5