‹Revenir à la recherche

HTML & CSS: Opmaak met CSS

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

Cette leçon contient 21 diapositives, avec quiz interactifs, diapositives de texte et 3 vidéos.

time-iconLa durée de la leçon est: 45 min

Éléments de cette leçon

Domein A2: HTML & CSS
Opmaak met CSS!

Slide 1 - Diapositive

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

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

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

Slide 5 - Vidéo

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

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

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 - Vidéo

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

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

CSS-syntax uitgelegd

Slide 12 - Diapositive

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

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 - Vidéo

CSS element (color)
Keyword




RGB

Hexadecimaal

Slide 16 - Diapositive

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

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

Slide 19 - Question de remorquage

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

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

Slide 21 - Sondage

Plus de leçons comme celle-ci

Les4 - CSS Selectoren: HTML Elementen Aanspreken

- Leçon avec 22 diapositives
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

2 HTML: CSS

- Leçon avec 17 diapositives

HTML & CSS: Opmaak met CSS

- Leçon avec 18 diapositives
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

04 - CSS - selectoren

- Leçon avec 15 diapositives
ICTMBOStudiejaar 1,2

02 - CSS - selectoren

- Leçon avec 15 diapositives
ICTMBOStudiejaar 1-4

HTML + CSS les 3: introductie CSS

- Leçon avec 28 diapositives
InformaticaMiddelbare schoolvwoLeerjaar 4

01 - CSS - wat is

- Leçon avec 10 diapositives
ICTMBOStudiejaar 1-4

CSS

- Leçon avec 15 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4