Nehalennia informatica, HTML5 en webdesign v2023 hfdst 2
Vervelend is dat in HTML-kit soms gebruik wordt gemaakt van een sjabloon, waarin niet de juiste doctype declaratie wordt gebruikt.
De juiste declaratie voor HTML5 is <!DOCTYPE html>
Wanneer je <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
ziet staan, verwijst dit naar een HTML4 bestand.
Meteen veranderen, of het sjabloonbestand (template) van HTML-kit aanpassen. Je vindt dit onder de 'preferences'
Een juist opgebouwde HTML5-pagina bestaat uit de volgende elementen.
Merk op dat (bijna alle) elementen een openingstag <tag> en een sluittag </tag> hebben
- De doctype-declaratie <!DOCTYPE html> (geeft de HTML-versie aan).
- Het html-element <html> of <html lang="nl"> volgt dan aan het begin van de pagina. De pagina eindigt altijd met de sluittag </html>
- Binnen het html-element komt het head-element <head> met bijbehorende sluittag </head>
- Binnen het head-element is ruimte voor het title-element <title> en </title>. Hiertussen kun je een titel voor de pagina opgeven.
- Het head-element wordt gevolgd door het body-element <body> met sluittag </body> In de body komt de feitelijke inhoud van de webpagina.
- Tot slot kunnen er binnen het head-element nog meta-tags worden geplaatst.
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Een of andere titel</title>
<meta charset="utf-8">
<meta name="author" content="Uitgeverij Instruct">
<meta name="keywords" content="HTML5, head, body, meta-tags">
<meta name="description" content="Op deze pagina leer je de basis van HTML5!">
</head>
<body>
De tekst van deze website.
</body>
</html>In deze code maken we ook kennis met het begrip attribuut, een stukje extra informatie bij een element.
Let verder ook op het juist nesten van verschillende elementen.
In het voorbeeld van bladzijde 2.27 (experimenteer met de editor) maak je kennis met de kop-elementen
<h1> en </h1> tot en met
<h6> en </h6> en het
paragraaf-element <p> en </p>.
In dit voorbeeld ook het break-element <br>.
Het <br> element heeft geen inhoud, en dus ook geen verplichte sluittag.
In HTML zitten beperkte mogelijkheden voor de opmaak. Straks verzorgen we zoveel mogelijk de opmaak met CSS.
Je hoort de tags
<b> en </b>,
<u> en </u>,
<i> en </i>
<em> en </em>
voor vet, onderstreept, cursief en benadrukt te kennen.
Soms kom je ook wel <strong>, <strike>,
<sub> en <sup> tegen. (bedenk zelf waar
deze opmaakelementen voor dienen.
Er zijn talloze speciale tekens die je niet op het toetsenbord vindt, maar die je toch in een website wilt opnemen. Soms staan ze wel
op het toetsenbord, maar kun je ze niet gebruiken omdat ze al een andere betekenis hebben.
In het boek worden genoemd
"
&
<
>
© en
€.
Maar ook de letters met streepjes, trema's enzovoort (é, ë ,∑ ,♥ ,☀ ) kun je maken met respectievelijk:
é
ë
∑
♥
☀.
Zie voor een overzicht
w3schools
Een van de sterke punten van internetpagina's is het verwijzen (door middel van hyperlinks) naar andere pagina's.
Wanneer deze pagina's op dezelfde website staan, spreken we van relatieve verwijzingen.
Wanneer we verwijzen naar (pagina's op andere) websites, hebben we het over absolute verwijzingen.
Bij relatieve verwijzingen hoef je alleen maar de naam van het bestand (eventueel in een map) als attribuut op te geven.
Dit attribuut is een hypertext reference.
Bij absolute verwijzingen is de complete URL (Uniform Resource Locator), inclusief het protocol, verplicht:
<a href="http://www.google.nl">ga naar Google</a> <a href="mapje/anderepagina.htm">ga naar een lokale pagina</a>In het voorbeeld van bladzijde 2.36 tot slot, kun je het effect zien van de commentaarregels als <!--- commentaar --> Verder wordt in dit hoofdstuk voor dummy teksten nog verwezen naar de lorem Ipsum website.
Maak zelf opgave 2.7.1 (kijk liever niet op