HTML5 - Opmaak en hyperlinks

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

In deze les zitten 23 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 50 min

Onderdelen in deze les

HTML5 - Opmaak en hyperlinks

Slide 1 - Tekstslide

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

Eerst even herhalen

Slide 3 - Tekstslide

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

Slide 4 - Quizvraag

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

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

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

Slide 7 - Quizvraag

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

HTML5 code
Uitvoer

Slide 9 - Tekstslide

Spaties en tabs
Kijk goed naar de volgende afbeeldingen.

Slide 10 - Tekstslide

Wat viel je op?

Slide 11 - Tekstslide

Wat viel je net op?
timer
1:00

Slide 12 - Open vraag

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

HTML5 code
Uitvoer

Slide 14 - Tekstslide

Speciale tekens






De volledige lijst met speciale tekens is te vinden op:

Slide 15 - Tekstslide

Hyperlinks

Slide 16 - Tekstslide

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

HTML5 code
Uitvoer

Slide 18 - Tekstslide

HTML5 code
Uitvoer

Slide 19 - Tekstslide

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

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

Slide 21 - Quizvraag

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

Slide 22 - Open vraag

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