HTML & CSS 02 - 2.4 tmt 3.2 - Hyperlinks en multimedia

                      HTML & CSS
1 / 31
next
Slide 1: Slide
InformaticaWOStudiejaar 4,5

This lesson contains 31 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 45 min

Items in this lesson

                      HTML & CSS

Slide 1 - Slide

This item has no instructions

Fundament
Kerndomein A

A2. HTML & CSS
Hoofdstuk 2.4 tmt 3.2
https://fundament-online.nl/leeromgeving/hoofdstuk.php?id=10485


Slide 2 - Slide

This item has no instructions

Leerdoelen:
Na deze les kun je:
  1. tekst opmaken in een .html bestand
  2. verschil tussen een absolute en relatieve link uitleggen
  3. een tekst omzetten naar een (hyper)link
  4. een afbeelding omzetten naar een (hyper)link
  5. een afbeelding toevoegen aan je .html bestand
  6. commentaar toevoegen aan je .html bestand






Slide 3 - Slide

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.
Geef de html
voor de woorden:
"hello world"

Slide 4 - Mind map

This item has no instructions

Schrijf de HTML
voor deze pagina:
timer
1:00

Slide 5 - Open question

This item has no instructions

Tekst opmaken met tags 1/3
HTML maakt gebruik van tags voor opmaak èn structuur
Enkele voorbeelden van tags voor opmaak zijn:
  • <b>
  • <u>
  • <i>
  • <h1>
  • <h2>            .... komen die je ergens bekend van voor?

Slide 6 - Slide

This item has no instructions

Tekst opmaken met tags 2/3


  • b  : bold (vet)
  • i   : italic (schuin / cursief)
  • u  : underlined (onderstreept)
  • h1 : Heading 1 (KOPTEKST 1)
  • h2 : Heading 2 (KOPTEKST 2)

Slide 7 - Slide

This item has no instructions

Tekst opmaken met tags 3/3
Tekst opmaken met een paired tag gaat zo: <u>abc</u>

Je kunt tags ook nesten:
<u><i>abc</i></u>
<b><i>def</b></i>

en zelfs op 1 rij:


Slide 8 - Slide

This item has no instructions

Opdracht #1
  1. Maak een nieuw .html bestand
  2. Probeer de opmaak van deze afbeelding na te maken

timer
4:00

Slide 9 - Slide

This item has no instructions


Welke code geeft dit resultaat?
A
<u></u><b>abc</b>
B
<u>abc</b>
C
<h1><u>abc</u></h1>
D
b abc /b

Slide 10 - Quiz

This item has no instructions


Welke code geeft dit resultaat?
A
<i></i><b>def</b>
B
<b><i>def</i></b>
C
<u><b>def</b></u>
D
<h1>def</h1>

Slide 11 - Quiz

This item has no instructions

Hyperlink 1/5
Een hyperlink heeft meer nodig dan alleen de tag;
ook moet het doel worden aangegeven: namelijk waar de link naartoe verwijst!

Slide 12 - Slide

This item has no instructions

Hyperlink 2/5
Dit doen we door een zgn. "href" toe te voegen:
<a href="http://www.stmichaelcollege.nl">link</a>

Dan krijgen we dit:

href is kort voor hypertext reference 
(dus waar de link naar refereert)

Slide 13 - Slide

This item has no instructions

Hyperlink 3/5
Twee soorten hyperlinks 1. absoluut, en 2. relatief

Een absolute link heeft een "hard" pad, b.v.: "https://www.stmichaelcollege.nl" (altijd http of https!)

Een relatieve link heeft een "relatief" pad, b.v.: "subpagina.html" of "/img/afbeelding.jpg"

Slide 14 - Slide

This item has no instructions

Hyperlink 4/5
Soms bevat een pad een subfolder of submap:
"https://www.stmichaelcollege.nl/img/"

"/map/afbeelding.jpg"

relatief wil zeggen dat het doel van de verwijzing relatief is ten opzichte van de bron van de verwijzing
Dat kan handig zijn, maar ook gevaarlijk... waarom?

Slide 15 - Slide

This item has no instructions

Hyperlink 5/5
Een relatieve link is gevaarlijk, omdat als je alleen het bron-bestand van de link verplaatst, de link gelijk ongeldig wordt (tenzij het doel-bestand wordt meeverplaatst)

