HTML & CSS: Opmaak met CSS

Domein A2: HTML & CSS
Opmaak met CSS!

1 / 18

Slide 1: Slide

InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

This lesson contains 18 slides, with interactive quizzes, text slides and 5 videos.

Lesson duration is: 45 min

Items in this lesson

Domein A2: HTML & CSS
Opmaak met CSS!

Slide 1 - Slide

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

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

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

timer

0:30

Slide 6 - Quiz

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

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

CSS-syntax uitgelegd

Slide 10 - Slide

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

CSS element (color)

Keyword

RGB

Hexadecimaal

Slide 13 - Slide

Wat is het resultaat van deze HTML?

timer

0:30

Slide 14 - Quiz

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

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

😒🙁😐🙂😃

Slide 18 - Poll

HTML & CSS: Opmaak met CSS

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Video

Slide 4 - Slide

Slide 5 - Slide

Slide 6 - Quiz

Slide 7 - Video

Slide 8 - Slide

Slide 9 - Slide

Slide 10 - Slide

Slide 11 - Quiz

Slide 12 - Video

Slide 13 - Slide

Slide 14 - Quiz

Slide 15 - Video

Slide 16 - Video

Slide 17 - Slide

Slide 18 - Poll

More lessons like this

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