Stap 3 - body:
De layout van de site ga je in de body van het HTML document bepalen. Ook de BODY-tag moet geopend worden en gesloten. Alles wat daar tussen komt te staan zal in de browser als homepage zichtbaar zijn.
Zorg dat jouw document er als volgt uitziet:
<HTML>
<HEAD>
<TITLE>mijn eigen website</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
De witruimte is niet noodzakelijk. Deze gebruik ik puur voor de overzichtelijkheid.
Stap 3b - achter- en voorgrondkleuren bepalen:
Met de BODY-tag is trouwens wat bijzonders aan de hand. Zoals meerdere HTML tags kun je aan de BODY-tag een aantal definities en waarden toevoegen. Zo kun je bij deze tag de achtergrondkleur of het achtergrondplaatje bepalen, de kleur van de tekst in het document en de kleur van de links.
We gaan ons document index.html nu aanpassen, zodat de achtergrondkleur gebroken wit/licht geel is, de tekst grijs, de links oranje en rood.
<HTML>
<HEAD>
<TITLE>mijn eigen website</TITLE>
</HEAD>
<BODY
BGCOLOR="#FFFFE1" TEXT="#808080" LINK="#FF9B6A" ALINK="#FF9B6A" VLINK="#FF0000">
</BODY>
</HTML>
De aanhalingstekens zijn niet verplicht, maar heb ik hier gebruikt voor de overzichtelijkheid. Alles wat namelijk tussen die aanhalingstekens staat zijn waarden. In dit geval zijn het codes voor kleuren.
Het is verstandig om jezelf meteen aan te leren de aanhalingstekens te gebruiken, maar je zult ontdekken dat browsers eigenlijk heel vergevensgezind zijn. Als je ze vergeet zullen ze er eigenlijk geen probleem van maken. Maar als je verder wilt met webdesign en ook andere talen, zoals scripting talen, gaat leren, dan zul je merken dat het toch wel handig is. Het is overigens ook 1 van de W3C standaarden om het wel te gebruiken.
In dit geval is het gewoon handig. Alles dat tussen aanhalingstekens staat zijn waarden. In dit geval zijn het codes voor kleuren.
Vertaling:
BGCOLOR - achtergrondkleur
#FFFFE1 - gebroken wit/licht geel
TEXT - kleur voor de tekst
#808080- grijs
LINK - kleur van de links
#FF9B6A - oranje
ALINK - kleur van de links
#FF9B6A - oranje
VLINK - kleur van gebruikte links
#FF0000 - rood
Zoals je kunt zien staan LINK en ALINK voor hetzelfde, maar gebruik van beide is nodig vanwege de verschillende browsers. MSIE (Internet Explorer) leest LINK en Netscape leest ALINK. Zo zorg je dat het gewenste resultaat in beide browsers zichtbaar is.
Stap 3c - achtergrondplaatje:
Het implementeren van een achtergrondplaatje heeft wat extra uitleg nodig. Als je op
deze link klikt dan download je een .zip bestand, waarin 2 images staan die je kunt gebruiken voor het bouwen van dezelfde website die in het voorbeeld steeds gebruikt worden.
Indien je dat nog niet gedaan had, maak een subdirectory aan die "images" heet en kopieer deze images hierin.
Zorg dat index.html er alsvolgt uit komt te zien:
<HTML>
<HEAD>
<TITLE>mijn eigen website</TITLE>
</HEAD>
<BODY BACKGROUND="images/background.gif" BGCOLOR="#FFFFE1" TEXT="#808080" LINK="#FF9B6A" ALINK="#FF9B6A" VLINK="#FF0000">
</BODY>
</HTML>
Bij de BODY-tag hebben we nu BACKGROUND="images/background.gif" toegevoegd. Hierdoor hebben we een achtergrondplaatje ingesteld. Het achtergrondplaatje dat we gebruiken heet "background.gif" en staat in de subdirectory "images", vandaar de referentie "images/background.gif". Zou het plaatje in dezelfde directory staan als de HTML file, dan zou de volgende instelling nodig zijn: BACKGROUND="background.gif"
De manieren om een plaatje in te stellen wordt nader behandeld in
Stap 12a. De regels hiervoor gelden ook voor de referentie die je maakt bij BACKGROUND.
Op het Internet zijn plaatjes/foto's met de extensies .jpg of .gif het meest gangbaar. Dit geldt ook voor de achtergrondplaatjes die gebruikt worden. (Wil je meer weten over .jpg en .gif, lees dan
Stap 12f)
Sla index.html op en open de file in een browser. Het originele plaatje is 400 x 400 pixels, maar omdat we het in de BODY-tag als achtergrond geplaatst hebben, wordt het plaatje automatisch "betegeld" weergegeven (tiled), dus naast en onder elkaar herhaald totdat het hele scherm gevuld wordt.
In theorie zou je de BGCOLOR kunnen laten vervallen, maar aangezien bij browsers het weergeven van plaatjes uitgeschakeld kan worden, gebruiken we ze beiden. Bij MSIE krijg je in een flits nog even de BGCOLOR te zien, voordat het achtergrondplaatje zichtbaar wordt. Wanneer je de hoofdtinten op elkaar afstemt, kun je de overgang heel subtiel laten verlopen.
