What is LessonUp
Search
Channels
Log in
Register
‹
Return to search
HTML & CSS: Meer elementen, meer lol!
Domein A2: HTML & CSS
Meer elementen, meer lol!
1 / 21
next
Slide 1:
Slide
Informatica
Middelbare school
havo, vwo
Leerjaar 4
This lesson contains
21 slides
, with
interactive quizzes
,
text slides
and
5 videos
.
Lesson duration is:
45 min
Start lesson
Save
Share
Print lesson
Items in this lesson
Domein A2: HTML & CSS
Meer elementen, meer lol!
Slide 1 - Slide
Terugblik opdracht regenbogen
Help Asya met het voltooien van haar huiswerkonderzoek over regenbogen op: https://www.101computing.net/the-colours-of-the-rainbow-html-task/
Slide 2 - Slide
codepen.io
Slide 3 - Link
Leerdoelen
Na deze les kun je vertellen
Hoe je een
image
aan je website kunt toevoegen
Hoe je een
tabel
maakt
Hoe je in HTML een
iFrame
maakt
Waar een HTML
head
voor dient
Hoe je
commentaar
toevoegt aan je code
Na deze les kun je
Zelf een
websit
e
maken bestaande uit een groot aantal HTML-elementen
Slide 4 - Slide
Slide 5 - Video
img
-element, attributen zijn:
src
: de URL van je afbeelding
alt
: de (alternatieve) tekst
title
: de tooltip
heigth & width
: hoogte/ breedte
style
: extra styling (opmaak)
Afbeeldingen
Slide 6 - Slide
Een afbeelding als hyperlink
De afbeelding (
img
) wordt
genest
in de hyperlink (
a
)
Dit is gebruikelijk bij bijv.
logo's
Slide 7 - Slide
Wat kun je bij een afbeelding doen met het style-attribuut?
A
De breedte en hoogte van de afbeelding instellen
B
De afbeelding links of rechts positioneren (laten 'floaten')
C
Een achtergrondplaatje voor een element instellen
D
Al deze dingen
Slide 8 - Quiz
Slide 9 - Video
Tabellen
Voor de
rijen
en
kolommen
heb je verschillende tags nodig
Slide 10 - Slide
Tabellen
Slide 11 - Slide
Tabellen
Een tabel heeft van zichzelf
geen rand
, die moet je
opgeven
Slide 12 - Slide
Koppel elk table-element aan de juiste naam
t
able
d
ata
cell
t
able
h
eader
cell
t
able
t
able
r
ow
<table>
<th>
<tr>
<td>
Slide 13 - Drag question
Slide 14 - Video
Gebruik een
iFrame
om een
multimediafragment
over te nemen van een andere website
src
: de URL van het fragment
title
: de tooltip
heigth & width
: hoogte/ breedte
frameborder
: border aan of uit
style
: extra styling (opmaak)
Embedden
Tip
: Gebruik de knop
Delen
en dan de optie
Insluiten
of
Embed
om code te genereren waarmee je bijv. een youtube-video kunt
embedden
!
Slide 15 - Slide
Slide 16 - Video
Koppel elk 'head' element aan de juiste betekenis
Koppelt een simpele stylesheet
definieert een titel in de browser
werkbalk
specificeer instellingen (bijv. tekenset, pagina- beschrijving)
Koppelt css- en javascript-bestanden
title
link
meta
style
Slide 17 - Drag question
Slide 18 - Video
Commentaar
Begint met
<!--
en eindigt met
-->
Niet zichtbaar
op je website
Om
aantekeningen
te maken
Of om
code
snel
aan/uit
te zetten
Slide 19 - Slide
Opdracht (thuis afmaken)
Voeg een aantal nieuwe elementen toe aan de rainbow-website:
Zet de lijst met kleuren om in een
tabel
van
4 rijen
en
2 kolommen
Voeg een
plaatje van
een regenboog toe met een
link
naar de wikipedia-pagina over regenbogen
Voeg een
youtube-filmpje
toe over regenbogen
Voeg
commentaar
toe tussen de verschillende secties
Klaar? Lever je website in via
Google Classroom
(met
SHARE
en
COPY LINK
)
Slide 20 - Slide
Kun je een website maken bestaande uit koppen, lijsten, links, afbeeldingen en youtube- filmpjes?
😒
🙁
😐
🙂
😃
Slide 21 - Poll
More lessons like this
Html en Css - les 2
April 2023
- Lesson with
23 slides
Informatica
Middelbare school
vwo
Leerjaar 4
HTML + CSS les 3: introductie CSS
April 2023
- Lesson with
28 slides
Informatica
Middelbare school
vwo
Leerjaar 4
HTML & CSS 02 - 2.4 tmt 3.2 - Hyperlinks en multimedia
September 2023
- Lesson with
31 slides
Informatica
WO
Studiejaar 4,5
HTML & CSS 03 - 3.3 tmt 3.6 - Lijsten, tabellen, embedden
September 2023
- Lesson with
27 slides
Informatica
WO
Studiejaar 4,5
01 - HTML - intro
January 2024
- Lesson with
11 slides
ICT
MBO
Studiejaar 1-4
BBL Week 2
February 2024
- Lesson with
15 slides
Applicatie- en mediaontwikkelaar
MBO
Studiejaar 2
HTML & CSS 90 - herhaling
June 2023
- Lesson with
33 slides
Informatica
Middelbare school
havo, vwo
Leerjaar 4,5
2.1 Botten
3 days ago
- Lesson with
13 slides
Biologie
Voortgezet speciaal onderwijs
Speciaal Onderwijs
Leerroute 1