HTML & CSS: Opmaak met CSS

Domein A2: HTML & CSS
Opmaak met CSS!

1 / 18

Slide 1: Diapositive

InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

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

La 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

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

Slide 3 - 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 4 - 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 5 - Diapositive

Wat is een correcte manier om een achtergrondkleur aan een HTML-document toe te voegen?

timer

0:30

Slide 6 - Quiz

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

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

Slide 8 - Diapositive

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

CSS-syntax uitgelegd

Slide 10 - Diapositive

Wat is NIET waar?

Een extern CSS-bestand...

timer

0:30

kan het uiterlijk van een hele website veranderen

mag gecombineerd worden met HTML-code

wordt naartoe gelinkt vanuit de HEAD-sectie van HTML-bestand

moet eindigen met de extensie .css

Slide 11 - Quiz

Slide 12 - Vidéo

CSS element (color)

Keyword

RGB

Hexadecimaal

Slide 13 - Diapositive

Wat is het resultaat van deze HTML?

timer

0:30

Slide 14 - Quiz

Slide 15 - Vidéo

Slide 16 - Vidéo

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

Kun je een website maken bestaande uit koppen, lijsten, links, afbeeldingen en youtube- filmpjes?

😒🙁😐🙂😃

Slide 18 - Sondage

HTML & CSS: Opmaak met CSS

Éléments de cette leçon

Slide 1 - Diapositive

Slide 2 - Diapositive

Slide 3 - Vidéo

Slide 4 - Diapositive

Slide 5 - Diapositive

Slide 6 - Quiz

Slide 7 - Vidéo

Slide 8 - Diapositive

Slide 9 - Diapositive

Slide 10 - Diapositive

Slide 11 - Quiz

Slide 12 - Vidéo

Slide 13 - Diapositive

Slide 14 - Quiz

Slide 15 - Vidéo

Slide 16 - Vidéo

Slide 17 - Diapositive

Slide 18 - Sondage

Plus de leçons comme celle-ci

HTML & CSS: Opmaak met CSS

Les4 - CSS Selectoren: HTML Elementen Aanspreken

03 - CSS - css toevoegen

03 - CSS - Toevoegen: de integratie met HTML

WEEK 3 - INFORMATICA

WEEK 3 - INFORMATICA

04 - CSS - selectoren

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