HTML>Kleuren

In deze les komen de kleuren aan de orde. De dingen die je leert kan je na deze les nog niet toepassen als je alleen les 1 en 2 hebt gevolgd.

The Webmaster

ps. Kijk, voordat u de les doet, onderaan de pagina!

Kleurcodes

Kleuren worden vaak toegepast in html(en css). Vaak ontstaan daardoor problemen, want er zijn hexcodes, kleurcodes enzovoort.
Hier wordt een goede uitleg gegeven en kunt u simpel en snel kleurcodes genereren.

Als het om kleurcodes gaat zijn er drie verschillende namen die je wellicht veel hoort, namelijk: 
-RGB
-hexcode
-"normale kleurcode"

Laat ik beginnen...

De theorie;

rgb en heximaal

Op internet wordt er gewerkt volgend het concept van de heximale codes en RGB! Hexa is grieks voor 6 en kleurcodes bestaan dan ook vaak uit 6 cijfers en/of letters! De 6 cijfers die in een kleurcode staan hebben te maken met de RGBformule.
RGB betekent niets meer als rood groen blauw(Niet rood geel blauw)! De kleurcodes die op het internet worden gebruikt worden, gaan dus volgens het ROOD GROEN BLAUW concept. Probeer het eens uit in de volgende kleurengenerator.


Kies uw kleuren en de daarbijhorende codes. Klik naast het schuifblokje voor 
browservaste kleuren, verschuif het voor alle kleuren.

Dec Hex
Rood     
Groen     
Blauw     
RGB Decimal RGB Hex(MS) HTML Hex

De kleurcodes in html;

Wilt u blauw als kleurcode? Zet de scroll dan helemaal naar rechts bij blauw en u heeft 255 decimalen blauw, 00 rood en 00 geel. Er zit dus alleen blauw in de kleur!

Oftewel #0000ff. Zoals u ziet staat er een # voor. Dat is om aan te duiden dat het om een htmlkleurcode gaat.
Er zijn echter nog andere manieren om kleuren aan te geven! Laten we als voorbeeld blauw nemen:
//In een htmlkleurcode: #0000ff>Veiligste en meest gebruikte manier(gebruik deze dus ook)
//RGB mogelijkheid 1(in componenten): rgb(0, 0, 255)  >Wordt soms gebruikt bij css.
//RGB mogelijkheid 2(procenten): rgb(0%, 0%, 100%) >Wordt soms gebruikt bij css.
//Als Engelse naam: blue >Onveilig, want niet alle browsers ondersteunen dit.

Zo werkt het concept dus. Het is eigenlijk alleen standaard informatie, want in de HTML worden gewoon de standaard kleurcodes(#0000ff) gebruikt die dus gaan volgens het RGB en het heximale concept!

Eigenlijk is dit belangrijk;
Kleuren gaan dus zo #ffffff=wit. Deze codes worden dus gebruikt bij htmlpagina's. Ook wordt er gebruikt gemaakt van de Engelse benamingen(makkelijk, maar niet slim).

Pixels, points, procent;

In de html, maar vooral in de css zijn er vaak problemen over de verschillende de eenheden om lettergrootte/hoogte aan te duiden! Ik zet ze even op een rijtje en ik weet zeker dat er dan geen problemen meer zijn!
De voorbeelden zijn in hoogte!
/ Pixels, points, procent, picas- Een overzicht! / /
Het type Uitleg Voorbeeld 1(height) Voorbeeld 2(width)
px Aantal pixels height: 40 px krijgt als resultaat

 

 width: 40 px krijgt als resultaat!

 
pt, pi Een point is 1/72 inch en een pica(s) is 12 points! height: 40 pt krijgt als resultaat


width: 40 pt krijgt als resultaat


em, ex ems of exes! ems is de hoogte van het huidige lettertype en ems is de hoogte van de stndaard onderkast height: 2 ex krijgt als resultaat

 

 width: 2 ex krijgt als resultaat


mm, cm Aantal millimeters of centimeters in hoogte of breedte height: 1cm krijgt als resultaat

 

 width: 1 cm krijgt als resultaat
 % Percentage; procent

Voorbeeldtekst met font-size 150%

 - 

Wat weet je nu?
<><Dat er RGB en heximale kleuren zijn
<><De kleurcode van de html beginnen met # waarna 6 cijfers en letters komen die volgens het RGB en het heximale concept gaan.
<><Er zijn verschillende manieren om een kleurcode te maken! De meest gebruikte zijn: Engelse benaming en de htmlcode. De htmlcode is daarvan de veiligste manier, omdat Engelse benamingen niet door alle browsers herkend worden!
<><De verschillende aanduidingen voor grootte en breedte.

Dit was de les over kleuren en grootte. Het was standaard informatie over de kleuren en u weet nu waar kreten als: RGB en heximaal vandaan komen. Deze informatie is erg handig voor de volgende lessen.

The Webmaster

Vorige les//--Terug naar 't webhulpje--\\Volgende les

Voor vragen kan je terecht in het forum!!

css- Cascading Style Sheets- Vereenvoudig de opmaak van je (html) pagina door gebruik te maken van CSS.

Copyright © 't webhulpje, Nederland
Alle rechten voorbehouden. Niets van deze elektronische uitgave mag worden verveelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand, of openbaar gemaakt, in enige vorm of op enige wijze, hetzij elektronisch, mechanisch, door fotokopieën, opnamen, of op enige andere manier, zonder voorafgaande schriftelijke toestemming van de uitgever en/of de beheerder van deze website.