Een absolute link blijft werken, tenzij het doel-bestand wijzigt van plek

Slide 16 - Slide

This item has no instructions

Wat is deze link?

<a href="abc.jpg">link</a>
A
relatief
B
absoluut
C
ongeldig
D
¯\_(ツ)_/¯

Slide 17 - Quiz

This item has no instructions

Wat is deze link?

<a href="/img/abc.jpg">link</a>
A
relatief
B
absoluut
C
ongeldig
D
◝(ᵔᵕᵔ)◜

Slide 18 - Quiz

This item has no instructions

Wat is deze link?

<a href="\img\abc.jpg">link</a>
A
relatief
B
absoluut
C
ongeldig
D
(⊙ _ ⊙ )

Slide 19 - Quiz

This item has no instructions

Wat is deze link?

<a href="https://www.abc/abc.jpg">link</a>
A
relatief
B
absoluut
C
ongeldig
D
(づ。◕‿‿◕。)づ

Slide 20 - Quiz

This item has no instructions

Wat is deze link?

<a href="https://www.abc.nl/img/abc.jpg">link</a>
A
relatief
B
absoluut
C
ongeldig
D
ε(´。•᎑•`)っ 💕

Slide 21 - Quiz

This item has no instructions

Wat is deze link?

<a href="https://img/abc.jpg">link</a>
A
relatief
B
absoluut
C
ongeldig
D
(˵ •̀ ᴗ - ˵ ) ✧

Slide 22 - Quiz

This item has no instructions

Nu volgen een aantal RODE meerkeuze vragen
NIET overleggen dus!

Let op: je hebt (maar) 20 seconden voor elke vraag

Slide 23 - Slide

This item has no instructions

Wat is deze link?

<a href="http://www.abc.nl/img/abc.jpg">link</a>
A
relatief
B
absoluut
C
ongeldig
D
ʕ •ᴥ•ʔ

Slide 24 - Quiz

This item has no instructions

Wat is deze link?

<a href="/img/abc.jpg">link</a>
A
relatief
B
absoluut
C
ongeldig
D
(╯°Д°)╯︵ /(.□ . \)

Slide 25 - Quiz

This item has no instructions

Afbeeldingen 1/3
Afbeeldingen voeg je toe met de unpaired tag <img>
met daarbij een source (ook wel: bron) voor de afbeelding:
<img src="abc.jpg">
<img src="https://www.stmichaelcollege.nl/smc-logo.png">

Let op: het is hier src (voor source) en niet href!
Ook het pad van een src kan relatief of absoluut zijn

Slide 26 - Slide

This item has no instructions

Afbeeldingen 2/3
Door de <img> te nesten in een <a> kun je een afbeelding omzetten in een hyperlink:
<a href="https://www.google.com"><img src="abc.jpg"></a>

Je kunt de afmetingen aangeven van een afbeelding door width en height als volgt op te nemen in de tag:
<img src="abc.jpg" width="500" height="100">

Slide 27 - Slide

This item has no instructions

Afbeeldingen 3/3
<img src="abc.jpg" width="500" height="100">

Let wel op de verhouding (ook wel: aspect ratio) van de afbeelding, anders kan je afbeelding "vervormen":

Slide 28 - Slide

This item has no instructions

Commentaar
Als je code schrijft (en ook als je een .html bestand maakt) dan is het soms handig als je commentaar toevoegt
Bijvoorbeeld als je wil vastleggen waarom je iets op een bepaalde manier hebt gedaan
Daarvoor gebruiken we commentaar (ook wel comments)
Voor .html is dat de tag <!-- --> 
<!-- dit is onzichtbaar -->

Slide 29 - Slide

This item has no instructions

Leerdoelen
Je kunt:
  • tekst opmaken in een .html bestand
  • verschil tussen een absolute en relatieve link uitleggen
  • een tekst omzetten naar een (hyper)link
  • een afbeelding omzetten naar een (hyper)link
  • een afbeelding toevoegen aan je .html bestand
  • commentaar toevoegen aan je .html bestand

Slide 30 - Slide

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

Slide 31 - Slide

This item has no instructions