Stap 7 – Kleuren

Laatste update: 2 maart 2019

Naast het aanpassen van het lettertype en de lettergrootte is het bij de FONT-tag ook mogelijk de kleur aan te passen. Bij de BODY-tag heb je el een tekstkleur ingesteld, dat voor het hele document geldt. Nu gaan we het elders in het document aanpassen.

Kleurcodes

Bij Stap 3b hebben we al HTML codes gebruikt voor kleuren. De kleurcode begint altijd met een hekje (#) en wordt gevolgd door 6 karakters (cijfers en/of letters).

Omdat in deze codes weer drie subcodes verwerkt zijn, heten ze hexadecimaal triplet. Door middel van die cijfers en letters geef je aan hoeveel rood, blauw en groen je wilt mengen voor het eindresultaat. Omdat er miljoenen combinaties bestaan, hoef je je niet schuldig te voelen als je deze codes niet uit je hoofd kent. Er zijn verschillende programma’s, die je kunnen helpen met het achterhalen van deze kleurcodes (een HTML editor bijvoorbeeld, een fotoprogramma, of Google’s Color Picker).

De meest gebruikte zijn die voor zwart en wit:
#000000 – zwart
#FFFFFF – wit.

In HTML is het ook mogelijk zo’n 144 kleuren in te stellen op naam (“white”, “yellow”, “black” enz), maar aangezien dit aanzienlijk minder wordt gebruikt bij HTML, slaan we het in deze cursus over. Behalve zwart en wit, zijn alle andere kleuren erg fel op het scherm. Vandaar dat we liever vaak een kleurcode gebruiken.

Kleur toevoegen

In index.html stellen we nu een kleur toe aan de FONT-tag:

<html>
<head>
<title>mijn eigen website</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<font face="Arial">
<p>Nora Tol begon met het aanbieden van webdesigndiensten sinds <u>midden jaren '90</u> met
haar eerste bedrijf <i><font color="#ff9b6A">Nora Tol Virtual Publishing</font></i>. En nu
weer, met haar tweede bedrijf <i><font color="#ff9b6A">ElNorado Productions</font></i></p>
<p>Al snel groeide de vraag naar <u>andere diensten</u> als het ontwerpen van logo's,
webhosting, online marketing en het maken van online content. Diensten die toegevoegd
werden.</p>
<p>Bekijk haar website voor meer informatie.<br /><b><font size="4">Of neem contact
op</font></b>.</p>
</font>
</body>
</html>

In mijn tekst heb ik gekozen, mijn bedrijfsnamen eruit te laten springen door een kleur. Als ik hele tekst een andere kleur had willen geven, dan had ik de COLOR-attribute bij de FONT-tag aan het begin van het document moeten toevoegen: <FONT FACE=”Arial” COLOR=”#FF9B6A”>
Dan was de kleur voor al mijn teksten aangepast.

Maar nogmaals, we gebruiken eigenlijk CSS hiervoor.

We gaan door naar Stap 8

Bookmark the permalink.

Comments are closed.