HTML & CSS: Meer elementen, meer lol!

• Informatica
• Middelbare school
• havo, vwo
• Leerjaar 4

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

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/

codepen.io

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

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

Een afbeelding als hyperlink

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

Wat kun je bij een afbeelding doen met het style-attribuut?

1. De breedte en hoogte van de afbeelding instellen
2. De afbeelding links of rechts positioneren (laten 'floaten')
3. Een achtergrondplaatje voor een element instellen
4. Al deze dingen

Tabellen

Voor de rijen en kolommen heb je verschillende tags nodig

Tabellen

Tabellen

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

Koppel elk table-element aan de juiste naam

table
data

cell

table
header

cell

table

table

row

<table>

<th>

<tr>

<td>

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!

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

Commentaar

Begint met <!-- en eindigt met -->

• Niet zichtbaar op je website
• Om aantekeningen te maken
  
• Of om code snel aan/uit te zetten

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)

Kun je een website maken bestaande uit koppen, lijsten, links, afbeeldingen en youtube- filmpjes?

😒🙁😐🙂😃