Handleiding HTML - Structuur document

Structuur document
Handleiding HTML	Inhoud Index

In dit onderdeel komen aan de orde Introductie, De head, De body, Elementen, DOCTYPE declaratie, Titel document, Zoekmachines, Document niet in cache, Client Pull, Commentaar, Basisweergave document en Het gebruik van stijlen.

Introductie

Een HTML-document bestaat uit twee delen: de head en de body. De head wordt gedefinieerd met het HEAD element en bevat informatie over het document, de body wordt gedefinieerd met het BODY element en bevat de feitelijk inhoud van het document. Het HTML element markeert het begin en einde van een HTML-document en geeft aan dat het document HTML-code bevat.
Een HTML-document heeft de volgende opbouw:

<HTML> <HEAD> .. informatie over het document .. </HEAD> <BODY> .. inhoud document .. </BODY> </HTML>

Wanneer gebruik gemaakt wordt frames, wordt de body van het document niet gedefinieerd met het BODY element, maar met het FRAMESET element.

Helemaal aan het begin van het document kan een DOCTYPE (document type) declaratie worden opgenomen, waarmee wordt aangegeven welke HTML-versie gebruikt is bij het maken van het document.

De head

In de head van een document wordt informatie opgenomen, die betrekking heeft op het document, maar niet in het documentvenster wordt weergegeven. De informatie kan instructies aan de browser bevatten over hoe het document verwerkt of weergegeven moet worden, of bijvoorbeeld gericht zijn op zoekmachines.

In de head van elk document moet een titel worden vastgelegd met het TITLE element. Deze titel is te zien in de titelbalk van het documentvenster en wordt daarnaast door zoekmachines gebruikt bij de weergave van zoekresultaten.

Een korte beschrijving van het document, sleutelwoorden en andere informatie, welke zoekmachines gebruiken bij de indexering van een document, worden opgenomen met het META element, waaraan de attributen NAME en CONTENT worden toegevoegd. Daarnaast kan ook het LINK element met de attributen REL en HREF een functie hebben in het vastleggen van informatie ten behoeve van zoekmachines.

Informatie, op basis waarvan de browser na een bepaalde tijd het document zonder tussenkomst van de gebruiker ververst of vervangt, wordt opgenomen met het META element waaraan het HTTP-EQUIV attribuut is toegevoegd. Dit automatische verversen of vervangen heet de Client Pull methode.

Informatie betreffende het gebruik van stijlen wordt vastgelegd met de elementen LINK en STYLE. Het LINK element geeft een relatie aan met een extern stijlblad, het STYLE element definieert een stijlblok in het document zelf. De koppeling van stijlen aan HTML wordt beschreven in het onderdeel Style sheets. Voor een algemene introductie in de belangrijkste taal, welke gebruikt wordt bij het definiëren van stijlen zie het onderdeel Cascading Style Sheets.

Een basisadres voor het openen van hyperlinks in het document en een basisframe worden vastgelegd met het BASE element. Een beschrijving is opgenomen in het onderdeel Hyperlinks.

Het SCRIPT element kan worden gebruikt om een script te definiëren, dat automatisch of als resultaat van een actie van de gebruiker wordt uitgevoerd. Een toelichting is opgenomen in het onderdeel Scripts.

De body

In de body van een document wordt de inhoud opgenomen, welke in het documentvenster te zien is. Bij deze inhoud kan het gaan om tekst, maar bijvoorbeeld ook om afbeeldingen.
Er is een groot aantal mogelijkheden beschikbaar voor de wijze waarop de inhoud gestructureerd en gepresenteerd kan worden:

Met de attributen van het BODY element wordt de basisweergave van het document bepaald: de kleur van de achtergrond, de tekst en de hyperlinks en of een achtergrondafbeelding gebruikt moet worden. Voor het BODY element kunnen daarnaast stijlen gedefinieerd worden, welke gelden voor het gehele document.
De elementen voor het Structuren van tekst worden gebruikt voor het indelen van tekst in blokken, al dan niet met een bepaalde opmaak, het afbreken van regels en het maken van koppen en lijnen.
Met de elementen voor Weergave inline tekst kan bepaald worden hoe de tekst op een regel moet worden weergegeven: in welke lettergrootte en -kleur, met welk lettertype en bijvoorbeeld vet, cursief, of met een vaste letterafstand.
In de vorm van Hyperlinks en Image maps wordt een verbinding gelegd naar bijvoorbeeld andere documenten.
De inhoud kan opgenomen worden in Lijsten, Tabellen en Formulieren.
Style sheets kunnen gebruikt worden om de opmaak gedetailleerd vast te leggen.

