HTML & CSS: Een webpagina maken

Domein A2: HTML & CSS
Een webpagina maken

1 / 24

Slide 1: Slide

InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

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

Lesson duration is: 45 min

Items in this lesson

Domein A2: HTML & CSS
Een webpagina maken

Slide 1 - Slide

Terugblik opdracht 2

Ga naar codepen.io en maak een account aan (dit kan met Google)
Gebruik de HTML-editor voor dit eerste project
Maak een website met een welkomstekst en hieronder een plaatje
Extra uitdaging: Probeer uit te vinden hoe je een stuk tekst of het plaatje kunt laten linken naar een andere website.

Slide 2 - Slide

codepen.io

Slide 3 - Link

Leerdoelen

Na deze les kun je vertellen

Hoe koppen werken
Hoe je tekst kunt opmaken
Hoe je verschillende typen lijsten maakt
Hoe je kunt linken naar andere websites

Na deze les kun je

Zelf een website maken bestaande uit bovenstaande elementen

Slide 4 - Slide

Slide 5 - Video

Koppen weergeven

Slide 6 - Slide

Tekst opmaken (koppen)

Gebruik koppen en subkoppen om een titel of een subtitel aan te geven.

In totaal zijn er zes niveaus van
(sub)koppen. De webbrowser maakt
de tekstgrootte van deze koppen
automatisch steeds kleiner.

Slide 7 - Slide

Welk element maakt standaard de kleinste tekstgrootte?

<h1>

<head>

<h6>

<h8>

Slide 8 - Quiz

Slide 9 - Video

Eenvoudige opmaak

Slide 10 - Slide

Koppel elk element aan de juiste uitvoer

Vet

Vet en belangrijk

Cursief

Cursief en belangrijk

<b>Hello</b>

<i>Hello</i>

<strong>Hello</strong>

<em>Hello</em>

Slide 11 - Drag question

Slide 12 - Video

Lijsten

Drie soorten lijsten

Ongeordende lijst (met ●)
Geordende lijst (nummers)

Slide 13 - Slide

Ongeordende lijst (<ul>)

Alles wat tussen <ul> en </ul> staat hoort bij de lijst
Punten aangeven met <li> </li>
ul - unordered list / li - list item

Slide 14 - Slide

Geordende lijst (<ol>)

Alles wat tussen <ol> en </ol> staat hoort bij de lijst
Punten aangeven met <li> </li>
ol - ordered list / li - list item

Slide 15 - Slide

Bij welk type lijsten kun je Romeinse cijfers als markeringsteken gebruiken?

Ordered lists (<ol>)

Unordered lists (<ul>)

Beide

Geen van beide

Slide 16 - Quiz

Slide 17 - Video

Hyperlinks

Hyperlinks maak je met het a-element

Slide 18 - Slide

URL's

Er zijn meerdere soorten URL’s

Slide 19 - Slide

URL's (2)

Vaste URL

Vergeet https:// niet

Relatieve URL

Stel je bent op: www.mijnsite.nl
De URL wordt dan:
www.mijnsite.nl/contact.html

Slide 20 - Slide

Welke HTML-elementen kun je als link gebruiken?

Tekst

Plaatjes

Button

Elk element

Slide 21 - Quiz

www.101computing.net

Slide 22 - Link

Opdracht (thuis afmaken)

Help Asya met het voltooien van haar huiswerkonderzoek over regenbogen op: https://www.101computing.net/the-colours-of-the-rainbow-html-task/

De opdracht bestaat uit 6 taken, voltooi deze alle 6.

Tip 1: Je vindt de link naar deze opdracht ook in Google Classroom
Tip 2: Elk taak heeft onderin een video-link die laat zien hoe je de taak uit kunt voeren.

Tip 3: FORK de pen voordat je begint! Bewaar je werk met SAVE.

Slide 23 - Slide

Kun je een website maken bestaande uit koppen, lijsten en links?

😒🙁😐🙂😃

Slide 24 - Poll

HTML & CSS: Een webpagina maken

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Link

Slide 4 - Slide

Slide 5 - Video

Slide 6 - Slide

Slide 7 - Slide

Slide 8 - Quiz

Slide 9 - Video

Slide 10 - Slide

Slide 11 - Drag question

Slide 12 - Video

Slide 13 - Slide

Slide 14 - Slide

Slide 15 - Slide

Slide 16 - Quiz

Slide 17 - Video

Slide 18 - Slide

Slide 19 - Slide

Slide 20 - Slide

Slide 21 - Quiz

Slide 22 - Link

Slide 23 - Slide

Slide 24 - Poll

More lessons like this

12 - CSS - lijsten

Les2 - HTML - Lijsten & Structuren

3 HTML: Lijsten

Webdesign - Les 2 (23/24): Links

Les2 - HTML - Lijsten & Structuren

Les2 - HTML - Lijsten & Structuren

HTML - Lijsten & Structuren

Webdesign - Les 2 (22/23)