HTML & CSS: Een webpagina maken

Domein A2: HTML & CSS
Een webpagina maken

1 / 24

Slide 1: Tekstslide

InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

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

Lesduur is: 45 min

Onderdelen in deze les

Domein A2: HTML & CSS
Een webpagina maken

Slide 1 - Tekstslide

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

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

Slide 5 - Video

Koppen weergeven

Slide 6 - Tekstslide

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

Welk element maakt standaard de kleinste tekstgrootte?

<h1>

<head>

<h6>

<h8>

Slide 8 - Quizvraag

Slide 9 - Video

Eenvoudige opmaak

Slide 10 - Tekstslide

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

Slide 12 - Video

Lijsten

Drie soorten lijsten

Ongeordende lijst (met ●)
Geordende lijst (nummers)

Slide 13 - Tekstslide

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

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

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

Ordered lists (<ol>)

Unordered lists (<ul>)

Beide

Geen van beide

Slide 16 - Quizvraag

Slide 17 - Video

Hyperlinks

Hyperlinks maak je met het a-element

Slide 18 - Tekstslide

URL's

Er zijn meerdere soorten URL’s

Slide 19 - Tekstslide

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

Welke HTML-elementen kun je als link gebruiken?

Tekst

Plaatjes

Button

Elk element

Slide 21 - Quizvraag

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

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

😒🙁😐🙂😃

Slide 24 - Poll

HTML & CSS: Een webpagina maken

Onderdelen in deze les

Slide 1 - Tekstslide

Slide 2 - Tekstslide

Slide 3 - Link

Slide 4 - Tekstslide

Slide 5 - Video

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Slide 8 - Quizvraag

Slide 9 - Video

Slide 10 - Tekstslide

Slide 11 - Sleepvraag

Slide 12 - Video

Slide 13 - Tekstslide

Slide 14 - Tekstslide

Slide 15 - Tekstslide

Slide 16 - Quizvraag

Slide 17 - Video

Slide 18 - Tekstslide

Slide 19 - Tekstslide

Slide 20 - Tekstslide

Slide 21 - Quizvraag

Slide 22 - Link

Slide 23 - Tekstslide

Slide 24 - Poll

Meer lessen zoals deze

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)