Indeling html document
Documenttype
Op de eerste regel van een html document dient vermeld te staan welke html codering er gebruikt wordt. Het kan zonder maar de browser schakelt dan naar de Quirks mode, die niet het maximale uit de pagina haalt.
HTML codering
HTML (HyperText Markup Language) is een opmaaktaal voor de specificatie van documenten, voornamelijk bedoeld voor het World Wide Web. Een markuptaal (opmaaktaal), is een computertaal om tekstdocumenten te voorzien van aanwijzingen ten behoeve van de softwarematige verwerking. De aanwijzingen worden daarbij in de tekst ingevoegd.
De laatste versie was tot kort geleden 4.01 en is sinds 2015 opgevolgd door 5.0.
Naast de versie informatie wordt ook vermeld of een overgangs mode (Transitional) of strikte mode gebruikt dient te worden.
XHTML codering
XHTML (Extensible Hypertext Markup Language) is een opmaaktaal voor vooral websites, die de functionaliteit heeft van HTML, maar een striktere syntaxis. Dit omdat HTML gebaseerd is op het flexibele SGML (Standard Generalized Markup Language), waar XHTML gebaseerd is op XML (Extensible Markup Language), een striktere subset van SGML. Door de striktere syntaxis van XML-documenten kunnen deze makkelijker verwerkt worden door een XML-parser, terwijl SGML-documenten een veel complexere parser nodig hebben. XHTML 1.0 is een W3C-standaard geworden op 26 januari 2000.
De meest belangrijke verschillen t.o.v. HTML:
- XHTML elementen moeten correct genest worden.
- XHTML elementen moeten altijd gesloten worden.
- XHTML elementen worden in kleine letters geschreven.
- XHTML attribuuts moeten tussen dubbele aanhalingstekens staan.
- XHTML documents moeten een root element hebben.
Bovenstaande eisen zijn ook in HTML te gebruiken en wordt zelfs aanbevolen.
Declaraties
| HTML 4.01 Transitional | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|---|---|
| HTML 4.01 Strict | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| XHTML 1.0 Transitional | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| XHTML 1.0 Strict | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| XHTML 1.1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
| HTML 5.0 | <!DOCTYPE html> |
Indeling HTML document
Zoals eerder vermeld wordt op de eerste regel de doctype vermeld.
HTML tag
Na de doctype komt de html code in het document. De code wordt geplaatst tussen de tags <html> en </html>. De tag <html> komt op regel 2 en de tag </html> op de laatste regel en hierna komt niets meer.
Het document heeft nu de volgende structuur:
<!DOCTYPE ..........
<html>
</html>
We gebruiken in deze cursus XHTML zodoende worden de eerste drie regels:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
De eerste regel wordt alleen bij xhtml documenten gebruikt omdat xhtml een vorm van xml is.
De attribuut xmlns="http://www.w3.org/1999/xhtml" is in xhtml documenten verplicht. Xmlns staat voor xml namespace.
Met de attribuut xml:lang="nl" vertellen we de browser dat de nederlands taal voor het hele document geldt. Voor engels gebruiken we xml:lang="en".
Taalcodes
| Taal | Code |
|---|---|
| Deens | da |
| Duits | de |
| Engels | en |
| Frans | fr |
| Fries | fy |
| Italiaans | it |
| Latijn | la |
| Nederlands | nl |
| Noors | no |
| Pools | pl |
| Portugees | pt |
| Spaans | es |
| Turks | tr |
| Zweeds | sv |
Het html document is opgedeeld in twee delen n.l. de header en de body.
Header
Een header staat aan het begin van een computerbestand en beschrijft de eigenschappen van dat bestand. Voorbeelden zijn de lengte, format, encodering, bij geluidsbestanden ook de bitrate en bemonsteringsfrequentie. Soms wordt ook de versie van het bestandstype vermeld.
Ook websites kunnen gebruikmaken van een header. Deze header bevat belangrijke informatie (javascripts, CSS-opmaak, titel, metagegevens) die over de hele webpagina gebruikt zal worden.
Voor het betrouwbaar werken van een webpagina is een header noodzakelijk.
Header tag
De header informatie wordt geplaatst tussen de <head> en </head> tags.
De <head> tag komt op regel vier en de </head> na de laatst header informatie.
De eerste vier regels zijn er uit als volgt:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
<head>
Meta tags
Content type
De content type vertelt iets over het soort inhoud en de karakterset in de body.
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> bij html en xhtml 1.0 of
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" /> bij xhtml 1.1.
I.p.v. charset=iso-8859-1 kunt u ook charset=utf-8 gebruiken als karakterset. Voor ander taalgebieden worden andere karaktersets gebruikt, zoals oost-europees, arabisch, hebreeuws, japans.
Overige types
<meta name="description" content="Beschrijving van het artikel" />
<meta name="keywords" content="keyword1, keyword2, ......" />
<meta name="author" content="Uw naam" />
Het gebruik van de description en keywords metatag wordt aangeraden.
Description wordt door zoekmachines gebruikt om een beschrijving in de zoek resultaten te plaatsen.
Titel
Iedere pagina dient een titel te hebben. Deze wordt onder andere door zoekmachines gebruikt. Deze wordt als volgt in de header geplaatst:
<title>Indeling html document</title>
Link tag
Met de linktag worden aanvullende bestanden aangekoppeld zoals stylesheets en icoontjes.
<link rel="stylesheet" href="/styles/super.css" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Stylesheet
Stylesheets worden gebruikt voor de opmaak van een pagina. In het begin werd de opmaak met bijv de <font> tag gedaan. Hiermee werd dan een lettertype of lettergrootte ingesteld, maar ook de kleur van de letters. Dit is sinds HTML 4.0 niet meer toegestaan en dient in de stylesheet te worden gedaan.
Met de regel <link rel="stylesheet" href="/styles/super.css" type="text/css" /> wordt de browser verteld waar hij de stylesheet kan vinden. Stylesheets worden normaal voor de hele site gemaakt en hiermee kun je snel een site aanpassen.
Shortcut icon
De shortcut icon is een icoontje dat als logo fungeert van de site in klein formaat. Deze worden bij Internet explorer en Firefox in de favorietenlijst en op de URL balk gebruikt.
U voegt deze toe met de regel <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />.
De favicon wordt voor de URL getoond.
Overige tags
Naast het bovenstaande is het ook mogelijk om in de header nog extra style informatie toe te voegen tussen de <style> en </style> tags om alleen deze pagina aan te passen.
Ook java scripts worden in de header toegevoegd en de beste methode is om het script in een bestand te plaatsen en dit betand aan te roepen, bijvoorbeeld:
<script src="/scripts/mijn_javascript.js" type="text/javascript"></script>
Overzicht
We hebben nu de onderstaande code gemaakt:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta name="description" content="Beschrijving webpagina" />
<meta name="keywords" content="keyword1, keyword2, ......" />
<meta name="author" content="Uw naam" />
<title>Indeling html document</title>
<link rel="stylesheet" href="/styles/super.css" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>
Body
In de body plaatsen we de feitelijke data, de teksten, afbeeldingen en filmpjes.
We hebben nu de onderstaande struktuur:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
<head>
......
</head>
<body>
Body tag
De inhoud van de webpagina wordt geplaats tussen de <body> en </body> tags.
De <body> tag plaatsen onder de regel met </head> en </body> tag plaatsen we op de een na laatste regel van het document. Om de leesbaarheid van het broncode te verbeteren houd ik altijd tussen header en body een lege regel.
We sluiten het document na het plaatsen van de inhoud op de laatste twee regels met de tags </body> en </html>.
We hebben nu de onderstaande struktuur:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
<head>
.......
</head>
<body>
</body>
</html>
Inhoud
Als we de pagina nu op de webserver plaatsen in de siteroot en we typen op de URL regel van de browser het webadres in dan krijgen we een lege pagina te zien.
Omdat we nu klaar zijn, kunnen we van dit bestand een template maken (leeg.html) en deze als startpunt gebruiken voor nieuwe pagina's.
Naamgeving
De standaard naam van pagina is index.html. De homepage dient dan ook deze naam te hebben. Typt u alleen de domein naam van de site in bijv www.sitenaam.nl dan stuurt de server u www.sitenaam.nl/index.html retour.
Overige pagina's kunnen ieder naam krijgen die je wilt mits er GEEN spaties in de bestandsnamen worden gebruikt.
Voor experimenten kan je een bestand met de naam test.html maken. Om deze te tonen typt u in www.sitenaam.nl/test.html. Het voordeel is dat je iets kunt uitprobeen voor je het op het web loslaat.
Mapnamen
Houd deze zo kort magelijk en gebruik alleen kleine letters. Maakt u een map (directory) aan voor bijv. kipgerechten in uw kookboek geef de map dan de naam kip. Op de URL-balk staat dan http://www.sitenaam.nl/kookboek/kip/index.html.
In de titel plaats u dan Kipgerechten, enz.