Cursus HTML - deel 3: titels, kleur en achtergrondopmaak

Trefwoorden: HTML, websites, tekst, kleur, hexadecimaal, achtergrond

1. inleiding


In dit deel van de cursus gaan we in op titels weergeven in HTML en we gaan verder in op kleuren, die we in het vorige deel al kort besproken hebben. Met kleuren gaan we dan ook onze achtergrond opmaken.

2. Titels


Titels op een webpagina zijn heel handig, je kan zo een goede structuur aangeven. Voor je bezoekers is het ook handig omdat ze vlug weten op welke pagina ze zich bevinden.

2.1. handige titel-tags

Om een titel te maken kan je natuurlijk de font-tag gebruiken met een size die groot is. Maar dat zo niet echt handig zijn (en eigenlijk is het niet echt correct).
Daarvoor heeft HTML dus een oplossing, namelijk de verschillende h-tags die automatisch een grootte geven aan je titel.
Hoe groter het cijfer na de h, hoe kleiner je title. Even enkele voorbeelden:

Opgelet: de grootte van onderstaande koppen is verschillend van hoe het normaal is, als je het uitprobeert kan je zelf zien welke kop voor jou het best past.

  • <h1>een grote titel</h1>: Een grote titel

  • <h2>een kleinere titel</h2>: Een kleinere titel

  • <h3>Misschien een ondertitel?</h3>: Misschien een ondertitel?

  • <h4>Een kleine ondertitel</h4>: Een kleine ondertitel

  • <h5>Zeer kleine titel</h5>: Zeer kleine titel

  • <h6>Dit kan je nauwelijks nog een titel noemen :s</h6>:Dit kan je nauwelijks nog een titel noemen :s

Zoals je kan zien gaat de h-tag terug tot het cijfer 6. Hiermee kan je dus verschillende titels op je webpagina weergeven en ze ook opmaken zoals je in het vorige deel van de cursus kon lezen.

3. Kleuren op je website


Een website in kleur is natuurlijk veel leuker dan in zwart-wit, daarom gaan we nu kleuren toevoegen.
3.1. hexadecimale kleuren

Voor het web is een speciale manier ontworpen om kleuren weer te geven, namelijk een code van 16 cijfers en letters. Vandaar ook HEXADECIMAAL ;).

Je kan kleuren ook gewoon met hun Engelse naam definiëren (red, black, blue). Maar het probleem is dat er niet voor elk kleur een naam bestaat en met hexadecimale waarden kan je zeer veel dingen gaan combineren.


