‹Revenir à la recherche

HTML & CSS: Een webpagina maken

Domein A2: HTML & CSS
Een webpagina maken
1 / 24
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

Cette leçon contient 24 diapositives, avec quiz interactifs, diapositives de texte et 4 vidéos.

time-iconLa durée de la leçon est: 45 min

Éléments de cette leçon

Domein A2: HTML & CSS
Een webpagina maken

Slide 1 - Diapositive

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

Slide 2 - Diapositive

codepen.io

Slide 3 - Lien

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

Slide 5 - Vidéo

Koppen weergeven

Slide 6 - Diapositive

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

Welk element maakt standaard de kleinste tekstgrootte?
A
<h1>
B
<head>
C
<h6>
D
<h8>

Slide 8 - Quiz

Slide 9 - Vidéo

Eenvoudige opmaak

Slide 10 - Diapositive

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 - Question de remorquage

Slide 12 - Vidéo

Lijsten
Drie soorten lijsten
  • Ongeordende lijst (met ●)
  • Geordende lijst (nummers)



Slide 13 - Diapositive

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

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

Bij welk type lijsten kun je Romeinse cijfers als markeringsteken gebruiken?
A
Ordered lists (<ol>)
B
Unordered lists (<ul>)
C
Beide
D
Geen van beide

Slide 16 - Quiz

Slide 17 - Vidéo

Hyperlinks
  • Hyperlinks maak je met het a-element




Slide 18 - Diapositive

URL's
  • Er zijn meerdere soorten URL’s




Slide 19 - Diapositive

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

Welke HTML-elementen kun je als link gebruiken?
A
Tekst
B
Plaatjes
C
Button
D
Elk element

Slide 21 - Quiz

www.101computing.net

Slide 22 - Lien

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

Kun je een website maken bestaande uit koppen, lijsten en links?
😒🙁😐🙂😃

Slide 24 - Sondage

Plus de leçons comme celle-ci

12 - CSS - lijsten

- Leçon avec 11 diapositives
ICTMBOStudiejaar 1,2

Les2 - HTML - Lijsten & Structuren

- Leçon avec 18 diapositives
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

3 HTML: Lijsten

- Leçon avec 10 diapositives

Webdesign - Les 2 (23/24): Links

- Leçon avec 25 diapositives
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

Les2 - HTML - Lijsten & Structuren

- Leçon avec 14 diapositives
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

Les2 - HTML - Lijsten & Structuren

- Leçon avec 14 diapositives
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

HTML - Lijsten & Structuren

- Leçon avec 12 diapositives
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

Webdesign - Les 2 (22/23)

- Leçon avec 30 diapositives
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4