‹Terug naar zoeken

HTML & CSS: Opmaak met CSS

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

In deze les zitten 21 slides, met interactieve quizzen, tekstslides en 3 videos.

time-iconLesduur is: 45 min

Onderdelen in deze les

Domein A2: HTML & CSS
Opmaak met CSS!

Slide 1 - Tekstslide

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

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

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

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

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

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

CSS-syntax uitgelegd

Slide 12 - Tekstslide

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

Slide 15 - Video

CSS element (color)
Keyword




RGB

Hexadecimaal

Slide 16 - Tekstslide

Wat is het resultaat van deze HTML?

timer
0:30
A
B
C
D

Slide 17 - Quizvraag

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

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

Slide 19 - Sleepvraag

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

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

Slide 21 - Poll

Meer lessen zoals deze

Les4 - CSS Selectoren: HTML Elementen Aanspreken

- Les met 22 slides
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

2 HTML: CSS

- Les met 17 slides

HTML & CSS: Opmaak met CSS

- Les met 18 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

04 - CSS - selectoren

- Les met 15 slides
ICTMBOStudiejaar 1,2

02 - CSS - selectoren

- Les met 15 slides
ICTMBOStudiejaar 1-4

01 - CSS - wat is

- Les met 10 slides
ICTMBOStudiejaar 1-4

HTML + CSS les 3: introductie CSS

- Les met 28 slides
InformaticaMiddelbare schoolvwoLeerjaar 4

03 - CSS - Toevoegen: de integratie met HTML

- Les met 10 slides
ICTMBOStudiejaar 1,2