Elementen

Voor het vastleggen van de structuur van een document en de informatie in de head zijn de volgende elementen beschikbaar:

BODY
HEAD

HTML
LINK

META
SCRIPT

STYLE
TITLE

De elementen en bijbehorende attributen worden beschreven in aparte documenten. Voor elk element en attribuut is aangegeven of het deel uitmaakt van een HTML-specificatie en zo ja welke. Bovendien is aangegeven en of het element of attribuut ondersteund wordt door en zo ja vanaf welke versie van Netscape Navigator, Microsoft Internet Explorer en Opera.

DOCTYPE declaratie

Helemaal aan het begin van een document wordt de DOCTYPE (document type) declaratie opgenomen. Deze is ervoor bedoeld aan te geven aan welke HTML-versie het document voldoet. De DOCTYPE declaratie verwijst naar een document type definition (DTD).

HTML 4.01, de laatste (als revisie van HTML 4.0) vastgestelde HTML-aanbeveling, kent drie verschillende DTD's. Het onderscheid tussen de DTD's zit in de elementen en attributen die ze ondersteunen. De basis DTD is HTML 4.01 Strict. Deze bevat alle elementen en attributen, met uitzondering van die welke het label deprecated (afgekeurd) hebben gekregen en die welke betrekking hebben op frames. Afgekeurd zijn elementen en attributen, die deel uitmaken van HTML 3.2, maar waarvoor er in HTML 4 een alternatief is (via bijvoorbeeld style sheets). Omdat de alternatieven op dit moment slechts door een beperkt aantal browsers ondersteund worden, is het gebruik van de afgekeurde elementen en attributen nog steeds toegestaan. De tweede DTD, HTML 4.01 Transitional, bevat daarom alle elementen uit HTML 4.01 Strict plus de afgekeurde elementen en attributen. In de derde DTD, HTML 4.01 Frameset, zijn tenslotte alle elementen en attributen uit HTML 4.01 Transitional opgenomen, plus die welke betrekking hebben op frames.

De DOCTYPE declaraties voor de DTD's van HTML 4.01 zijn hierna opgenomen. Bij de beschrijving van !DOCTYPE wordt een overzicht gegeven van de DOCTYPE declaraties voor de verschillende HTML-versies.

DOCTYPE declaratie HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

DOCTYPE declaratie HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

DOCTYPE declaratie HTML 4.01 Frameset:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Geen van de bekende browsers maakt gebruik van de DOCTYPE declaratie. Toch wordt het gebruik van één van bovenstaande DOCTYPE declaraties en vooral het voldoen aan de bijbehorende specificatie aanbevolen. Met het voldoen aan een specificatie verklein je de kans dat de browser van een bezoeker de documenten niet correct kan weergeven.

Het opnemen van de DOCTYPE declaratie is van belang als je een document wilt controleren op het gebruik van de juiste HTML-code. De validator weet dan op basis van welke HTML-versie de controle moet plaatsvinden.

Titel document

Met het TITLE element wordt een titel voor het document vastgelegd. Deze titel wordt niet weergegeven in het documentvenster, maar in de titelbalk van het venster. Daarnaast wordt de titel door zoekmachines geplaatst als kopje boven een zoekresultaat en gebruiken browsers hem als iemand de pagina toevoegt aan de bookmarks (bij Netscape Navigator), de favorieten (bij Microsoft Internet Explorer) of de hotlist (bij Opera).
Elk document moet een TITLE element bevatten. Het is verstandig een titel te gebruiken, die duidelijk maakt waar het document over gaat en op basis waarvan bijvoorbeeld gebruikers van een zoekmachine kunnen beslissen, of het bekijken van het document zinvol is.

Het TITLE element wordt bijvoorbeeld als volgt gebruikt:

<HEAD> <TITLE>Handleiding HTML</TITLE> </HEAD>

Zoekmachines

