HTML5 - Opmaak en hyperlinks

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

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

time-iconLesson duration is: 50 min

Items in this lesson

HTML5 - Opmaak en hyperlinks

Slide 1 - Slide

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

Eerst even herhalen

Slide 3 - Slide

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

HTML5 code
Uitvoer

Slide 9 - Slide

Spaties en tabs
Kijk goed naar de volgende afbeeldingen.

Slide 10 - Slide

Wat viel je op?

Slide 11 - Slide

Wat viel je net op?
timer
1:00

Slide 12 - Open question

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

HTML5 code
Uitvoer

Slide 14 - Slide

Speciale tekens






De volledige lijst met speciale tekens is te vinden op:

Slide 15 - Slide

Hyperlinks

Slide 16 - Slide

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

HTML5 code
Uitvoer

Slide 18 - Slide

HTML5 code
Uitvoer

Slide 19 - Slide

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

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