Stap 3 – body

De lay-out van de website, 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.

Body-tag toevoegen

Zorg dat jouw document er als volgt uitziet:

<HTML>
<HEAD>
<TITLE>mijn eigen website</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML> 

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

Stap 3b – achter- en voorgrondkleuren instellen

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 van de website instellen, maar ook de kleur van de tekst en de kleur van de links.

Kleuren instellen

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>

Zijn aanhalingstekens verplicht bij HTML?

De aanhalingstekens zijn, in deze versie van HTML, 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.

In latere versies van HTML zijn aanhalingstekens wel verplicht. Het is daarom 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 (php, javascript), 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 (komt later in de cursus aan bod als extra informatie).

In dit geval is het gewoon handig. Alles dat tussen aanhalingstekens staat zijn waarden. In dit geval zijn het codes voor kleuren.

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 voor bijna hetzelfde.

Over de rare kleurcodes, die er inmiddels een beetje uitzien als een vreemde social media hashtag campagne, gaan we later in de cursus meer leren. Als je kleuren instelt bij de BODY-tag, dan gelden deze kleuren voor de alle teksten/links op die pagina.

Stap 3c – achtergrondplaatje

Het implementeren van een achtergrondplaatje heeft wat extra uitleg nodig. Als je wilt, dan kun je met deze link een .zip bestand downloaden, waarin 2 images staan, 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, maar hou er dan rekening mee dat je andere bestandsnamen moet gebruiken in je codes. Deze moeten overeen komen met jouw fotobestanden.

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

Achtergrondplaatje toevoegen

Zorg dat index.html er als volgt 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). Inmiddels is er ook een derde bestandstype in opmars voor het Internet. Je kunt daar, in sommige gevallen, een hogere kwaliteit foto in bereiken. Het type heet .png, maar .jpg en .gif blijven nog steeds het populairst.

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