What is LessonUp
Search
Channels
Log in
Register
‹
Return to search
HTML & CSS: Introductie HTML
Domein A2: HTML & CSS
Introductie HTML
1 / 27
next
Slide 1:
Slide
Informatica
Middelbare school
havo, vwo
Leerjaar 4
This lesson contains
27 slides
, with
interactive quizzes
,
text slides
and
6 videos
.
Lesson duration is:
45 min
Start lesson
Save
Share
Print lesson
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
H
yper
T
ext
M
arkup
L
anguage
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
Ga naar
w3schools.com
->
HTML
->
HTML attributes
Zoek uit hoe je met attributen een plaatje hoogte en breedte geeft
Druk op:
Try it yourself
en maak het plaatje
500 pixels breed en 100 pixels hoog
Extra uitdaging:
zoek een ander plaatje op het internet en link hiernaar toe
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
codepen.io
Slide 25 - Link
Opdracht 2
Ga naar
codepen.io
en maak een account aan (dit kan met Google)
Gebruik de
HTML-editor
voor dit eerste project
Maak een website met een
welkomstekst
en hieronder een
plaatje
Extra uitdaging:
Probeer uit te vinden hoe je een stuk tekst of het plaatje kunt laten
linken
naar een andere website.
Tip 1
: Je kunt hiervoor de
p
-,
a
- en
img
-elementen gebruiken
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
More lessons like this
Test HTML en CSS kennis
November 2023
- Lesson with
20 slides
Informatica
Middelbare school
havo, vwo
Leerjaar 4
HTML les 1
April 2023
- Lesson with
23 slides
Informatica
Middelbare school
havo, vwo
Leerjaar 4
IAV HTML les 1
September 2021
- Lesson with
18 slides
media, vormgeving en ict
Middelbare school
vmbo
Leerjaar 3,4
HTML les 1
August 2020
- Lesson with
25 slides
Informatica
Middelbare school
havo, vwo
Leerjaar 4
Maak je eigen website met HTML
September 2023
- Lesson with
13 slides
01 - HTML - intro
January 2024
- Lesson with
11 slides
ICT
MBO
Studiejaar 1-4
HTML & CSS: Meer elementen, meer lol!
September 2024
- Lesson with
21 slides
Informatica
Middelbare school
havo, vwo
Leerjaar 4
WEEK 2 - INFORMATICA
November 2023
- Lesson with
31 slides
Informatica
Middelbare school
havo
Leerjaar 4