* K i e s d e j u i s t e K l e u r e n *
De achtergrondkleur
van een webpagina of blog
de kleur van tekst, linken, randen en tabellen
bepalen door middel van kleurcodes
of de engelse benaming van de kleur
of door opgave van de RGB waarden
-------------------------------------
Kleurcodes bevatten een aantal hexadecimale waarden
0 1 2 3 4 5 6 7 8 9 a b c d e f
hetzij in totaal 6 cijfers en/of letters
Elke kleurcode begint met het # teken, gevolgd door de hexadecimale waarden van de kleur (in totaal 6 letters en/of cijfers)
Voorbeeld: #FF
0000
FF in hexadecimaal betekent 255 in decimaal
De eerste twee waarden bepalen de intensiteit van het
rood in de kleur,
zo is 00 het laagst en FF het hoogst
De 3de en 4de waarde staat voor groen
De 2 laatste waarden bepalen de intensiteit van de blauwe kleur
Door de kleuren te mengen kunnen we heel veel verschillende tinten bekomen
Voorbeeld:
#FF0000 - Met deze kleurcode vertellen we de browser om volledig rood (red) weer te geven, en geen groen en blauw. Resultaat:
#00FF00 - Deze code geeft alleen groen (lime) weer, geen rood of blauw. Resultaat:
#0000FF - Deze kleurcode vertelt de browser alleen blauw (blue) te laten zien. Resultaat:
#FFFF00 - Een combinatie van rood en groen, zonder toevoeging van blauw geeft geel (yellow)
#000000 - Bij 0% rood, groen en blauw wordt zwart weergegeven
#FFFFFF - Door de hoogste intensiteit rood, groen en blauw aan te duiden, verschijnt wit
#800080 - Een combinatie van wat minder rood en minder blauw, zonder toevoeging van groen laat paars (purple) zien. Resultaat:
-----------------------------------------------------------------------
T e k s t m e t m o o i e K L E U R e n
------------------------------------------------------------------------
Door middel van een html code of inline stijl,
waarin de hexadeximale waarden (kleurcode) van een bepaalde kleur is opgenomen,
is het mogelijk een tekst een welbepaalde kleur te geven
HTML codes of inline stijlen worden in de bron (brontekst of broncode) van een blogbericht aangebracht.
In de bron van een webpagina gebeurt dit tussen <body> en </body>
In een blogbericht of webpagina kan de kleur van een bepaalde tekst ingesteld worden,
door in de bron van het bericht of de webpagina de desbetreffende tekst te laten voorafgaan van de hiernavolgende html code,
waarin de hexadecimale waarden (kleurcode) worden aangebracht:
Het einde van de gekleurde tekst wordt aangegeven, door de tekst te beëindigen met de sluittag </font>
Vergeet dus niet, in de hier bovenstaande html code het woord kleurcode te vervangen door de kleurcode van de door u gewenste kleur
Voorbeeld:
| <font color="#009900">hier komt de tekst</font> |
De hier bovenstaande html code is echter wel verouderd
Tegenwoordig wordt gebruik gemaakt van hetzij:
inline stijlen (vooral in blogberichten)
of
ingesloten stijlen
(CSS regels aan te brengen in de head van de blog of een webpagina)
Voorbeeld van een inline stijl:
De kleur van een tekst instellen
Voor het instellen van rode tekst, wordt hierna gebruik gemaakt van span
en het attribuut style="..." waarbij als waarde voor de eigenschap
color de kleurcode #ff0000 wordt opgenomen, wat rode tekst laat zien in de browser:
| <span style="color:#ff0000">hier komt de tekst</span> |
Enkele codes, waarin gebruik wordt gemaakt van
hexadecimale waarden voor het bepalen van de kleur
Inline stylen:
Kleur van een koptekst instellen:
Bij onderstaande code A52A2A verschijnt een bruine koptekst van niveau 2
| <h2 style="color:#A52A2A"> hier komt de tekst </h2> |
Achtergrondkleur van een webpagina instellen
In de hier onderstaande code is voor de achtergrondkleur als kleurcode ccccff ingevuld, te vervangen door een andere kleurcode naar eigen wensen
| <body style="background-color:#ccccff"> |
Achtergrondkleur van een tabel instellen: begincode
De kleurcode e6e6fa in deze begin code, zorgt ervoor dat de tabel in de kleur lavender wordt weergegeven. Ook hier dient de kleurcode e6e6fa vervangen door de kleurcode van het gewenste kleur
| <table style="background-color:#e6e6fa"> |
Achtergrondkleur en tekstkleur van een paragraaf instellen:
| <p style="background-color:#ffff00; color:#990000">hier komt de tekst</p> |
Linkkleur instellen:
Op de plaats waar in de code hier URL staat, dient tussen de aanhalingstekens het internetadres (de URL) van de link ingevuld
In de plaats van de kleurcode cc0000 kan een andere kleurcode opgegevn worden
| <a style="color:#cc0000" href="hier URL">hier komt de linknaam</a> |
Email-linkkleur instellen:
Vervang in de code het woord emailadres door het werkelijke emailadres van de link,
de kleurcode 9932cc door een kleurcode naar eigen wensen
:
| <a style="color:#9932cc" href="mailto:emailadres">hier komt de naam</a> |
Type, dikte en kleur van de rand rond een afbeelding instellen
In onderstaande code werd voor de rand (border) de kleurcode ff0000 ingevuld, waardoor een rode rand rond de afbeelding verschijnt. De kleurcode is naar eigen wensen te vervangen door een andere kleurcode.
Ook de dikte van de rand kan aangepast door de waarde 5 te vervangen door een hoger of lager aantal pixels
Op de plaats waar in de code URL_plaatje staat, dient tussen de aanhalingstekens de URL van het plaatje ingevuld
Het woord beschrijving wordt vervangen door een korte beschrijving van het plaatje
| <img src="URL_plaatje" alt="beschrijving" style="border: solid 5px #ff0000;" /> |
------------------------------------------------------
Ingesloten CSS stylen:
Aan te brengen in de header van een webpagina of blog tussen:
<style type="text/css"> en </style>
Tekstkleur en achtergrondkleur van een webpagina instellen
|
body { color: #00ff00; background-color: #e6e6fa; } |
De kleur en achtergrondkleur van alle kopteksten (hier niveau h1)
alsook de dikte, het type en de kleur van de randen rondom de koptekst bepalen
De koptekst centreren
|
h1 { color:#800000; background-color:#87cefa; border: 3px solid #00ff00; text-align:center; } |
De engelse benaming van de kleur gebruiken
voor het aangeven van de kleur
In plaats van de hexadecimale waarden (een kleurcode) van een kleur in de tagcode op te geven, kan de kleur ook bepaald worden door de engelse benaming van de kleur.
Voorbeelden waarbij gebruik wordt gemaakt van de engelse benaming van de kleur
De tekstkleur instellen met behulp van font:
In onderstaande code werd als kleur fuchsia ingevuld
| <font color="fuchsia">hier komt de tekst</font> |
De tekstkleur instellen met behulp van een inline stijl:
De kleur royalblue kan hier vervangen door de engelse benaming van een ander kleur
| <span style="color:royalblue">hier komt de tekst</span> |
De achtergrondkleur en kleur van een tekst instellen
Als voorbeeld werd hier lavender als achtergrondkleur en purple als tekstkleur ingevuld
| <span style="background-color:lavender; color:purple">hier tekst </span> |
De tekstkleur van een paragraaf instellen: (hier is deeppink het tekstkleur)
| <p style="color:deeppink">hier komt de tekst</p> |
De achtergrondkleur en tekstkleur binnen een div gebied instellen
Bij deze werd azure als achtergrondkleur en navy als tekstkleur ingevuld
| <div style="background-color:azure; color:navy">hier tekst </div> |
----------------------
Ingesloten CSS stijlen
Aan te brengen in de head van een webpagina of blog tussen:
<style type="text/css"> en </style>
De achtergrondkleur en tekstkleur instellen van de webpagina
| body { background-color:turquoise; color:red; } |
In plaats van hexadecimale waarden
kunnen ook RGB waarden
(rood, groen, blauw) aangewend worden
Bij 255 als waarde, wordt de grootste intensiteit van de kleur aangegeven.
0 betekent daarentegen de laagste waarde
Voorbeeld:
De achtergrondkleur (geel) van een paragraaf instellen:
Hierbij wordt gebruik gemaakt van het attribuut style="..."
waarbij voor het bepalen van de achtergrondkleur als RGB waarden:
100% rood, 100% groen en 0% blauw aangewend wordt, wat een gele kleur laat zien in de browser:
| <p style="background-color:rgb(255,255,0)"> Hier komt de inhoud van de paragraaf </p> |
Kleurenkaart
Hierna de engelse benaming van enkele kleuren, met hun respectievelijke RGB waarden (hoeveelheid rood, groen en blauw) waaruit ze opgebouwd of samengesteld zijn, en rechts ervan de hiermee overeenstemmende hexadecimale kleurcode van ieder kleur.
|
Engelse benaming |
Rood Groen Blauw |
kleurcode |
||
| Black | 0 0 | 0 0 | 0 0 | #000000 |
| White | 255 | 255 | 255 | #FFFFFF |
| Red | 255 | 0 0 | 0 0 | #FF0000 |
| Green | 0 0 | 255 | 0 0 | #00FF00 |
| Blue | 0 0 | 0 0 | 255 | #0000FF |
| Yellow | 255 | 255 | 0 0 | #FFFF00 |
| Brown | 165 | 42 | 42 | #A52A2A |
| Maroon | 128 | 0 0 | 00 | #800000 |
| Purple | 128 | 0 0 | 128 | #800080 |
| Violet | 238 | 130 | 238 | #EE82EE |
| Lavender | 230 | 230 | 250 | #E6E6FA |
| Gray | 128 | 128 | 128 | #808080 |
| Silver | 192 | 192 | 192 | #C0C0C0 |