De hexadecimale kleuren bestaan uit 4 delen:
#000000
Met het hekje (#) duiden we aan dat we met hexadecimale kleuren starten.
Wat dan volgt zijn 6 cijfers, deze stellen elk hun kleur voor.
Hexadecimale waarden werken namelijk via de RGB-mode (Rood, groen, blauw) waarmee je elk denkbaar kleur kan samenstellen.
De eerste 2 cijfers tonen dus het aantal delen rood er aan het kleur toegevoegd worden.
De cijfers 3-4 stellen de delen groen pigment voor en de cijfers 5-6 de delen blauw.

Naargelang je die waarden vervangt bekom je een kleur. Daarbij zijn er bepaalde afspraken.
00 is het minst pigment van dat bepaald kleur
FF is het meest pigment van dat bepaald kleur
Daartussen heb je dan volgende waarden:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
Door bovenstaande letters en cijfers in te vullen in een bepaald vak bekom je de cijfers.

Nu brengen we dit even in de praktijk:
#FF0000: bij deze code hebben we het meeste pigment bij rood en niets bij groen en blauw. We bekomen dus zuiver rood.
#00AA00: bij deze code hebben we gemiddelde waarden van het groene pigment. Daardoor bekomen we een mooi groen

Met bovenstaande regels kan je dus zeer veel kleuren maken. Probeer gerust verschillende dingen uit tot je een kleur vindt dat voor jou geschikt is.
Hieronder plaats ik nog eens veel gebruikte kleuren:

Onderstaande kleuren zijn wel vrij fel omdat telkens het volle pigment toegevoegd wordt. Je kan best de waarden een beetje verminderen zodat de kleuren goed zichtbaar zijn op het scherm van de bezoeker van je website.
codekleur
#FFFF00geel
#FFAA00oranje
#FF0000rood
#00FF00groen
#00FFFFcyaan
#0000FFblauw
#FF00FFviolet
#FFFFFFwit
#000000zwart
#B3B3B3grijs


4. achtergrondopmaak


Achtergrond met HTML instellen op je webpagina is eigenlijk helemaal niet zo moeilijk.
4.1. achtergrond met kleur

Nu we wat meer weten over kleuren gaan we dit ook toepassen op de achtergrond van onze webpagina. Dit gaat heel gemakkelijk op deze manier:
CODE - achtergrond met kleur
  1. <body bgcolor="#FFAA00" >
  2. de rest van je pagina
  3. </body>

Zoals je ziet moet er gewoon een property aan je body-tag toegevoegd worden. Met bovenstaande code wordt je achtergrond dus oranje.

4.2. achtergrond met een afbeelding

Een achtergrond met een afbeelding kan al meer problemen geven. Daarvoor gebruik je deze code:
CODE - achtergrond met afbeelding
  1. <body background="afbeelding.jpg >
  2. de rest van je pagina
  3. </body>

De property die je nu nodig hebt is background. Je moet hier opletten dat je het juiste pad naar je afbeelding opgeeft!
Als je afbeelding kleiner is dan het scherm wordt deze voortdurend herhaald tot het scherm volstaat, dit is soms zeer nadelig (maar dit kan opgelost worden via CSS), maar soms ook voordelig.
stel dat je een afbeelding hebt die van links naar rechts een kleurverloop heeft. Dan kan je die zo breed maken als je pagina (1000 px bv.) en je stelt deze in als achtergrond afbeelding. het verschil van links naar rechts is dan zichtbaar. Maar aangezien er geen verschil is naar onder volstaat het om je afbeelidng 1px breed te maken. Dit bevordert het inladen van de pagina.

Het is sowieso overigens beter om steeds CSS te gebruiken in plaats van de bovenstaande code. De achtergrondkleur van je document aanpassen gaat via deze code:

CODE
  1. <style type="test/css">
  2. body {
  3.     background-color:#FFAA00;
  4. }
  5. </style>


of zelfs korter:

CODE
  1. <style type="test/css">
  2. body {
  3.     background-color:#FA0;
  4. }
  5. </style>


Dit stuk plaats je in de head-sectie van je document. Beter is om externe stylesheets te gebruiken, maar dat zou ons te ver leiden. Indien je geïnteresseerd bent, kan je best eens een zoekmachine raadplegen om de nodige informatie op te rakelen.

5. slot


Zoals je deze keer gelezen hebt is het maken van een titel en het instellen van een achtergrond helemaal niet moeilijk.
Het maken van kleuren kan in het begin nog wat moeilijk lijken, maar telkens je er meer mee oefent zal je het meer en meer begrijpen ;).

Klik hier om deel 4 tabellen te lezen.Dit artikel werd geschreven door Simon op zaterdag 10 maart 2007 om 14:57 en werd sindsdien 14918 keer gelezen.

  • Pagina
  • 1 van 1

Bericht geplaatst door Simon op zondag 11 maart 2007 om 14:21:49.
Simon's avatar
Multiviteit: 3742
Inderdaad is het beter om CSS te gebruiken, maar dat staat volledig los van HTML. Het best is om eerst HTML te leren en daarna je toe te spitsen op CSS (wat eigenlijk wel noodzakelijk is :)).
Zo is het ook beter om kleuren van je tekst, opmaak van je tekst, ... te definiëren via CSS.
Bericht geplaatst door k_a_lf op zondag 11 maart 2007 om 20:17:58.
k_a_lf's avatar
Multiviteit: 2650
INFØMAN
k_a_lf says BWAAAAAP!
een kleine hulp: hier en hier vind je een hele hoop variaties aan kleuren in hun hexadecimale codes;-)
Er zijn heel wat mensen, die veel weten en weinig begrijpen.
  • Pagina
  • 1 van 1