Workshop; Webdesign

Webdesign

HTML en CSS

1 / 24

Slide 1: Slide

InformaticaMiddelbare schoolhavoLeerjaar 4

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

Lesson duration is: 120 min

Items in this lesson

Webdesign

HTML en CSS

Slide 1 - Slide

Doel

■ PTA afronden.

■ Leren hoe je een website maakt.

■ 80% van je eindopdracht maken.

Slide 2 - Slide

Webdesign

Eindopdracht

Slide 3 - Slide

VS Code

Instructies

Slide 4 - Slide

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

HTML

Jouw eerste webpagina

Slide 6 - Slide

HTML

■ HyperText Markup Language (HTML)

■ Tag

□ <html>

□ <head>

□ <body>

Slide 7 - Slide

HTML

■ Tag

□ <h1> <h2>

□ <p>

□ <img>

■ Element

□ <h1>Titel</h1>

Slide 8 - Slide

Waarover zou jij een website willen maken?

Slide 9 - Mind map

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

Link

Jouw tweede webpagina

Slide 11 - Slide

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

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

CSS

Jouw eerste webdesign

Slide 14 - Slide

CSS

■ Cascading Style Sheet (CSS)

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

■ Properties

h1 {

color: blue;

}

Slide 15 - Slide

CSS

■ h1 {

color: blue;

font-size: 20px;

}

■ p {

color: #FF0088;

}

Slide 16 - Slide

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

Hoe voel je je op dit moment?

Slide 18 - Poll

Button

Interactie

Slide 19 - Slide

Button

■ <button>Klik mij!</button>

■ button {

background-color: pink;

}

■ Pseudoclass

□ button:active {

□ button:hover {

Slide 20 - Slide

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

Div

Elementen

Slide 22 - Slide

Div

■ Betekent 'division'

■ <div></div>

■ Leeg element

■ Helpt om elementen de juiste positie te geven

Slide 23 - Slide

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

Workshop; Webdesign

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 - Mind map

Slide 10 - Slide

Slide 11 - Slide

Slide 12 - Slide

Slide 13 - Slide

Slide 14 - Slide

Slide 15 - Slide

Slide 16 - Slide

Slide 17 - Slide

Slide 18 - Poll

Slide 19 - Slide

Slide 20 - Slide

Slide 21 - Slide

Slide 22 - Slide

Slide 23 - Slide

Slide 24 - Slide

More lessons like this

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

HTML Basics