H5 - CV WEBSITE

Havo 5

1 / 47

Slide 1: Slide

InformaticaMiddelbare schoolhavoLeerjaar 4

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

Lesson duration is: 90 min

Items in this lesson

Havo 5

Slide 1 - Slide

Startklaar zitten.

STARTKLAAR!

Tellie in zakkie

Slide 2 - Slide

Startklaar zitten.

Voorkennis activeren

Slide 3 - Slide

This item has no instructions

Wat is de basisstructuur van een HTML-document?

<body>

<head>

<!DOCTYPE html>

<html>

Slide 4 - Quiz

This item has no instructions

Hoe maak je een hyperlink in HTML?

<href='url'>link</href>

Slide 5 - Quiz

This item has no instructions

Welke tag gebruik je voor een paragraaf?

<para>

<p>

<text>

Slide 6 - Quiz

This item has no instructions

Welke taal wordt gebruikt voor interactiviteit?

CSS

HTML

SQL

JavaScript

Slide 7 - Quiz

This item has no instructions

Wat is een kenmerk van responsief ontwerp?

Aanpassen aan verschillende schermformaten

Vaste layout voor desktop

Gebruik van alleen afbeeldingen

Geen media queries gebruiken

Slide 8 - Quiz

This item has no instructions

Wat is de functie van CSS?

Structureren van de webpagina

Styling van HTML-elementen

Toevoegen van interactiviteit

Programmeren van webapplicaties

Slide 9 - Quiz

This item has no instructions

Leerdoelen

Aan het einde van deze periode kunnen de leerlingen zelfstandig een persoonlijke CV-website ontwerpen en ontwikkelen die bestaat uit de volgende pagina's:

Home
Wie ben ik
Mijn werkervaring
Mijn skills
Opleiding
Hobby's
Neem contact

De website moet voldoen aan de principes van UX-design en heuristieken en opgebouwd zijn met een gestructureerde indeling bestaande uit een navigatiebalk, main content. Een header en footer mag erbij maar is niet verplicht.

Slide 10 - Slide

This item has no instructions

Lesdoel week 1 : Websiteplanning en Wireframing

De leerling kan een wireframe en projectbeschrijving opleveren die de structuur en doelstellingen van de CV-website verduidelijken.

Slide 11 - Slide

This item has no instructions

Website C.V. Opdracht

Week

Opdracht

Weging

Websiteplanning en wireframing

15 punten

HTML-structuur opzetten

15 punten

Styling met CSS en UX-principes

25 punten

Content toevoegen en verbeteren

15 punten

Contactformulier en oplevering

25 punten

marge

Slide 12 - Slide

This item has no instructions

Wireframing

Wireframing is het maken van een eenvoudige visuele schets van een website om de structuur en indeling van de pagina’s te bepalen.

Duidelijke structuur
Efficiënter werken
Gebruikerservaring (UX)

Navigatiebal
Header
Main content
Footer

Slide 13 - Slide

This item has no instructions

Ik weet waarom het handig is een wireframe te gebruiken

Deels

Nee

Slide 14 - Poll

This item has no instructions

Waarom een wireframe?

Slide 15 - Open question

This item has no instructions

Miro.com

Je kan het op papier maken
Je kan het ook in een programma maken

Miro

Figma

Canva

Balsamiq

Kies eentje wat het prettigst werkt.

Slide 16 - Slide

This item has no instructions

Inleveren

Eind deze week, week opdracht 1 inleveren via teams

Slide 17 - Slide

Startklaar zitten.

Afsluiten

Samenvatting: klassikaal

Agenda: Inleveren week 1 + vooruit kijken naar opdracht week 2

Slide 18 - Slide

Startklaar zitten.

STARTKLAAR!

Tellie in zakkie

Slide 19 - Slide

Startklaar zitten.

Voorkennis activeren

Slide 20 - Slide

This item has no instructions

Wat is een webbrowser?

Een type computerhardware

Een sociaal netwerk

Software om webpagina's te bekijken

Een videospeler

Slide 21 - Quiz

This item has no instructions

Wat is een veelgebruikte codeertaal voor websites?

CSS

HTML

Python

Java

Slide 22 - Quiz

This item has no instructions

Website C.V. Opdracht

Week

Opdracht

Weging

Websiteplanning en wireframing

15 punten

HTML-structuur opzetten

15 punten

Styling met CSS en UX-principes

25 punten

Content toevoegen en verbeteren

15 punten

Contactformulier en oplevering

25 punten

marge

Slide 23 - Slide

This item has no instructions

Lesdoel

Lesdoel: De leerlingen kunnen hun CV-website bouwen volgens hun eigen ontwerp en een functionele HTML-structuur opzetten.

Slide 24 - Slide

This item has no instructions

HTML & CSS

HTML: Daar delen wij de website mee in door HTML code te schrijven

CSS: Daar maken wij de website mooi mee door CSS code toe te voegen aan HTML

Slide 25 - Slide

This item has no instructions

HTML zonder CSS

Dit is alleen HTML code

Dit is HTML met CSS

Slide 26 - Slide

This item has no instructions

HTML - TAGS

HTML BESTAAT UIT TAGS

