‹Terug naar zoeken

H5 - CV WEBSITE

Havo 5
1 / 47
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolhavoLeerjaar 4

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

time-iconLesduur is: 90 min

Onderdelen in deze les

Havo 5

Slide 1 - Tekstslide

Startklaar zitten.
STARTKLAAR!
Tellie in zakkie

Slide 2 - Tekstslide

Startklaar zitten.
Voorkennis activeren

Slide 3 - Tekstslide

Deze slide heeft geen instructies

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

Slide 4 - Quizvraag

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Slide 6 - Quizvraag

Deze slide heeft geen instructies

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

Slide 7 - Quizvraag

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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 9 - Quizvraag

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Ik weet waarom het handig is een wireframe te gebruiken
Ja
Deels
Nee

Slide 14 - Poll

Deze slide heeft geen instructies

Waarom een wireframe?

Slide 15 - Open vraag

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Inleveren
Eind deze week, week opdracht 1 inleveren via teams

Slide 17 - Tekstslide

Startklaar zitten.
Afsluiten
Samenvatting: klassikaal
Agenda: Inleveren week 1 + vooruit kijken naar opdracht week 2

Slide 18 - Tekstslide

Startklaar zitten.
STARTKLAAR!
Tellie in zakkie

Slide 19 - Tekstslide

Startklaar zitten.
Voorkennis activeren

Slide 20 - Tekstslide

Deze slide heeft geen instructies

Wat is een webbrowser?
A
Een type computerhardware
B
Een sociaal netwerk
C
Software om webpagina's te bekijken
D
Een videospeler

Slide 21 - Quizvraag

Deze slide heeft geen instructies

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

Slide 22 - Quizvraag

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Slide 24 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Slide 26 - Tekstslide

Deze slide heeft geen instructies

HTML - TAGS
HTML BESTAAT UIT TAGS

<HTML>  = OPENING TAG
</HTML> = SLUITING TAG

<HEAD> = OPENING TAG
</HEAD> = SLUITING TAG 

ENZ.
ENZ. 
ENZ.

Slide 27 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

andere informatie en bestanden die html nodig heeft 

Slide 29 - Tekstslide

Deze slide heeft geen instructies

HTML

Slide 30 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

zet jouw antwoorden hier

Slide 32 - Open vraag

Deze slide heeft geen instructies

HTML element
HTML element


Een HTML tag kan 
attributen noemen.
dit zijn eigenschappen 
die de HTML tag kan 
beinvloeden

Slide 33 - Tekstslide

Deze slide heeft geen instructies

Ik vond deze opdracht
Heel makkelijk
Makkeljk
Wel te doen
Moeilijk
Heel moeilijk

Slide 34 - Poll

Deze slide heeft geen instructies

zet jouw code uit het bestand home.html

Slide 35 - Open vraag

Deze slide heeft geen instructies

Afsluiting
Klasikaal

In jouw agenda zetten:

Zondag 23.59 uiterst jouw eerste versie cv website.

Slide 36 - Tekstslide

Deze slide heeft geen instructies

STARTKLAAR!
Tellie in zakkie

Slide 37 - Tekstslide

Startklaar zitten.
Voorkennis activeren

Slide 38 - Tekstslide

Deze slide heeft geen instructies

Wat is een voorbeeld van grote letters?
A
color: red;
B
margin: 10px;
C
font-size: 2em;
D
font-size: 24px;

Slide 39 - Quizvraag

Deze slide heeft geen instructies

Welke is geen CSS code?
A
<script>
B
<html>
C
<body>
D
color: red;

Slide 40 - Quizvraag

Deze slide heeft geen instructies

Welke CSS eigenschap maakt letters groot?
A
letter-spacing
B
text-transform
C
font-size
D
line-height

Slide 41 - Quizvraag

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Head vs Header
Head Basisstructuur HTML
Header

Slide 43 - Tekstslide

Deze slide heeft geen instructies

Header
<header class="header">

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

</header>
Neem dit over

Slide 44 - Tekstslide

Deze slide heeft geen instructies

CSS - selector class  
Classe wat is dat in CSS

.naamclasse {
css code
}

Slide 45 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Meer lessen zoals deze

M4S - CV WEBSITE

- Les met 47 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

M4S - CV WEBSITE

- Les met 47 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

M4S - CV WEBSITE

- Les met 47 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

H5 - CV WEBSITE

- Les met 47 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

M4 - CV WEBSITE

- Les met 52 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 2 - INFORMATICA

- Les met 32 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 3 - INFORMATIE TECHNOLOGIE

- Les met 30 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

Webdesign (6: CSS Grid)

- Les met 15 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5