‹Terug naar zoeken

HTML & CSS: Opmaak met CSS

Domein A2: HTML & CSS
Opmaak met CSS!
1 / 18
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

In deze les zitten 18 slides, met interactieve quizzen, tekstslides en 5 videos.

time-iconLesduur is: 45 min

Onderdelen in deze les

Domein A2: HTML & CSS
Opmaak met CSS!

Slide 1 - Tekstslide

Leerdoelen
Na deze les kun je vertellen
  • Hoe je met een style-attribuut opmaak aan je website kunt toevoegen
  • Wat CSS is en waar het voor dient 
  • Hoe je elementen kunt kleuren
  • Hoe je CSS selectors gebruikt om elementen te selecteren en aan te passen

Na deze les kun je 
  • De vormgeving van je website naar je eigen smaak aanpassen

Slide 2 - Tekstslide

Slide 3 - Video

HTML style-attribuut
  • Het instellen van de stijl van een HTML-element kan met het style attribuut.
  • Het HTML-stijlkenmerk heeft de volgende syntaxis:



  • De property is een CSS-eigenschap. De value is een CSS-waarde.

Slide 4 - Tekstslide

HTML style-attribuut
Gebruik het style-attribuut voor het opmaken van HTML-elementen, zoals:
  • Gebruik background-color voor achtergrondkleur
  • Gebruik color voor tekstkleuren
  • Gebruik font-family voor tekstlettertypen
  • Gebruik font-size voor tekstgroottes
  • Gebruik text-align voor tekstuitlijning

Zoek mogelijke waardes (values) op in voorbeelden of  HTML-documentatie.

Slide 5 - Tekstslide


Wat is een correcte manier om een ​​achtergrondkleur aan een HTML-document toe te voegen?
timer
0:30
A
<body style='background-color:pink;'>
B
<body background-color='pink;'>
C
<body style='bgcolor:pink;'>
D
<body style='pink:bg-color;'>

Slide 6 - Quizvraag

Slide 7 - Video

CSS (Basis)
  • Tot nu toe alle opmaak van websites gedaan in HTML
  • Dit is slecht onderhoudbaar en tijdrovend, daarom CSS
  • CSS staat voor Cascading Style Sheets

Dus tegenwoordig:
  • voor structuur gebruiken we HTML
  • Voor opmaak CSS (style-tag, inline of extern document)

Slide 8 - Tekstslide

CSS (Basis)
Inline: pas een unieke stijl toe
op een enkel HTML-element

Inline: definieer de stijl voor een
enkele HTML-pagina 

Extern: definieer de stijl voor
meerdere  HTML-pagina's 

Slide 9 - Tekstslide

CSS-syntax uitgelegd

Slide 10 - Tekstslide

Wat is NIET waar?

Een extern CSS-bestand...
timer
0:30
A
kan het uiterlijk van een hele website veranderen
B
mag gecombineerd worden met HTML-code
C
wordt naartoe gelinkt vanuit de HEAD-sectie van HTML-bestand
D
moet eindigen met de extensie .css

Slide 11 - Quizvraag

Slide 12 - Video

CSS element (color)
Keyword




RGB

Hexadecimaal

Slide 13 - Tekstslide

Wat is het resultaat van deze HTML?

timer
0:30
A
B
C
D

Slide 14 - Quizvraag

Slide 15 - Video

Slide 16 - Video

Opdracht (thuis afmaken)
Voeg een aantal nieuwe elementen toe aan de rainbow-website:
  • Zet de ongesorteerde lijst om in een gesorteerde lijst
  • Voeg een plaatje toe met een link naar de wikipedia-pagina over regenbogen
  • Voeg een youtube-filmpje toe over regenbogen voor kinderen
  • Voeg commentaar toe tussen de verschillende secties 

Klaar? Lever je website in via Google Classroom (met SHARE en COPY LINK)

Slide 17 - Tekstslide

Kun je een website maken bestaande uit koppen, lijsten, links, afbeeldingen en youtube- filmpjes?
😒🙁😐🙂😃

Slide 18 - Poll

Meer lessen zoals deze

HTML & CSS: Opmaak met CSS

- Les met 21 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

Les4 - CSS Selectoren: HTML Elementen Aanspreken

- Les met 22 slides
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

03 - CSS - css toevoegen

- Les met 11 slides
ICTMBOStudiejaar 1,2

03 - CSS - Toevoegen: de integratie met HTML

- Les met 10 slides
ICTMBOStudiejaar 1,2

WEEK 3 - INFORMATICA

- Les met 33 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 3 - INFORMATICA

- Les met 35 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

04 - CSS - selectoren

- Les met 15 slides
ICTMBOStudiejaar 1,2

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

- Les met 26 slides
InformaticaWOStudiejaar 4,5