Zoekmachines als Alta Vista, HotBot en de Nederlandse Vindex en Track struinen regelmatig het Internet af, om zoveel mogelijk documenten in hun index op te nemen. Je kunt de wijze van indexeren beïnvloeden, door het META element in de head van je documenten op te nemen. Met het NAME attribuut geef je aan om wat voor soort informatie het gaat en met het LANG attribuut wat de taal ervan is. Het CONTENT attribuut bevat de informatie zelf.

Met de waarde "description" voor het NAME attribuut kun je een korte beschrijving opnemen, welke door (in ieder geval de hiervoor genoemde) zoekmachines in de zoekresultaten wordt weergegeven in plaats van de eerste regels van het document. Door te zorgen voor een goede beschrijving, kun je proberen de gebruikers van de zoekmachine naar jouw site te lokken. Maak niet een te lange beschrijving, want dan loop je kans dat deze halverwege afgekapt wordt. Een aantal karakters van 175-200 wordt wel als maximum genoemd.
Als voorbeeld de beschrijving van deze handleiding:

<META NAME="description" LANG="nl" CONTENT="Een Nederlandse handleiding bij het maken van HTML-pagina's. Met de nieuwste mogelijkheden, een groot aantal voorbeelden en een uitgebreide beschrijving van de HTML elementen en Cascading Style Sheets.">

Met de waarde "keywords" voor het NAME attribuut kun je een aantal sleutelwoorden opnemen, welke door (in ieder geval de hiervoor genoemde) zoekmachines toegevoegd worden aan de trefwoorden die in het document gevonden zijn.
Als voorbeeld de trefwoorden van deze handleiding:

<META NAME="keywords" LANG="nl" CONTENT="HTML, HTML4, HTML 4.0, CSS, Handleiding HTML, handleiding, reference, tutorial, guide, HTML authoring, hypertext, markup, elementen, attributen, webpagina, homepage, style sheets, stylesheets, stijlblad, stijleigenschappen, stijl, hyperlinks, frames, formulieren, tabellen, lijsten, client-side, image maps, client pull, geluid, scripts, validatie, zoekmachine">

Met de waarde "author" voor het NAME attribuut kun je aangeven wie de auteur is:

<META NAME="author" LANG="nl" CONTENT="Hans de Jong">

Incidenteel wordt mogelijk ook de waarde "copyright" voor het NAME attribuut ondersteund. Je kunt hiermee aangeven bij wie het copyright berust:

Soms wil je dat een zoekmachine (robot) een document juist niet indexeert, in andere gevallen wil je de zoekmachine er juist toe uitnodigen. Je gebruikt in beide gevallen het NAME attribuut gebruiken met de waard "robots". Voor het CONTENT attribuut gebruik je de waarden "noindex" (het document moet niet in de index opgenomen worden) en/of "nofollow" (de links in het document moeten niet gevolgd worden) als je het indexeren wilt beperken. Als je de zoekmachine wilt aanmoedigen tot indexeren gebruik je de waarden "all" (het document moet wel in de index opgenomen worden) en/of "follow" (de links in het document moeten wel gevolgd worden). Een voorbeeld van het voorkomen van indexeren is:

<META NAME="robots" CONTENT="noindex, nofollow">

Het LINK element kun je gebruiken om aan de zoekmachines te vertellen wat het eerste document is van een verzameling documenten. Het REL attribuut specificeert dat het gaat om een begindocument, met het HREF attribuut leg je vast waar dat gevonden kan worden. Je plaatst het LINK element in de head van een document. Als voorbeeld de verwijzing naar de beginpagina van de Handleiding HTML:

<LINK REL="start" HREF="http://www.dsdelft.nl/html/index.html">

Zoals bij de toelichting op het gebruik van het TITLE element al is aangegeven, plaatsen zoekmachines de inhoud van dit element als kopje boven het zoekresultaat. Neem daarom altijd het TITLE element op in de head.

Document niet in cache

