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

• Informatica
• WO
• Studiejaar 4,5

                      HTML & CSS

Fundament

Kerndomein A

A2. HTML & CSS

Hoofdstuk 2.4 tmt 3.2

https://fundament-online.nl/leeromgeving/hoofdstuk.php?id=10485

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

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"

Schrijf de HTML
voor deze pagina:

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?

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)

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:

Opdracht #1

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

Welke code geeft dit resultaat?

1. <u></u><b>abc</b>
2. <u>abc</b>
3. <h1><u>abc</u></h1>
4. b abc /b

Welke code geeft dit resultaat?

1. <i></i><b>def</b>
2. <b><i>def</i></b>
3. <u><b>def</b></u>
4. <h1>def</h1>

Hyperlink 1/5

Een hyperlink heeft meer nodig dan alleen de tag;

ook moet het doel worden aangegeven: namelijk waar de link naartoe verwijst!

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)

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"

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?

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

Wat is deze link?

<a href="abc.jpg">link</a>

1. relatief
2. absoluut
3. ongeldig
4. ¯\_(ツ)_/¯

Wat is deze link?

<a href="/img/abc.jpg">link</a>

1. relatief
2. absoluut
3. ongeldig
4. ◝(ᵔᵕᵔ)◜

Wat is deze link?

<a href="\img\abc.jpg">link</a>

1. relatief
2. absoluut
3. ongeldig
4. (⊙ _ ⊙ )

Wat is deze link?

<a href="https://www.abc/abc.jpg">link</a>

1. relatief
2. absoluut
3. ongeldig
4. (づ｡◕‿‿◕｡)づ

Wat is deze link?

<a href="https://www.abc.nl/img/abc.jpg">link</a>

1. relatief
2. absoluut
3. ongeldig
4. ε(´｡•᎑•`)っ 💕

Wat is deze link?

<a href="https://img/abc.jpg">link</a>

1. relatief
2. absoluut
3. ongeldig
4. (˵ •̀ ᴗ - ˵ ) ✧

Nu volgen een aantal RODE meerkeuze vragen

NIET overleggen dus!

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

Wat is deze link?

<a href="http://www.abc.nl/img/abc.jpg">link</a>

1. relatief
2. absoluut
3. ongeldig
4. ʕ •ᴥ•ʔ

Wat is deze link?

<a href="/img/abc.jpg">link</a>

1. relatief
2. absoluut
3. ongeldig
4. (╯°Д°）╯︵ /(.□ . \)

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

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

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":

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

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

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.

Exit ticket

https://forms.gle/7J97NiRs9nqWjk5V6