HTML5 - Opmaak en hyperlinks

HTML5 - Opmaak en hyperlinks
1 / 23
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolmavo, havoLeerjaar 4-6

Cette leçon contient 23 diapositives, avec quiz interactifs et diapositives de texte.

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

Éléments de cette leçon

HTML5 - Opmaak en hyperlinks

Slide 1 - Diapositive

Leerdoel
Aan het eind van deze les kan je tekst in HTML5 opmaken, weet je wat een hyperlink is en kan je hyperlinks maken met HTML5.

Slide 2 - Diapositive

Eerst even herhalen

Slide 3 - Diapositive

HTML5 code maak je met
timer
0:30
A
objecten
B
tags
C
elementen

Slide 4 - Quiz

De titel van een website staat tussen de tags
timer
0:30
A
<html> </html>
B
<head> </head>
C
<title></title>
D
<body> </body>

Slide 5 - Quiz

Vanaf deze tags ga je pas echt output zien in de webbrowser.
timer
0:30
A
<html> </html>
B
<head> </head>
C
<p> </p>
D
<body> </body>

Slide 6 - Quiz

Welke tag geeft de grootste koptekst weer?
timer
0:30
A
<h1></h1>
B
<h2></h2>
C
<h3></h3>
D
<h4></h4>

Slide 7 - Quiz

Tekst opmaken
Net als met bijvoorbeeld Microsoft Word kan je met HTML5 tekst opmaken door bijvoorbeeld tekst dikgedrukt, cursief of onderstreept te maken.

Slide 8 - Diapositive

HTML5 code
Uitvoer

Slide 9 - Diapositive

Spaties en tabs
Kijk goed naar de volgende afbeeldingen.

Slide 10 - Diapositive

Wat viel je op?

Slide 11 - Diapositive

Wat viel je net op?
timer
1:00

Slide 12 - Question ouverte

Spaties en tabs
Een webbrowser ziet extra spaties, tab's en tekst op een nieuwe regel laten beginnen als één spatie. Wil je tekst letterlijk laten weergeven zoals je in je broncode heb staan moet je die tekst tussen de tags <pre></pre> zetten.

Slide 13 - Diapositive

HTML5 code
Uitvoer

Slide 14 - Diapositive

Speciale tekens






De volledige lijst met speciale tekens is te vinden op:

Slide 15 - Diapositive

Hyperlinks

Slide 16 - Diapositive

Verschillende soorten hyperlinks





De mailto hyperlink wordt nauwelijks nog gebruikt, omdat het zorgt voor een verhoogde kans op SPAM. Het e-mailadres is namelijk makkelijk uit te broncode te halen!

Slide 17 - Diapositive

HTML5 code
Uitvoer

Slide 18 - Diapositive

HTML5 code
Uitvoer

Slide 19 - Diapositive

Met welke tag wordt de opmaak uit de broncode letterlijk overgenomen door de webbrowser?
timer
0:30
A
<html></html>
B
<pre></pre>
C
&nbsp;
D
&euro;

Slide 20 - Quiz

<a href="pagina2.html">pagina 2</a>
Dit is een
timer
0:30
A
vaste URL
B
relatieve URL
C
Mailto URL

Slide 21 - Quiz

Waarom wordt een Mailto URL nauwelijks meer gebruikt?
timer
1:00

Slide 22 - Question ouverte

Opdracht
Maak een webpagina aan en sla deze op onder de naam pagina1.html. Verwijs in de HTML5 code van pagina 1 naar pagina2.html met een relatieve URL. Maak vervolgens een tweede webpagina aan, sla deze op onder de naam pagina2.html en plaats hier wat tekst op. Open pagina1.html in een webbrowser en kijk of je pagina 2 kan openen.

Slide 23 - Diapositive