Stap 3 – Body

Laatste update: 1 maart 2019

De lay-out van de pagina leggen we vast in de Body van het HTML document. Ook het BODY-element moet geopend en gesloten worden. Alles wat daar tussen staat, zal in de browser als homepage zichtbaar worden.

Body-element toevoegen

Zorg dat het document er als volgt uitziet:

<html>
<head>
<title>mijn eigen website</title>
</head>
<body>
</body>
</html> 

Gefeliciteerd! Je bent nu echt een website aan het maken. Het BODY-element zelf kan heel veel optionele instellingen meekrijgen. Die noemen we attributes. De waarde die je meegeeft aan een attribute geldt voor de BODY-tag en zal daardoor gebruikt worden voor de hele pagina.

Je mag overigens lege regels tussen de tags invoegen, als je dat wilt. Dit wordt niet gelezen door de browser en heeft geen effect op de weergave van de website.

Stap 3b – Achtergrondkleur instellen en tekstkleur bepalen

Aan het BODY-element kun je attributes toevoegen voor het instellen van een achtergrondkleur of – foto. Je kunt hier ook de kleur van de tekst instellen of van de links. Echter doen we dat bijna niet meer. Inmiddels gebruiken we er vaker CSS voor. Toch laat ik je zien hoe het werkt met HTML. Met de volgende codes wordt de achtergrondkleur gebroken wit/licht geel, 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 in HTML niet verplicht, maar het is toch handig dat je het jezelf aanleert te gebruiken. Vooral als je doorgaat als ontwikkelaar, zul je merken dat je veel met aanhalingstekens werkt om het verschil te maken tussen code en waarden. Sommige talen vereisen het ook. En ook binnen HTML is het overigens één van de W3C standaarden om het wel te gebruiken.

In dit geval is alles tussen de aanhalingstekens een kleurcode. Door de hashtag zou je bijna denken dat een social media campagne is, maar dit zijn hex kleur codes. Browsers kennen voor kleurgebruik alleen het RGB kleurmodel. Door een mix van Rood, Groen en Blauw (RGB) wordt een bepaalde kleur samengesteld (meer over dit lees je in stap 7). Maak je maar geen zorgen, je hoeft niet al deze codes uit je hoofd te weten. Google biedt een online color picker, waar je de codes kunt achterhalen.

Wat betekenen al die HTML codes?

De vertaling van alle codes is als volgt:
BGCOLOR – achtergrondkleur
#FFFFE1 – gebroken wit/licht geel
TEXT – kleur voor de tekst
#808080 – grijs
LINK – kleur van de links
#FF9B6A – oranje
ALINK – kleur van actieve links (active link)
#FF9B6A – oranje
VLINK – kleur van gebruikte links (visited link)
#FF0000 – rood

De tags LINK en ALINK gelden eigenlijk hetzelfde. Ze zullen alle twee de kleur van een link instellen, die nog niet aangeklikt is. Pas als de link aangeklikt is zie je de kleur van de VLINK-tag.

Als je kleuren instelt bij de BODY-element, gelden deze kleuren voor alle teksten/links op die pagina.

Stap 3c – achtergrondplaatje

Het toevoegen van een achtergrondplaatje heeft wat extra uitleg nodig. Als je wilt, download mijn .zip bestand met 2 images, die je kunt gebruiken voor het bouwen van dezelfde website, die in het voorbeeld steeds gebruikt wordt. Je kunt ook je eigen foto’s gebruiken. Hou er dan rekening mee dat je andere bestandsnamen moet gebruiken in je codes. Deze moeten overeenkomen met jouw fotobestanden.

Indien je dat nog niet gedaan had, maak een subdirectory aan die “images” heet en kopieer deze images hierin.

Zorg dat index.html er zo uit komt te zien:

<html>
<head>
<title>mijn eigen website</title>
</head>
<body background="images/background.gif" bgcolor="#ffffe1" text="#808080" link="#ff9b6a"
vlink="#ff0000">

</body>
</html> 

Bij de BODY-tag is er nu BACKGROUND=”images/background.gif” toegevoegd. Hiermee stel je een achtergrondplaatje in. Het achtergrondplaatje 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 heb je de volgende instelling nodig: BACKGROUND=”background.gif”.

Hoe het met het aangeven van de juiste paden zit, wordt verder uitgelegd in Stap 12. De regels die je daar ziet, gelden ook voor de referentie hier bij BACKGROUND.

Plaatjes/foto’s met de extensies .jpg, .png of .gif zijn het meest gangbaar op Internet. Dit geldt ook voor het achtergrondplaatje dat je gebruikt. (Meer over deze extensies wordt uitgelegd in Stap 12).

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 gebruiken, wordt het plaatje automatisch “getegeld” weergegeven (tiled). Dit houdt in dat het naast en onder elkaar herhaald wordt, totdat het hele scherm gevuld is.

In theorie zou je de BGCOLOR kunnen laten vervallen, maar aangezien bij browsers het weergeven van plaatjes uitgeschakeld kan worden, gebruiken we ze beiden. In sommige gevallen, 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.

Je bent klaar voor de volgende stap.

Bookmark the permalink.

Comments are closed.