Wat is LessonUp
Zoeken
Kanalen
Inloggen
Registreren
‹
Terug naar zoeken
HTML & CSS: Meer elementen, meer lol!
Domein A2: HTML & CSS
Meer elementen, meer lol!
1 / 21
volgende
Slide 1:
Tekstslide
Informatica
Middelbare school
havo, vwo
Leerjaar 4
In deze les zitten
21 slides
, met
interactieve quizzen
,
tekstslides
en
5 videos
.
Lesduur is:
45 min
Start les
Bewaar
Deel
Printen
Onderdelen in deze les
Domein A2: HTML & CSS
Meer elementen, meer lol!
Slide 1 - Tekstslide
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 - Tekstslide
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 - Tekstslide
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 - Tekstslide
Een afbeelding als hyperlink
De afbeelding (
img
) wordt
genest
in de hyperlink (
a
)
Dit is gebruikelijk bij bijv.
logo's
Slide 7 - Tekstslide
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 - Quizvraag
Slide 9 - Video
Tabellen
Voor de
rijen
en
kolommen
heb je verschillende tags nodig
Slide 10 - Tekstslide
Tabellen
Slide 11 - Tekstslide
Tabellen
Een tabel heeft van zichzelf
geen rand
, die moet je
opgeven
Slide 12 - Tekstslide
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 - Sleepvraag
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 - Tekstslide
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 - Sleepvraag
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 - Tekstslide
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 - Tekstslide
Kun je een website maken bestaande uit koppen, lijsten, links, afbeeldingen en youtube- filmpjes?
😒
🙁
😐
🙂
😃
Slide 21 - Poll
Meer lessen zoals deze
Html en Css - les 2
April 2023
- Les met
23 slides
Informatica
Middelbare school
vwo
Leerjaar 4
HTML + CSS les 3: introductie CSS
April 2023
- Les met
28 slides
Informatica
Middelbare school
vwo
Leerjaar 4
HTML & CSS 03 - 3.3 tmt 3.6 - Lijsten, tabellen, embedden
September 2023
- Les met
27 slides
Informatica
WO
Studiejaar 4,5
HTML & CSS 02 - 2.4 tmt 3.2 - Hyperlinks en multimedia
September 2023
- Les met
31 slides
Informatica
WO
Studiejaar 4,5
01 - HTML - intro
Januari 2024
- Les met
11 slides
ICT
MBO
Studiejaar 1-4
BBL Week 2
Februari 2024
- Les met
15 slides
Applicatie- en mediaontwikkelaar
MBO
Studiejaar 2
HTML & CSS 90 - herhaling
Juni 2023
- Les met
33 slides
Informatica
Middelbare school
havo, vwo
Leerjaar 4,5
2.1 Botten
10 dagen geleden
- Les met
13 slides
Biologie
Voortgezet speciaal onderwijs
Speciaal Onderwijs
Leerroute 1