Workshop; Webdesign

Webdesign

HTML en CSS

1 / 24

Slide 1: Tekstslide

InformaticaMiddelbare schoolhavoLeerjaar 4

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

Lesduur is: 120 min

Onderdelen in deze les

Webdesign

HTML en CSS

Slide 1 - Tekstslide

Doel

■ PTA afronden.

■ Leren hoe je een website maakt.

■ 80% van je eindopdracht maken.

Slide 2 - Tekstslide

Webdesign

Eindopdracht

Slide 3 - Tekstslide

VS Code

Instructies

Slide 4 - Tekstslide

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

HTML

Jouw eerste webpagina

Slide 6 - Tekstslide

HTML

■ HyperText Markup Language (HTML)

■ Tag

□ <html>

□ <head>

□ <body>

Slide 7 - Tekstslide

HTML

■ Tag

□ <h1> <h2>

□ <p>

□ <img>

■ Element

□ <h1>Titel</h1>

Slide 8 - Tekstslide

Waarover zou jij een website willen maken?

Slide 9 - Woordweb

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

Link

Jouw tweede webpagina

Slide 11 - Tekstslide

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

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

CSS

Jouw eerste webdesign

Slide 14 - Tekstslide

CSS

■ Cascading Style Sheet (CSS)

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

■ Properties

h1 {

color: blue;

}

Slide 15 - Tekstslide

CSS

■ h1 {

color: blue;

font-size: 20px;

}

■ p {

color: #FF0088;

}

Slide 16 - Tekstslide

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

Hoe voel je je op dit moment?

Slide 18 - Poll

Button

Interactie

Slide 19 - Tekstslide

Button

■ <button>Klik mij!</button>

■ button {

background-color: pink;

}

■ Pseudoclass

□ button:active {

□ button:hover {

Slide 20 - Tekstslide

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

Div

Elementen

Slide 22 - Tekstslide

Div

■ Betekent 'division'

■ <div></div>

■ Leeg element

■ Helpt om elementen de juiste positie te geven

Slide 23 - Tekstslide

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

Workshop; Webdesign

Onderdelen in deze les

Slide 1 - Tekstslide

Slide 2 - Tekstslide

Slide 3 - Tekstslide

Slide 4 - Tekstslide

Slide 5 - Tekstslide

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Slide 8 - Tekstslide

Slide 9 - Woordweb

Slide 10 - Tekstslide

Slide 11 - Tekstslide

Slide 12 - Tekstslide

Slide 13 - Tekstslide

Slide 14 - Tekstslide

Slide 15 - Tekstslide

Slide 16 - Tekstslide

Slide 17 - Tekstslide

Slide 18 - Poll

Slide 19 - Tekstslide

Slide 20 - Tekstslide

Slide 21 - Tekstslide

Slide 22 - Tekstslide

Slide 23 - Tekstslide

Slide 24 - Tekstslide

Meer lessen zoals deze

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