Workshop; Webdesign

Webdesign

HTML en CSS

1 / 24

Slide 1: Diapositive

InformaticaMiddelbare schoolhavoLeerjaar 4

Cette leçon contient 24 diapositives, avec quiz interactifs et diapositives de texte.

La durée de la leçon est: 120 min

Éléments de cette leçon

Webdesign

HTML en CSS

Slide 1 - Diapositive

Doel

■ PTA afronden.

■ Leren hoe je een website maakt.

■ 80% van je eindopdracht maken.

Slide 2 - Diapositive

Webdesign

Eindopdracht

Slide 3 - Diapositive

VS Code

Instructies

Slide 4 - Diapositive

Wat?

Visual Studio Code (VS Code) installeren.

Waarom?

Met VS Code kun je gemakkelijk een website maken.

Hoe?

Ga naar https://code.visualstudio.com/

Download voor Windows

Open het programma en gebruik standaardinstellingen

Hulp?

Eerste: Andere leerlingen.

Tweede: Docent.

Tijd?

5 minuten.

Uitkomst?

Je hebt VS Code geïnstalleerd en geopend.

Klaar?

Ontdek alvast functionaliteit van VS Code.

Slide 5 - Diapositive

HTML

Jouw eerste webpagina

Slide 6 - Diapositive

HTML

■ HyperText Markup Language (HTML)

■ Tag

□ <html>

□ <head>

□ <body>

Slide 7 - Diapositive

HTML

■ Tag

□ <h1> <h2>

□ <p>

□ <img>

■ Element

□ <h1>Titel</h1>

Slide 8 - Diapositive

Waarover zou jij een website willen maken?

Slide 9 - Carte mentale

Wat?

Maak een website met een titel, paragraaf en afbeelding.

Waarom?

Kennismaken met HTML.

Hoe?

Met VS Code.

Hulp?

Eerste: Internetbronnen (aanrader: w3schools.com)

Tweede: Andere leerlingen.

Derde: Docent.

Tijd?

15 minuten.

Uitkomst?

Je hebt een website met minstens een titel, paragraaf en afbeelding.

Klaar?

Denk na over hoe jouw website er uit gaat zien. Maak voor jezelf schetsen.

Slide 10 - Diapositive

Link

Jouw tweede webpagina

Slide 11 - Diapositive

Link

■ <a href="https://www.google.com/">Ga naar Google!</a>

■ <a href="mijnpagina.html">Ga naar mijn pagina</a>

■ <a href="https://www.google.com/">

</a>

Slide 12 - Diapositive

Wat?

Maak een tweede pagina en gebruik de <a> tag om jouw pagina's naar elkaar te laten verwijzen.

Waarom?

Kennismaken met meerdere pagina's.

Hoe?

Met VS Code.

Hulp?

Eerste: Internetbronnen (aanrader: w3schools.com)

Tweede: Andere leerlingen.

Derde: Docent.

Tijd?

10 minuten.

Uitkomst?

Je hebt meerdere pagina's met een link naar elkaar toe.

Klaar?

Vul jouw website met meer titels, paragrafen, afbeeldingen en links.

Slide 13 - Diapositive

CSS

Jouw eerste webdesign

Slide 14 - Diapositive

CSS

■ Cascading Style Sheet (CSS)

■ <link rel="stylesheet" href="style.css" />

■ Properties

h1 {

color: blue;

}

Slide 15 - Diapositive

CSS

■ h1 {

color: blue;

font-size: 20px;

}

■ p {

color: #FF0088;

}

Slide 16 - Diapositive

Wat?

Ga op zoek naar CSS properties die jouw website kunnen verrijken qua kleur en vorm. Pas deze toe op jouw website.

Waarom?

Kennismaken met CSS properties.

Hoe?

Met VS Code en zoekopdrachten op internet.

Hulp?

Eerste: Internetbronnen (aanrader: w3schools.com)

Tweede: Andere leerlingen.

Derde: Docent.

Tijd?

20 minuten.

Uitkomst?

Jouw website heeft unieke kleuren en vormen.

Klaar?

Vul jouw website aan met elementen uit jouw ontwerp.

Slide 17 - Diapositive

Hoe voel je je op dit moment?

Slide 18 - Sondage

Button

Interactie

Slide 19 - Diapositive

Button

■ <button>Klik mij!</button>

■ button {

background-color: pink;

}

■ Pseudoclass

□ button:active {

□ button:hover {

Slide 20 - Diapositive

Wat?

Voeg knoppen toe aan jouw website en gebruik pseudoclasses om jouw website interactief te maken.

Waarom?

Interactief maken van jouw website.

Hoe?

Met VS Code.

Hulp?

Eerste: Internetbronnen (aanrader: w3schools.com)

Tweede: Andere leerlingen.

Derde: Docent.

Tijd?

20 minuten.

Uitkomst?

Jouw website reageert op muisbewegingen en -klikken.

Klaar?

Vul jouw website aan met elementen uit jouw ontwerp.

Slide 21 - Diapositive

Div

Elementen

Slide 22 - Diapositive

Div

■ Betekent 'division'

■ <div></div>

■ Leeg element

■ Helpt om elementen de juiste positie te geven

Slide 23 - Diapositive

Wat?

Vul jouw website aan met elementen uit jouw ontwerp.

Waarom?

Eindopdracht voor het grootste deel afronden,

Hoe?

Met VS Code.

Hulp?

Eerste: Internetbronnen (aanrader: w3schools.com)

Tweede: Andere leerlingen.

Derde: Docent.

Tijd?

De rest van de les.

Uitkomst?

Je hebt een goede basis (80%) voor je eindopdracht.

Klaar?

Vraag de docent om feedback op jouw website.

Slide 24 - Diapositive

Workshop; Webdesign

Éléments de cette leçon

Slide 1 - Diapositive

Slide 2 - Diapositive

Slide 3 - Diapositive

Slide 4 - Diapositive

Slide 5 - Diapositive

Slide 6 - Diapositive

Slide 7 - Diapositive

Slide 8 - Diapositive

Slide 9 - Carte mentale

Slide 10 - Diapositive

Slide 11 - Diapositive

Slide 12 - Diapositive

Slide 13 - Diapositive

Slide 14 - Diapositive

Slide 15 - Diapositive

Slide 16 - Diapositive

Slide 17 - Diapositive

Slide 18 - Sondage

Slide 19 - Diapositive

Slide 20 - Diapositive

Slide 21 - Diapositive

Slide 22 - Diapositive

Slide 23 - Diapositive

Slide 24 - Diapositive

Plus de leçons comme celle-ci

01 - HTML - intro

Webdesign - Les 3 (23/24): CSS

2 HTML: CSS

Les3- CSS Selectoren: HTML Elementen Aanspreken

HTML & CSS 90 - herhaling

Workshop 4 id's en classes

01 - CSS - wat is

Week 5 - Les 1