HTML & CSS: Introductie HTML

Domein A2: HTML & CSS
Introductie HTML
1 / 27
next
Slide 1: Slide
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

This lesson contains 27 slides, with interactive quizzes, text slides and 6 videos.

time-iconLesson duration is: 45 min

Items in this lesson

Domein A2: HTML & CSS
Introductie HTML

Slide 1 - Slide

Leerdoelen
Na deze les kun je vertellen
  • Wat het World Wide Web is
  • Wat HTML is en waaruit een simpele website bestaat
  • Wat HTML-elementen en -attributen zijn
  • Hoe je een paragraaf-element (<p>) gebruikt

Na deze les kun je 
  • Zelf een simpele website maken

Slide 2 - Slide

Slide 3 - Video

Wat heb je nodig om een ​​
eigen website te beginnen?

Slide 4 - Mind map

Nodig voor een eigen website
  • Een plek om je webbestanden te hosten
  • Een domeinnaam die mensen naar jouw ruimte leidt
  • Een manier om informatie om te zetten in webtalen (HTML, CS, Javascript)


Slide 5 - Slide

Voorbeeld van HTML

Slide 6 - Slide

Slide 7 - Video

HTML
  • De taal van een webpagina is HTML
  • HTML5 is de nieuwste versie van HTML-code
  • HyperText Markup Language
  • In het Nederlands: “Taal voor het opmaken van hypertext
  • Hypertext = een tekst met hyperlinks


Slide 8 - Slide

Onderdelen webpagina
Een simpele webpagina bestaat uit vier onderdelen
  • Tekst
  • Beetje opmaak
  • Plaatjes
  • Hyperlinks

Slide 9 - Slide

Wat voor type taal is HTML?
A
programmeertaal
B
opmaaktaal
C
block-based taal
D
scripttaal

Slide 10 - Quiz

Slide 11 - Video

Structuur webpagina
Een HTML-bestand is opgebouwd uit elementen

Bijvoorbeeld: het p-element

Een element maak je met:
  • Een begintag
  • De inhoud
  • Een eindtag


Slide 12 - Slide

Gebruik het juiste HTML-element
om een paragraaf met de tekst
"Hello world!" toe te voegen

Slide 13 - Open question

Een correct HTML-bestand

Slide 14 - Slide

Hoofdelementen
Een HTML-bestand heeft drie hoofdelementen
Dat zijn: 
  • html
  • head
  • body


Slide 15 - Slide

Hoofdelementen (2)
De hele website staat in het html-element



Slide 16 - Slide

Hoofdelementen (3)
In het html-element staan ALTIJD twee elementen



Slide 17 - Slide

Slide 18 - Video

Paragrafen (<p>)
Een paragraaf begint altijd op een nieuwe regel en is meestal een blok tekst

  • Witruimte wordt genegeerd

  • Gebruik <br> om op een nieuwe regel
     
    te beginnen
  • <br> heeft geen
    eindtag (lege tag


Slide 19 - Slide

Slide 20 - Video

Attributen
HTML-elementen kunnen attributen bevatten 

Bijvoorbeeld het src-element
behorend bij een image (img)

  • Attributen bieden aanvullende informatie over elementen
  • Attributen worden altijd gespecificeerd in de starttag
  • Attributen komen meestal in naam/waarde-paren zoals: naam="waarde"


Slide 21 - Slide

Opdracht 1
  1. Ga naar w3schools.com -> HTML -> HTML attributes 
  2. Zoek uit hoe je met attributen een plaatje hoogte en breedte geeft
  3. Druk op: Try it yourself en maak het plaatje 500 pixels breed en 100 pixels hoog
  4. Extra uitdaging: zoek een ander plaatje op het internet en link hiernaar toe
  5. Sla het plaatje op in je downloads

timer
3:00

Slide 22 - Slide

Voeg het eindresultaat hier toe.

Slide 23 - Open question

Slide 24 - Video

Slide 25 - Link

Opdracht 2
  1. Ga naar codepen.io en maak een account aan (dit kan met Google) 
  2. Gebruik de HTML-editor voor dit eerste project
  3. Maak een website met een welkomstekst en hieronder een plaatje 
  4. Extra uitdaging: Probeer uit te vinden hoe je een stuk tekst of het plaatje kunt laten linken naar een andere website. 
  5. Tip 1: Je kunt hiervoor de p-, a- en img-elementen gebruiken
  6. Tip 2: Gebruik w3schools als je niet meer precies weet hoe je dit kunt doen

Slide 26 - Slide

Kun je nu een simpele website maken met een tekst en een plaatje?
😒🙁😐🙂😃

Slide 27 - Poll