Rob's web

Indeling html document

Home - Webdesign - 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 2011 opgevolgd door 5.0 welke nog steeds experimenteel is. Het gebruik van de nieuwste versie wordt aanbevolen maar blijf voorlopig nog bij versie 4.01.

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:

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

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

TaalCode
Deensda
Duitsde
Engelsen
Fransfr
Friesfy
Italiaansit
Latijnla
Nederlandsnl
Noorsno
Poolspl
Portugeespt
Spaanses
Turkstr
Zweedssv

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" />.

Favicons
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.