‹Terug naar zoeken

HTML & CSS 90 - herhaling

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

In deze les zitten 33 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 60 min

Onderdelen in deze les

                      HTML & CSS

Slide 1 - Tekstslide

Deze slide heeft geen instructies

Fundament
Kerndomein A: Vaardigheden

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


Slide 2 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

Deze slide heeft geen instructies

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

Slide 6 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

(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 - Tekstslide

Deze slide heeft geen instructies


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 - Quizvraag

Deze slide heeft geen instructies



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

Slide 14 - Quizvraag

Deze slide heeft geen instructies


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

Slide 15 - Quizvraag

Deze slide heeft geen instructies


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

Slide 16 - Quizvraag

Deze slide heeft geen instructies

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 - Quizvraag

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

CSS 3/3
  1. external

  2. internal

  3. inline

Je kunt alle 3 manieren naast elkaar gebruiken

Slide 20 - Tekstslide

Deze slide heeft geen instructies

(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 - Tekstslide

Deze slide heeft geen instructies

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 - Quizvraag

Deze slide heeft geen instructies


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

Slide 23 - Quizvraag

Deze slide heeft geen instructies

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

Slide 24 - Open vraag

Deze slide heeft geen instructies

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

Slide 25 - Open vraag

Deze slide heeft geen instructies

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

Slide 26 - Open vraag

Deze slide heeft geen instructies


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

Slide 27 - Open vraag

Deze slide heeft geen instructies


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 - Quizvraag

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

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 - Tekstslide

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 - Tekstslide

Deze slide heeft geen instructies

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

Slide 33 - Tekstslide

Deze slide heeft geen instructies

Meer lessen zoals deze

Webdesign - Les 2 (22/23)

- Les met 30 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

HTML Basics

- Les met 38 slides
Communication & multimedia designHBOStudiejaar 2

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

- Les met 31 slides
InformaticaWOStudiejaar 4,5

HTML& CSS review

- Les met 11 slides
Communication & multimedia designHBOStudiejaar 2

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

- Les met 26 slides
InformaticaWOStudiejaar 4,5

HTML + CSS les 3: introductie CSS

- Les met 28 slides
InformaticaMiddelbare schoolvwoLeerjaar 4

CSS review - HWUD04 20:21

- Les met 26 slides
Communication & multimedia designHBOStudiejaar 2

01 - HTML - intro

- Les met 11 slides
ICTMBOStudiejaar 1-4