Door de meeste browsers worden geopende documenten en daarin opgenomen andere bestanden vaak gedurende een bepaalde tijd en tot een bepaalde totale omvang opgeslagen in een directory op de harddisk: de cache. Wanneer hetzelfde document opnieuw geopend moet worden, zal de browser (afhankelijk van de instellingen) eerst controleren of het document misschien gewijzigd is en als dat niet het geval is, het uit de cache halen. Dat zal vaak aanzienlijk sneller zijn dan het opnieuw binnenhalen van het document vanaf het Internet. Soms heb je redenen om te willen voorkomen dat de browser het document in de cache opneemt. In dat geval kun je het META element in de head van het document opnemen en daar het HTTP-EQUIV attribuut aan toevoegen met de door sommige browsers ondersteunde waarde "pragma" en het CONTENT attribuut met de waarde "no-cache":

<META HTTP-EQUIV="pragma" CONTENT="no-cache">

Als waarde voor het CONTENT attribuut kun je ook een datum en tijd opnemen. Daarmee laat je de browser weten dat na deze (verval)datum het document niet meer in de cache geplaatst moet worden.

<META HTTP-EQUIV="expires" CONTENT="Tue, 31 Dec 1998 23:00:00 GMT">

Client Pull

Het META element kan gebruik worden om een document na een bepaalde tijd dynamisch te laten verversen of vervangen. Deze methode heet Client Pull: de browser opent zelfstandig een gewijzigd of ander document.
Om van de Client Pull methode gebruik te kunnen maken, moet je aan het META element het HTTP-EQUIV attribuut toevoegen met de waarde "refresh". Via het CONTENT attribuut geef je aan na hoeveel seconden een nieuw document geopend moet worden. Wanneer het huidige document vervangen moet worden door een ander document, moet je de url-parameter aan het CONTENT attribuut toevoegen.

In het volgende voorbeeld wordt een document na 3 seconden opnieuw geladen.

<HEAD> <META HTTP-EQUIV="refresh" CONTENT="3"> .. </HEAD>

Je kunt dit voorbeeld bekijken in een nieuw venster.

Door ook de url-parameter in het CONTENT attribuut op te nemen, geef je aan dat het huidige document vervangen moet worden door een ander. De url-parameter moet geplaatst worden tussen de aanhalingstekens van het CONTENT attribuut.

<HEAD> <META HTTP-EQUIV="refresh" CONTENT="3; url=pull2b.htm"> .. </HEAD>

Ook dit voorbeeld kun je in een nieuw venster bekijken.

Ook in het tweede document kun je het META element opnemen met de opdracht een nieuw document te openen. Door dat in volgende documenten te herhalen, kun je een presentatie maken. De vervangingstijd kun je laten afhangen van de inhoud van het document.
Als het laatste document weer terug verwijst naar een eerder document, ontstaat een loop. Een voorbeeld kun je in een nieuw venster bekijken

Commentaar

In het HTML-document kan commentaar worden opgenomen: tekst die door de browser niet wordt weergegeven, maar wel zichtbaar is als iemand de source van het document bekijkt. Het commentaar kan zowel in de head van het document, als in de body geplaatst worden. In de head kun je er bijvoorbeeld informatie over het copyright mee opnemen:

Basisweergave document

De attributen van het BODY element kun je gebruiken als je wilt dat het document anders wordt weergegeven dan met de standaardkleuren van de browser. Je kunt een achtergrondafbeelding definiëren, een achtergrondkleur en kleuren voor de tekst en de hyperlinks. De opgegeven kleuren voor de tekst en de hyperlinks gelden voor het hele document. Wanneer je tekst plaatselijk in een andere kleur wilt weergeven, dan moet je gebruik maken van het FONT element (zie het onderdeel Weergave inline tekst).

In het volgende voorbeeld zijn geen attributen aan het BODY element toegevoegd.

<BODY> </BODY>

In een nieuw venster kun je zien wat de standaardkleuren van de browser zijn.

Met het BACKGROUND attribuut kun je aangeven, welke afbeelding als achtergrond voor het document gebruikt moet worden. Algemeen ondersteunde formaten van afbeeldingen zijn GIF en JPG. Een nieuw formaat, dat nog slechts beperkt wordt ondersteund, is PNG. Het is verstandig een niet al te groot bestand te kiezen en daardoor de downloadtijd zoveel mogelijk te beperken. Door de browser wordt de afbeelding zo vaak gedupliceerd dat de hele achtergrond ermee bedekt is.

<BODY BACKGROUND="handl.gif"> </BODY>

