HTML & CSS: Meer elementen, meer lol!

Domein A2: HTML & CSS
Meer elementen, meer lol!
1 / 21
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

In deze les zitten 21 slides, met interactieve quizzen, tekstslides en 5 videos.

time-iconLesduur is: 45 min

Onderdelen in deze les

Domein A2: HTML & CSS
Meer elementen, meer lol!

Slide 1 - Tekstslide

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

Slide 2 - Tekstslide

Slide 3 - Link

Leerdoelen
Na deze les kun je vertellen
  • Hoe je een image aan je website kunt toevoegen
  • Hoe je een tabel maakt
  • Hoe je in HTML een iFrame maakt
  • Waar een HTML head voor dient
  • Hoe je commentaar toevoegt aan je code

Na deze les kun je 
  • Zelf een website maken bestaande uit een groot aantal HTML-elementen

Slide 4 - Tekstslide

Slide 5 - Video

img-element, attributen zijn:

  • src: de URL van je afbeelding
  • alt: de (alternatieve) tekst 
  • title: de tooltip 
  • heigth & width: hoogte/ breedte
  • style: extra styling (opmaak)

 

Afbeeldingen

Slide 6 - Tekstslide

Een afbeelding als hyperlink
  • De afbeelding (img) wordt genest in de hyperlink (a)
  • Dit is gebruikelijk bij bijv. logo's

Slide 7 - Tekstslide

Wat kun je bij een afbeelding doen met het style-attribuut?
A
De breedte en hoogte van de afbeelding instellen
B
De afbeelding links of rechts positioneren (laten 'floaten')
C
Een achtergrondplaatje voor een element instellen
D
Al deze dingen

Slide 8 - Quizvraag

Slide 9 - Video

Tabellen
Voor de rijen en kolommen heb je verschillende tags nodig

Slide 10 - Tekstslide

Tabellen

Slide 11 - Tekstslide

Tabellen
Een tabel heeft van zichzelf geen rand, die moet je opgeven

Slide 12 - Tekstslide

Koppel elk table-element aan de juiste naam
table
data
cell
table
header
cell
table
table
row
<table>
<th>
<tr>
<td>

Slide 13 - Sleepvraag

Slide 14 - Video

Gebruik een iFrame om een multimediafragment over te nemen van een andere website

  • src: de URL van het fragment
  • title: de tooltip 
  • heigth & width: hoogte/ breedte
  • frameborder: border aan of uit
  • style: extra styling (opmaak)

 

Embedden
Tip: Gebruik de knop Delen en dan de optie Insluiten of Embed om code te genereren waarmee je bijv. een youtube-video kunt embedden!

Slide 15 - Tekstslide

Slide 16 - Video

Koppel elk 'head' element aan de juiste betekenis
Koppelt een simpele stylesheet
definieert een titel in de browser
werkbalk
specificeer instellingen (bijv. tekenset, pagina- beschrijving)
Koppelt css- en javascript-bestanden
title
link
meta
style

Slide 17 - Sleepvraag

Slide 18 - Video

Commentaar
Begint met <!-- en eindigt met -->
  • Niet zichtbaar op je website
  • Om aantekeningen te maken
  • Of om code snel aan/uit te zetten

Slide 19 - Tekstslide

Opdracht (thuis afmaken)
Voeg een aantal nieuwe elementen toe aan de rainbow-website:
  • Zet de lijst met kleuren om in een tabel van 4 rijen en 2 kolommen 
  • Voeg een plaatje van een regenboog toe met een link naar de wikipedia-pagina over regenbogen
  • Voeg een youtube-filmpje toe over regenbogen
  • Voeg commentaar toe tussen de verschillende secties 

Klaar? Lever je website in via Google Classroom (met SHARE en COPY LINK)

Slide 20 - Tekstslide

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

Slide 21 - Poll