‹Return to search

HTML & CSS: Opmaak met CSS

Domein A2: HTML & CSS
Opmaak met CSS!
1 / 21
next
Slide 1: Slide
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

This lesson contains 21 slides, with interactive quizzes, text slides and 3 videos.

time-iconLesson duration is: 45 min

Items in this lesson

Domein A2: HTML & CSS
Opmaak met CSS!

Slide 1 - Slide

Terugblik opdracht regenbogen 
  1. Help Asya met het voltooien van haar huiswerkonderzoek over regenbogen
  2. Voor vandaag deel 1 en 2 (zie Google Classroom)

Is het gelukt?
  • Ben je eraan toegekomen?
  • Begreep je wat je moest doen?
  • Is het gelukt de aanpassingen te maken?

Slide 2 - Slide

Ik heb de regenboog-opdracht kunnen maken
Ja, het was makkelijk
Ja, maar ik vond het best lastig
Geprobeerd, maar ik snapte niet goed wat ik moest doen
Nee, ik vond het te moeilijk
Nee, niet aan toegekomen

Slide 3 - Poll

Leerdoelen
Na deze les kun je vertellen
  • Hoe je met style-attributen en inline of externe stylesheets de vormgeving (opmaak) van je website kunt bepalen
  • Welke rol CSS hierbij speelt 
  • Waar de type-selector voor dient
  • Hoe je eigenschappen van elementen als kleur kunt instellen en aanpassen

Na deze les kun je 
  • De vormgeving van je website bepalen

Slide 4 - Slide

Slide 5 - 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 6 - Slide

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

Wat is de juiste manier om een ​​achtergrondkleur voor een HTML-document in te stellen?
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 8 - Quiz

Slide 9 - 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:
  • voor structuur gebruiken we HTML
  • Voor opmaak CSS (style-tag, inline of extern document)

Slide 10 - Slide

CSS (Basis)
Style: 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 11 - Slide

CSS-syntax uitgelegd

Slide 12 - Slide

Type-selectors
body, h1 en p zijn voorbeelden van type-selectors . Je gebruikt ze om alle elementen op een pagina te selecteren aan de hand van hun tagnaam.

Slide 13 - Slide

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 14 - Quiz

Slide 15 - Video

CSS element (color)
Keyword




RGB

Hexadecimaal

Slide 16 - Slide

Wat is het resultaat van deze HTML?

timer
0:30
A
B
C
D

Slide 17 - Quiz

Opdracht: oefenen met CSS
In deze uitdaging leer je hoe je een frame op een webpagina kunt opmaken met behulp van een reeks CSS-eigenschappen.

  1. Ga naar: https://www.101computing.net/live-css-editor/
  2. Zoek uit waar de margin, padding, background-color, border, border-radius en font-weigth-eigenschappen voor dienen door ze op te zoeken, het box-model te bekijken en/ of 1 van de 2 voorbeelden na te maken.
  3. Hierna volgt een vraag over deze eigenschappen


timer
5:00

Slide 18 - Slide

Sleep elke CSS-eigenschap naar de juiste hotspot
timer
0:45
margin
padding
border
border-radius
font-weight
background-color

Slide 19 - Drag question

Opdracht (thuis afmaken)
Maak de volgende aanpassingen aan je rainbow-website:
  • Vervang de font-elementen in je tabel door style-elementen
  • Vervang in de pot of gold-boodschap <center><b><i> door style-elementen. Je kunt hiervoor een span-element gebruiken.
  • Verander de achtergrondkleur van de tabel in lichtblauw. Verander ook de dikte, style en kleur van de border
  • Verander het lettertype en geef je plaatje(s) afgeronde hoeken. Gebruik hiervoor een externe stylesheet (de css-editor in codepen).

Slide 20 - Slide

Kun je uitleggen hoe je de vormgeving van een website (kleur, lettertype, vormen) kunt aanpassen?
😒🙁😐🙂😃

Slide 21 - Poll

More lessons like this

Les4 - CSS Selectoren: HTML Elementen Aanspreken

- Lesson with 22 slides
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

04 - CSS - selectoren

- Lesson with 15 slides
ICTMBOStudiejaar 1,2

2 HTML: CSS

- Lesson with 17 slides

HTML & CSS: Opmaak met CSS

- Lesson with 18 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

02 - CSS - selectoren

- Lesson with 15 slides
ICTMBOStudiejaar 1-4

01 - CSS - wat is

- Lesson with 10 slides
ICTMBOStudiejaar 1-4

03 - CSS - Toevoegen: de integratie met HTML

- Lesson with 10 slides
ICTMBOStudiejaar 1,2

HTML + CSS les 3: introductie CSS

- Lesson with 28 slides
InformaticaMiddelbare schoolvwoLeerjaar 4