‹Return to search

M4 - CV WEBSITE

Mavo 4s
1 / 52
next
Slide 1: Slide
InformaticaMiddelbare schoolhavoLeerjaar 4

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

time-iconLesson duration is: 90 min

Items in this lesson

Mavo 4s

Slide 1 - Slide

Startklaar zitten.
STARTKLAAR!
Tellie in zakkie

Slide 2 - Slide

Startklaar zitten.
Wat is de basisstructuur van een HTML-document?
A
<body>
B
<head>
C
<!DOCTYPE html>
D
<html>

Slide 3 - Quiz

This item has no instructions

Voorkennis activeren

Slide 4 - Slide

This item has no instructions

Hoe maak je een hyperlink in HTML?
A
<link url='url'>link</link>
B
<a href='url'>link</a>
C
<a link='url'>link</a>
D
<href='url'>link</href>

Slide 5 - Quiz

This item has no instructions

Welke tag gebruik je voor een paragraaf?
A
<para>
B
<paragraph>
C
<p>
D
<text>

Slide 6 - Quiz

This item has no instructions

Welke taal wordt gebruikt voor interactiviteit?
A
CSS
B
HTML
C
SQL
D
JavaScript

Slide 7 - Quiz

This item has no instructions

Wat is een kenmerk van responsief ontwerp?
A
Aanpassen aan verschillende schermformaten
B
Vaste layout voor desktop
C
Gebruik van alleen afbeeldingen
D
Geen media queries gebruiken

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

This item has no instructions

Wat is de functie van CSS?
A
Structureren van de webpagina
B
Styling van HTML-elementen
C
Toevoegen van interactiviteit
D
Programmeren van webapplicaties

Slide 10 - Quiz

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
1
Websiteplanning en wireframing
15 punten
2
HTML-structuur opzetten
15 punten
3 
Styling met CSS en UX-principes
25 punten
4
Content toevoegen en verbeteren
15 punten
5
Contactformulier en oplevering
25 punten
6
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
Ja
Deels
Nee

Slide 14 - Poll

This item has no instructions

Waarom een wireframe?

Slide 15 - Open question

This item has no instructions

Mirco.com
  1. Je kan het op papier maken 
  2. 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?
A
Een type computerhardware
B
Een sociaal netwerk
C
Software om webpagina's te bekijken
D
Een videospeler

Slide 21 - Quiz

This item has no instructions

Wat is een veelgebruikte programmeertaal voor websites?
A
CSS
B
HTML
C
Python
D
Java

Slide 22 - Quiz

This item has no instructions

Website C.V. Opdracht
Week
Opdracht
Weging
1
Websiteplanning en wireframing
15 punten
2
HTML-structuur opzetten
15 punten
3 
Styling met CSS en UX-principes
25 punten
4
Content toevoegen en verbeteren
15 punten
5
Contactformulier en oplevering
25 punten
6
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.
ENZ. 
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 
<html> </html>
<head> </head>

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

schrijf hier de basisstructuur van HTML op

Slide 39 - Open question

This item has no instructions

Wat is een browser?
A
Een zoekmachine voor informatie.
B
Een type internetverbinding.
C
Een programma om webpagina's te bekijken.
D
Een besturingssysteem voor computers.

Slide 40 - Quiz

This item has no instructions

Welke is een HTML tag voor links?
A
<url>
B
<link>
C
<a>
D
<href>

Slide 41 - Quiz

This item has no instructions

Welke taal is geen HTML?
A
<span>
B
SQL
C
<ul>
D
Java

Slide 42 - Quiz

This item has no instructions

Website C.V. Opdracht
Week
Opdracht
Weging
1
Websiteplanning en wireframing
15 punten
2
HTML-structuur opzetten
15 punten
3 
Styling met CSS en UX-principes
25 punten
4
Content toevoegen en verbeteren
15 punten
5
Contactformulier en oplevering
25 punten
6
marge

Slide 43 - 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. Aan het einde van de les heeft de leerling minimaal de navigatiemenu gebouwd met HTML en CSS.

Slide 44 - Slide

This item has no instructions

C.V. website
HTML tags zijn over het algemeen semantisch

- rood en rond
- rode bal


Zoek uit welke html tags je nodig hebt 
om een navigatie menu te maken


timer
2:00

Slide 45 - Slide

This item has no instructions

Welke HTML tags voor
Navigatiemenu

Slide 46 - Mind map

This item has no instructions

C.V. website - Doe mee met de docent
- Map C.V. Website maken op jouw bureaublad
- Ga naar jouw browser en typ in vscode.dev
- Op de mag C.V. website
- Volg de docent met HTML code

Slide 47 - Slide

This item has no instructions

HTML zonder CSS
 
Dit is alleen HTML code
Dit is HTML met CSS

Slide 48 - Slide

This item has no instructions

CSS code
Zoek de verschillen voor het teken {  en schrijf jouw bevindingen op

Slide 49 - Slide

This item has no instructions

Welke verschil is jouw opgevallen?

Slide 50 - Open question

This item has no instructions

CSS toevoegen - Doe mee met de docent
- we gebruiken de tag <style>  ... css code hier </style> in de sectie <head>
- luister eerst en kijk mee, op aanwijzing van de docent ga je aan de slag

Slide 51 - Slide

This item has no instructions

Afsluiting
Klassikaal: Wat hebben wij vandaag gedaan
Vooruit blikken: Wat gaan wij de volgend les doen (verder met de main sectie van jouw website)

In jouw agenda zetten:

Mocht het in de les niet af hebben .... 
vrijdag 23.59 uiterst jouw eerste versie cv website inclusief navigatie (HTML + CSS) inleveren via teams.

Slide 52 - Slide

This item has no instructions

More lessons like this

H5 - CV WEBSITE

- Lesson with 47 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

M4S - CV WEBSITE

- Lesson with 47 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

M4S - CV WEBSITE

- Lesson with 47 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

M4S - CV WEBSITE

- Lesson with 47 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

H5 - CV WEBSITE

- Lesson with 47 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 3 - INFORMATIE TECHNOLOGIE

- Lesson with 30 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 5 - INFORMATIE TECHNOLOGIE

- Lesson with 34 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 2 - INFORMATICA

- Lesson with 31 slides
InformaticaMiddelbare schoolhavoLeerjaar 4