In een nieuw venster kun je het resultaat bekijken.

Met het BGCOLOR attribuut definieer je welke achtergrondkleur er voor het document gebruikt moet worden, met het TEXT attribuut doe je hetzelfde voor de kleur van de tekst. Met de attributen LINK, VLINK en ALINK bepaal je de kleur van achtereenvolgens een link die nog niet bezocht is, een link die al wel bezocht is en een link op het moment dat deze wordt geselecteerd door de gebruiker.

<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#33FF00" VLINK="#FFFF00" ALINK="#FF0000"> </BODY>

In een nieuw venster kun je het resultaat bekijken.

De attributen BACKGROUND en BGCOLOR kun je ook gecombineerd gebruiken. De achtergrondkleur wordt weergegeven zolang de achtergrondafbeelding nog niet is geladen, als een afbeelding met een transparante achtergrond wordt toegepast, of als de afbeelding niet gevonden wordt.
Het is verstandig altijd de attributen BGCOLOR en/of BACKGROUND in combinatie te gebruiken met de attributen TEXT, LINK, VLINK en ALINK, zodat je niet het risico loopt dat de standaardkleuren van de browser voor tekst en hyperlinks wegvallen in de achtergrond.

De Microsoft Internet Explorer specifieke attributen LEFTMARGIN, TOPMARGIN, RIGHTMARGIN en BOTTOMMARGIN en de Netscape Navigator specifieke attributen MARGINHEIGHT en MARGINWIDTH van het BODY element kun je gebruiken om de afstand in pixels tussen de inhoud van het document en de randen van het venster of frame vast te leggen. Omdat deze attributen geen deel uitmaken van HTML 4.0, de meeste slechts ondersteund worden door de versies 4.0 en hoger van de genoemde browsers en er een goed alternatief is in de vorm van style sheets, wordt het gebruik afgeraden. Een voorbeeld van het gebruik van de margin eigenschappen in een stijl wordt hierna gegeven.

Het gebruik van stijlen

Met behulp van Cascading Style Sheets kunnen voor het BODY element stijlen gedefinieerd worden. Deze stijlen kunnen een vergelijkbaar resultaat opleveren als via de attributen van het BODY element, maar daarnaast ook op andere punten de weergave van het document beïnvloeden. In het volgende voorbeeld is met het STYLE attribuut een inline stijl voor het BODY element gespecificeerd. De eigenschappen font-family en font-size zijn gebruikt om het lettertype en de lettergrootte van de tekst in het document vast te leggen. Met de eigenschappen color en background zijn de kleur van de tekst, de achtergrondkleur en de achtergrondafbeelding gedefinieerd. De padding eigenschap zorgt ervoor dat ruimte wordt vrijgehouden tussen de inhoud van het document en de rand van het venster.

<BODY STYLE="font-family: sans-serif; font-size: 14pt; color: red; background: #FFFFCC url(handl.gif); padding: 20px"> </BODY>

Van de weergave van dit voorbeeld door Microsoft Internet Explorer 4 is een afbeelding opgenomen. Klik op de afbeelding en bekijk in een nieuw venster of de browser het gebruik van stijlen (correct) ondersteunt.

Zie ook de toelichting op het gebruik van stijlen in hyperlinks.

De browser plaatst standaard de inhoud van een document zo'n 4 à 5 pixels uit de rand van het venster of frame. Soms is het handig om de inhoud direct in de linker bovenhoek te plaatsen. Bijvoorbeeld als je gebruik maakt van frames zonder randen, of van inline frames. Je kunt in dat geval de waarde van de eigenschappen margin-top en margin-left op "0" zetten.

<BODY BGCOLOR="#FFFFCC" TEXT="#000000" STYLE="margin-top: 0px; margin-left: 0px;"> </BODY>

Omdat nog maar een beperkt aantal browsers Cascading Style Sheets ondersteunt, is het aan te raden stijlen voorlopig alleen te gebruiken als aanvulling op de mogelijkheden, die via HTML-elementen beschikbaar zijn.

Netscape Navigator 4 bevat een ernstige fout, waardoor stijlen, welke voor het document gedefinieerd zijn via het BODY element, niet worden geërfd in een tabel. Zie ook CSS en browsers.

Inhoud Handleiding HTML Index Inhoud structuur document