<HTML> = OPENING TAG

</HTML> = SLUITING TAG

<HEAD> = OPENING TAG

</HEAD> = SLUITING TAG

ENZ.

Slide 27 - Slide

This item has no instructions

HTML basis structuur

HTML bestaat voornamelijk uit HTML tags en begint altijd met een basisstructuur

een html tag is bijvoorbeeld

er bestaan heel veel html tags

html basisstructuur

Slide 28 - Slide

This item has no instructions

andere informatie en bestanden die html nodig heeft

Slide 29 - Slide

This item has no instructions

HTML

Slide 30 - Slide

This item has no instructions

HTML

Zoek het volgende uit

ik wil een foto toevoegen op mijn website hoe doe ik dat?
ik wil een koptekst toevoegen in mijn html hoe doe ik dat?
ik wil een navigatie toevoegen in mijn thml hoe doe ik dat?
ik wil een footer toevoegen in mijn html hoe doe ik dat?

gebruik hiervoor de volgende link: w3schools

Slide 31 - Slide

This item has no instructions

zet jouw antwoorden hier

Slide 32 - Open question

This item has no instructions

HTML element

HTML element

Een HTML tag kan

attributen noemen.

dit zijn eigenschappen

die de HTML tag kan

beinvloeden

Slide 33 - Slide

This item has no instructions

Ik vond deze opdracht

Heel makkelijk

Makkeljk

Wel te doen

Moeilijk

Heel moeilijk

Slide 34 - Poll

This item has no instructions

zet jouw code uit het bestand home.html

Slide 35 - Open question

This item has no instructions

Afsluiting

Klasikaal

In jouw agenda zetten:

Zondag 23.59 uiterst jouw eerste versie cv website.

Slide 36 - Slide

This item has no instructions

STARTKLAAR!

Tellie in zakkie

Slide 37 - Slide

Startklaar zitten.

Voorkennis activeren

Slide 38 - Slide

This item has no instructions

Wat is een voorbeeld van grote letters?

color: red;

margin: 10px;

font-size: 2em;

font-size: 24px;

Slide 39 - Quiz

This item has no instructions

Welke is geen CSS code?

<html>

<body>

color: red;

Slide 40 - Quiz

This item has no instructions

Welke CSS eigenschap maakt letters groot?

letter-spacing

text-transform

font-size

line-height

Slide 41 - Quiz

This item has no instructions

Lesdoel

Aan het einde van de les kunnen leerlingen een header met een CSS-gestuurde slideshow maken, waarbij minimaal 2 slides automatisch wisselen, zonder interactie of JavaScript.

Slide 42 - Slide

This item has no instructions

Head vs Header

Head Basisstructuur HTML

Header

Slide 43 - Slide

This item has no instructions

Header

<header class="header">

<div class="slideshow">

<div class="slide"></div>

</div>

</header>

Neem dit over

Slide 44 - Slide

This item has no instructions

CSS - selector class

Classe wat is dat in CSS

.naamclasse {

css code

}

Slide 45 - Slide

This item has no instructions

CSS - maak jouw css af voor de header

In teams heb ik een bestand home_.hmtl gedeeld met jullie

Maak daar de css van af

Slide 46 - Slide

This item has no instructions

Afsluiting

Klasikaal behandelen: wat hebben wij gedaan

Vooruitblikken: Wij gaan veder met main content en footer

Planning: Schrijf in jouw agenda, cv website incl navigatie + header inleveren uiterst a.s. zondag via teams!

Slide 47 - Slide

This item has no instructions

H5 - CV WEBSITE

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Slide

Slide 4 - Quiz

Slide 5 - Quiz

Slide 6 - Quiz

Slide 7 - Quiz

Slide 8 - Quiz

Slide 9 - Quiz

Slide 10 - Slide

Slide 11 - Slide

Slide 12 - Slide

Slide 13 - Slide

Slide 14 - Poll

Slide 15 - Open question

Slide 16 - Slide

Slide 17 - Slide

Slide 18 - Slide

Slide 19 - Slide

Slide 20 - Slide

Slide 21 - Quiz

Slide 22 - Quiz

Slide 23 - Slide

Slide 24 - Slide

Slide 25 - Slide

Slide 26 - Slide

Slide 27 - Slide

Slide 28 - Slide

Slide 29 - Slide

Slide 30 - Slide

Slide 31 - Slide

Slide 32 - Open question

Slide 33 - Slide

Slide 34 - Poll

Slide 35 - Open question

Slide 36 - Slide

Slide 37 - Slide

Slide 38 - Slide

Slide 39 - Quiz

Slide 40 - Quiz

Slide 41 - Quiz

Slide 42 - Slide

Slide 43 - Slide

Slide 44 - Slide

Slide 45 - Slide

Slide 46 - Slide

Slide 47 - Slide

More lessons like this

M4S - CV WEBSITE

M4S - CV WEBSITE

M4S - CV WEBSITE

H5 - CV WEBSITE

M4 - CV WEBSITE

WEEK 2 - INFORMATICA

WEEK 3 - INFORMATIE TECHNOLOGIE

Webdesign (6: CSS Grid)