2. Opmaak in CSS

2. Opmaak in CSS
1. De leerling kan zijn index.html opmaken in HTML & CSS

2. De leerling kan uitleggen wat het verschil is tussen HTML & CSS

3. De leerling kan een afbeelding toevoegen aan zijn/haar website. 
1 / 19
volgende
Slide 1: Tekstslide
ProgrammerenMiddelbare schoolvmbo kLeerjaar 4

In deze les zitten 19 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 45 min

Onderdelen in deze les

2. Opmaak in CSS
1. De leerling kan zijn index.html opmaken in HTML & CSS

2. De leerling kan uitleggen wat het verschil is tussen HTML & CSS

3. De leerling kan een afbeelding toevoegen aan zijn/haar website. 

Slide 1 - Tekstslide

Slide 2 - Tekstslide

Slide 3 - Tekstslide

Opdracht 
1. Voeg in de <title> de naam van jouw toekomstige website toe.
2. Schrijf in de <body>: “Welkom op mijn website!”

Command + S = opslaan. Als je dubbel klikt op je index.html bestand, opent deze in een webbrowser en kan je zien of het gelukt is. 

Slide 4 - Tekstslide

Slide 5 - Tekstslide

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Slide 8 - Tekstslide

Slide 9 - Tekstslide

Slide 10 - Tekstslide

Slide 11 - Tekstslide

Juist antwoord:
 Inline, want de styling staat direct in het HTML-element zelf. 

Slide 12 - Tekstslide

Opdracht 
1. Maak een <h1> titel blauw met inline CSS.

2. Maak via internal CSS:
  • alle paragrafen (<p>) groen
  • alle <h1> titels 30px groot
  • de achtergrondkleur van je website lichtgrijs
3. Maak een screenshot van het resultaat en lever dit in op SomToday
4. Verander zelf de opmaak naar jouw gewenste opmaak (kleur, grootte, lettertype).

Slide 13 - Tekstslide

Opdracht 
1. Maak een <h1> titel blauw met inline CSS.

2. Maak via internal CSS:
  • alle paragrafen (<p>) groen
  • alle <h1> titels 30px groot
  • de achtergrondkleur van je website lichtgrijs
3. Maak een screenshot van het resultaat en lever dit in op SomToday
4. Verander zelf de opmaak naar jouw gewenste opmaak (kleur, grootte, lettertype).

Slide 14 - Tekstslide

Slide 15 - Tekstslide

Waar gebruik je CSS voor?
A
De inhoud van je website
B
De opmaak van je website
C
Het opslaan van je website
D
Het maken van menu's

Slide 16 - Quizvraag

Waar staat de INLINE CSS
A
In de <head> gedeelte
B
In een apart .css-bestand
C
In dezelfde regel als de HTML-tag
D
In de footer

Slide 17 - Quizvraag

Wat staat er in het <head> gedeelte van een HTML pagina?
A
De tekst die je ziet
B
De links naar andere websites
C
De internal CSS-opmaak voor de pagina
D
Afbeeldingen

Slide 18 - Quizvraag

Wat is het voordeel van internal CSS?
A
Het is onoverzichtelijk
B
Je kunt meerdere elementen tegelijkertijd stylen
C
Je moet alles apart stylen
D
Je kunt lettertypes niet aanpassen

Slide 19 - Quizvraag