HTML5 en Wedesign
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.
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.
Niet in het boek vermeld, maar het is ook mogelijk om naar bepaalde plaatsen (anchor = anker) op dezelfde
pagina te springen. Dat kan handig zijn als een pagina erg lang is.
Zo verwijst deze link naar het begin van deze zelfde pagina.
We kijken nog een keer naar een compleet html-element, in dit geval een hyperlink:
<a href="pagina.htm">ga naar pagina</a>Hierin onderscheiden we de begintag, de inhoud en een eindtag.