8.2 De tekstkleur

Het wijzigen van de tekstkleur is ook mogelijk, je kan een letter, een woord of een hele tekst wijzigen van kleur. Het ‘saaie’ zwart kan eender welke andere kleur worden.

HTML werkt op dezelfde manier met tekstkleur als voor de achtergrondkleur. Wat dus wil zeggen dat je zowel je kleur kan aangeven door gewoon de (Engelse) naam te geven van de gewenste kleur, als de hexadecimale waarde van de gewenste kleur.

Je kan kiezen op 2 manieren om de tekstkleur mee te geven, ofwel geef je de tekstkleur voor heel je document mee, ofwel zeg je per stukje tekst welke tekstkleur het moet hebben.
Combinaties zijn ook mogelijk: standaard voor heel het document, maar je maakt hier en daar uitzonderingen.

Om de tekstkleur in te stellen voor heel het document, geef je de parameter text="" mee in de tag <body>.

Dit wordt dan:

<body text="ff0000">

In combinatie met het vorige om de achtergrondkleur in te stellen, krijgen we dit:

<body bgcolor="#000000" text="ff0000">

Om stukken tekst een andere kleur te geven, kan je dit doen als volgt: we gebruiken hiervoor de parameter color="" in de tag <font>.
De tag <font> hebben we nog niet gezien.

Deze tag wordt geplaatst rond een stuk tekst waar we extra opmaak aan meegeven. Nu is dit de tekstkleur, maar dit wordt later ook de tekstgrootte, lettertype, enz.

Dit is een voorbeeld:

<p><font color="#00ff00">Deze regel is in het groen</font></p>
<p><font color="#ff0000">Deze regel is rood</font></p>

Dit maakt:

Deze regel is in het groen

Deze regel is rood

In ons voorbeelddocument gaan we de standaardtekstkleur blauw geven (#0000FF), met de titels afwijkend in het zwart (#000000)

<html>
<head>
<title>Mijn persoonlijke website</title>
</head>
<body bgcolor="#99CCFF" text="#0000FF">
<h1><font color="#000000">Mijn persoonlijke website</font></h1>
<p>U bent hier beland op mijn persoonlijke website!</p>
<h2><font color="#000000">Beginpagina</font></h2>
<p>U bent op de <u>beginpagina</u> van mijn <u>persoonlijke website</u>, van hieruit kan u naar de rest van mijn website surfen.</p>
<h3><font color="#000000">Welkom</font></h3>
<p>Ik heet u van harte welkom op mijn website. Veel plezier op deze site, <i>en kom nog eens een keertje terug</i>!</p>
<p align="right">Deze website wordt regelmatig bijgewerkt.</p>
<p>Op mijn <b>persoonlijke website</b> kan je heel wat informatie vinden over mijzelf, en mijn interesses.</p>
<ul>
  <li>Over mijzelf</li>
  <li>Over mijn hobbies
      <ol>
        <li>Fotografie</li>
        <li>Website's maken</li>
      </ol>
    </li>
  <li>Enkele links</li>
</ul>
</body>
</html>

Om de voorbeeldpagina te zien, klik hier.

Klik hier om naar "de tekstgrootte" te gaan.



Seniorennet