‹Return to search

HTML & CSS 90 - herhaling

                      HTML & CSS
1 / 33
next
Slide 1: Slide
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

This lesson contains 33 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 60 min

Items in this lesson

                      HTML & CSS

Slide 1 - Slide

This item has no instructions

Fundament
Kerndomein A: Vaardigheden

HTML & CSS
** Herhaling **
https://fundament-online.nl/leeromgeving/hoofdstuk.php?id=10485


Slide 2 - Slide

This item has no instructions

Leerdoelen 1/2
Na deze les kun je:
  • uitleggen waar HTML en CSS voor staan
  • het verschil tussen een paired en unpaired tag uitleggen
  • kun je beschrijven hoe een hyperlink in elkaar zit
  • van een pad aangeven of het absoluut of relatief is
  • uitleggen hoe je een cel in een tabel samenvoegt
  • ...






Slide 3 - Slide

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.
Leerdoelen 2/2
Na deze les kun je:
  • de 3 verschillende methoden van CSS beschrijven
  • uitleggen welke selector voor ID wordt gebruikt
  • uitleggen welke selector voor Class wordt gebruikt
  • fouten in HTML en CSS herkennen als een pro






Slide 4 - Slide

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.
Herhaling

Deze slides is een gedeelte van de stof 
die we eerder hebben behandeld

Het is geen volledig overzicht van de belangrijke punten,
het is alleen bedoeld als herinnering!

Slide 5 - Slide

This item has no instructions

HTML 1/4
  • HyperText Markup Language
  • tekstbestand met
    .htm of .html extensie
  • paired tag
       open: <h1>
       sluiten: </h1>
  • unpaired tag: <br>, <img>

Slide 6 - Slide

This item has no instructions

HTML 2/4
  • <!doctype html> voor versie HTML (anders quirks mode)
  • metatags geven informatie over een website maar zijn niet direct op de website zichtbaar
  • hyperlink : <a href="http://abc.nl">link</a>
  • "relatief" pad t.o.v. de huidige pagina: "sub/a.html"
  • "absoluut" pad is directe link: "http://abc.nl"
  • HTML bepaalt de inhoud van de website

Slide 7 - Slide

This item has no instructions

HTML 3/4
  • a : <a href="abc.nl">link</a>
  • p : <p>tekst</p>
  • h1 : <h1> tekst </h1>
  • ol : <ol><li>item 1</li><li>item 2</li></ol>
  • ul : <ul><li>item *</li><li>item *</li></ul>
  • img : <img src="abc.gif">
  • table : <table><tr><td></td></tr></table>

Slide 8 - Slide

This item has no instructions

HTML 4/4
Door het "nesten" van elementen kun je in HTML effecten combineren, zoals bijvoorbeeld een plaatje een link maken:
  • <a href="http://abc.nl"><img src="plaatje.gif"></a>

Of een tekst onderstrepen, schuin en vet maken:
  • <u><b><i>hallo</i></b></u>

Slide 9 - Slide

This item has no instructions

HTML: IMG
  • img is een unpaired tag <img>
  • img heeft een src (een bron) want het is de bron (source) van de afbeelding, en geen verwijzing (href)!
    <img src="https://smcinformatica.nl/huisje.jpg">
  • let op de verhouding tussen hoogte en breedte
     (aspect ratio),
                       anders krijg je zoiets:

Slide 10 - Slide

This item has no instructions

HTML: Table
  • Een table maak je in HTML met <table>
  • rij <tr> </tr>
  • kolom <td> </td>
  • samenvoegen van cellen doe je in <td> 
     met de eigenschappen:
      colspan (meerdere kolommen)
      rowspan (meerdere rijen)

Slide 11 - Slide

This item has no instructions

(Meerkeuze) vragen
De volgende slides hebben (meerkeuze) vragen
Voor elke meerkeuze vraag heb je 20 seconden
Voor een open vraag is een timer zichtbaar

Achtergrond:
  • Oranje/blauw == zacht overleggen mag
  • Rood == stil!

Slide 12 - Slide

This item has no instructions


Waar staat de afkorting HTML voor?
A
HyperText Markup Language
B
HyperText Management Language
C
Heavenly Taco Maker's Legacy
D
Hyperloop Terabyte Management Language

Slide 13 - Quiz

This item has no instructions



Wat is de huidige versie van HTML?
A
4
B
3
C
5
D
over 9000

Slide 14 - Quiz

This item has no instructions


Met welke eigenschap wordt bepaald in HTML wat de afbeelding in een <img> tag is?
A
href
B
src
C
link
D
(☉.☉)

Slide 15 - Quiz

This item has no instructions


Met welke eigenschap wordt bepaald in HTML wat de link in een <a> tag is?
A
href
B
src
C
link
D
(⊙.☉)

Slide 16 - Quiz

This item has no instructions

