HTML Structuur document


Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin


Inhoud onderdeel: Introductie structuur document | De head | De body | DOCTYPE-declaratie | Titel document | Commentaar | Basisweergave document

Gerelateerde elementen: BASE | BODY | HEAD | HTML | LINK | META | SCRIPT | STYLE | TITLE


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 tekst).

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

<BODY>

</BODY>

Hiernaast zie je wat de basisweergave van de browser is.

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="watermerk.gif">

</BODY>

In een nieuw venster kun je het resultaat bekijken.

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Voorbeeld gebruik basisweergave

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="#00FF00" VLINK="#FFFF00" ALINK="#FF0000">

</BODY>

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Voorbeeld gebruik basisweergave

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 stylesheets, wordt het gebruik afgeraden. Een voorbeeld van het gebruik van de margin eigenschappen in een stijl wordt hierna gegeven.


Met behulp van stylesheets 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 margin eigenschap zorgt ervoor dat ruimte wordt vrijgehouden tussen de inhoud van het document en de rand van het venster.

<BODY STYLE="font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: red; background: #FFFFCC url(watermerk.gif); margin: 20px">

</BODY>

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Voorbeeld gebruik stijlen


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 tegen de randen te plaatsen. Bijvoorbeeld als je gebruik maakt van frames zonder randen, of van inline frames. Voor Microsoft Internet Explorer, Netscape Navigator 6.0 en hoger, Mozilla en Firefox kun je dat regelen door voor het BODY element de margin eigenschap op te nemen met de waarde "0". Om ook in Opera het bedoelde effect te bereiken, moet je bovendien de padding eigenschap op te nemen met de waarde "0". Dit werkt wanneer voor het document een DOCTYPE-declaratie is opgenomen, die ervoor zorgt dat het document wordt weergegeven in de quirks modus (waarbij rekening gehouden wordt met fouten in oudere browsers). Als het document in de nieuwste browsers echter wordt weergegeven in de standards modus, dan houdt de browser de normale bovenmarge aan voor het P element en staat de tekst dus niet tegen de bovenrand. Je kunt dit oplossen door voor het eerste P element de margin-top eigenschap op te nemen met de waarde "0".

<BODY BGCOLOR="#FFFFCC" TEXT="#000000" STYLE="margin: 0px; padding: 0px;">

<P STYLE="margin-top: 0px;">Voor het document ... linker bovenhoek.</P>

</BODY>

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Voorbeeld gebruik stijlen

Wanneer je gebruik maakt van tabellen, moet je er rekening mee houden dat stijlen gedefinieerd voor het BODY element niet in elke browser geërfd worden in een tabel. Dat geldt in Netscape Navigator 4 voor alle eigenschappen en in Microsoft Internet Explorer 4 t/m 5.5 voor een deel van de eigenschappen. Om een stijl ook voor de inhoud van de cellen van een tabel te laten gelden, kun je deze het beste ook definiëren voor de elementen TH en TD. Zie ook het onderdeel CSS en browsers.



Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Handleiding HTML (http://www.handleidinghtml.nl/)
Copyright © 1995-2016 Hans de Jong
Laatste wijziging: 16 januari 2005