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

Slide 1: Slide

ProgrammerenMiddelbare schoolvmbo kLeerjaar 4

This lesson contains 19 slides, with interactive quizzes and text slides.

Lesson duration is: 45 min

Items in this lesson

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

Slide 2 - Slide

Slide 3 - Slide

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

Slide 5 - Slide

Slide 6 - Slide

Slide 7 - Slide

Slide 8 - Slide

Slide 9 - Slide

Slide 10 - Slide

Slide 11 - Slide

Juist antwoord:

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

Slide 12 - Slide

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

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

Slide 15 - Slide

Waar gebruik je CSS voor?

De inhoud van je website

De opmaak van je website

Het opslaan van je website

Het maken van menu's

Slide 16 - Quiz

Waar staat de INLINE CSS

In de <head> gedeelte

In een apart .css-bestand

In dezelfde regel als de HTML-tag

In de footer

Slide 17 - Quiz

Wat staat er in het <head> gedeelte van een HTML pagina?

De tekst die je ziet

De links naar andere websites

De internal CSS-opmaak voor de pagina

Afbeeldingen

Slide 18 - Quiz

Wat is het voordeel van internal CSS?

Het is onoverzichtelijk

Je kunt meerdere elementen tegelijkertijd stylen

Je moet alles apart stylen

Je kunt lettertypes niet aanpassen

Slide 19 - Quiz

2. Opmaak in CSS

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Slide

Slide 4 - Slide

Slide 5 - Slide

Slide 6 - Slide

Slide 7 - Slide

Slide 8 - Slide

Slide 9 - Slide

Slide 10 - Slide

Slide 11 - Slide

Slide 12 - Slide

Slide 13 - Slide

Slide 14 - Slide

Slide 15 - Slide

Slide 16 - Quiz

Slide 17 - Quiz

Slide 18 - Quiz

Slide 19 - Quiz

More lessons like this

Digi-doener! | De mens van top tot teen

M&M B2 - H1 - 1.3 Waar komen de grondstoffen vandaan?

Template Light-Mode Lila

Template Donkerblauw-Groen

Template Blauw

Template Dark Green

Template Roze

Template Dark Mode