Wat is de regel die overeen
komt met de afbeelding
qua cel-samenvoeging?
A
<tr><td rowspan="2"> R1C1 + R1C2</td></tr>
B
<tr rowspan="2"><td> R1C1 + R1C2</td></tr>
C
<tr><td colspan="2"> R1C1 + R1C2</td></tr>
D
<tr colspan="2"> <td> R1C1 + R1C2</td></tr>

Slide 17 - Quiz

This item has no instructions

CSS 1/3
  • CSS staat voor Cascading Style Sheet
  • CSS bepaalt de vormgeving van de website
  • er zijn 3 manieren:
  1. external: link in <head>: <link href="index.css">
  2. internal: CSS code in <head> in paired <style> tag
  3. inline: CSS in HTML tag: <a style="color:red;">

Slide 18 - Slide

This item has no instructions

CSS 2/3
internal en external CSS gebruiken selectoren, zoals:
  • tag-selector: op basis van bv. <p>, <img>, <body>, etc
  • #: id-selector: op basis van het id-element (uniek!)
  • . : class-selector: op basis van de hele class (niet uniek!)
  • * : selector die geldt voor alle HTML elementen
inline CSS gebruikt geen selector maar staat direct in het element (en dus is er geen selector nodig)

Slide 19 - Slide

This item has no instructions

CSS 3/3
  1. external

  2. internal

  3. inline

Je kunt alle 3 manieren naast elkaar gebruiken

Slide 20 - Slide

This item has no instructions

(Meerkeuze) vragen
De volgende slides hebben (meerkeuze) vragen
Voor elke meerkeuze vraag heb je 20 seconden
Voor een open vraag is een timer zichtbaar

Achtergrond:
  • Oranje/blauw == zacht overleggen mag
  • Rood == stil!

Slide 21 - Slide

This item has no instructions

Als je in
internal CSS dezelfde eigenschap
van 1 element 3 keer aanpast...
welke gebruikt CSS dan?
A
eerste CSS regel
B
tweede CSS regel
C
derde CSS regel
D
ᕙ(⇀‸↼ ‶)ᕗ

Slide 22 - Quiz

This item has no instructions


Hoeveel methodes om
CSS te gebruiken zijn er in HTML?
A
1
B
2
C
3
D
4

Slide 23 - Quiz

This item has no instructions

Noem de methodes om
CSS te gebruiken zijn er in HTML
die jij kent
timer
0:30

Slide 24 - Open question

This item has no instructions

Geef een inline CSS
waarbij een p element rode tekst krijgt
timer
0:30

Slide 25 - Open question

This item has no instructions

Geef een internal CSS
waarbij element met ID "voorbeeld"
een blauwe achtergrond krijgt
timer
1:00

Slide 26 - Open question

This item has no instructions


Geef een voorbeeld van Internal CSS
met de selector Class "voorbeeld"
timer
2:00

Slide 27 - Open question

This item has no instructions


Wat is de vuistregel voor voorrang van de verschillende methodes van CSS?
A
inline > internal > external
B
internal > inline > external
C
external > internal > inline
D

Slide 28 - Quiz

This item has no instructions

Vind de fouten
In de code rechts staan fouten 
  1. schrijf die regels op en
  2. geef per foute regel
    de verbeterde code


timer
3:00

Slide 29 - Slide

This item has no instructions

Leerdoelen 1/2
Je kunt:
  • uitleggen waar HTML en CSS voor staan
  • het verschil tussen een paired en unpaired tag uitleggen
  • kun je beschrijven hoe een hyperlink in elkaar zit
  • van een pad aangeven of het absoluut of relatief is
  • uitleggen hoe je een cel in een tabel samenvoegt
  • ...

Slide 30 - Slide

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.
Leerdoelen 2/2
Je kunt:
  • de 3 verschillende methoden van CSS beschrijven
  • uitleggen welke selector voor ID wordt gebruikt
  • uitleggen welke selector voor Class wordt gebruikt
  • fouten in HTML en CSS herkennen als een pro

Slide 31 - Slide

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.
PTA h4

Slide 32 - Slide

This item has no instructions

Exit ticket
https://forms.gle/7J97NiRs9nqWjk5V6

Slide 33 - Slide

This item has no instructions

More lessons like this

Webdesign - Les 2 (22/23)

- Lesson with 30 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

HTML Basics

- Lesson with 38 slides
Communication & multimedia designHBOStudiejaar 2

HTML & CSS 02 - 2.4 tmt 3.2 - Hyperlinks en multimedia

- Lesson with 31 slides
InformaticaWOStudiejaar 4,5

HTML& CSS review

- Lesson with 11 slides
Communication & multimedia designHBOStudiejaar 2

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

- Lesson with 26 slides
InformaticaWOStudiejaar 4,5

HTML + CSS les 3: introductie CSS

- Lesson with 28 slides
InformaticaMiddelbare schoolvwoLeerjaar 4

CSS review - HWUD04 20:21

- Lesson with 26 slides
Communication & multimedia designHBOStudiejaar 2

01 - HTML - intro

- Lesson with 11 slides
ICTMBOStudiejaar 1-4