De kleur van tekst in HTML veranderen

Pdf downloaden
Bijdragen van wikiHow-redactie

Pdf downloaden

HyperText Markup Language, of in verkorte vorm, HTML, is de basis voor al die webpagina's waar we gebruik van maken op internet. Wat je ook ziet in je browser is gecodeerd in een versie van HTML. Dat geldt ook voor de kleuren van het lettertype. Hier volgen een paar eenvoudige voorbeeld om als gids te dienen bij het leren gebruiken van een aantal standaard HTML-tags om de kleur van tekst te wijzigen met behulp van de <font> tag.

Stappen

Pdf downloaden
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1f\/Change-Text-Color-in-HTML-Step-1-Version-4.jpg\/v4-460px-Change-Text-Color-in-HTML-Step-1-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1f\/Change-Text-Color-in-HTML-Step-1-Version-4.jpg\/v4-728px-Change-Text-Color-in-HTML-Step-1-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    HTML-lettertypes worden meestal aangegeven met hexadecimale codes die zich vertalen in RGB-kleuren. Er zijn 6 karakters voor elke mogelijke kleur.
    • Bijvoorbeeld, rood = ff0000, groen = 00ff00 en blauw = 0000ff. In hex, 00 = nul en ff = 255, de maximale waarde van RGB-kleurendefinities. Hoe hoger het nummer, des te feller te kleur. Bijvoorbeeld, ffffff = wit, en 000000 = zwart.
    • Alle kleuren zijn opgebouwd uit verschillende combinaties van de bovenstaande cijfers en letters.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e2\/Change-Text-Color-in-HTML-Step-2-Version-4.jpg\/v4-460px-Change-Text-Color-in-HTML-Step-2-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e2\/Change-Text-Color-in-HTML-Step-2-Version-4.jpg\/v4-728px-Change-Text-Color-in-HTML-Step-2-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    De syntax voor het toevoegen van de hexadecimale kleurwaarden aan je lettertype is eenvoudig. We gebruiken de tekst "Lorem ipsum dolores sit amet" als voorbeeld. We gaan het woord "dolores" turquoise maken. Hiervoor gebruiken we de <font> tag, als volgt:
    • Lorem ipsum <font>dolores</font> sit amet.
    • Merk op dat dit nu nog geen effect heeft. Wanneer we er een kleurvariabele aan toevoegen wordt het wat interessanter:
    • Lorem ipsum <font color = "40E0D0"> dolores </font> sit amet.
    • Merk op dat als je dit in de praktijk probeert, de tag van het lettertype niet in je tekst zult zien. In plaats daarvan ziet je tekst er als volgt uit:
    • Lorem ipsum dolores sit amet.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/70\/Change-Text-Color-in-HTML-Step-3-Version-4.jpg\/v4-460px-Change-Text-Color-in-HTML-Step-3-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/70\/Change-Text-Color-in-HTML-Step-3-Version-4.jpg\/v4-728px-Change-Text-Color-in-HTML-Step-3-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Elk deel van de lettertype-tag dient een specifiek doel, dus is het belangrijk om te weten waar elk onderdeel geplaatst moet worden en wat het doet.
    • De <font> tag zelf geeft aan dat de tekst die volgt, de regels op moet volgen die in de <font> declaratie worden aangegeven. Wanneer we er "color" aan toevoegen, houdt dit in dat alles wat na de <font color = "40E0D0"> tag komt de kleur zal krijgen die we hebben aangegeven. In dit geval een turquoise kleur, zoals aangegeven door de HTML-waarde "40E0D0", aanhalingstekens niet te vergeten.
    • Om de standaardkleur weer te herstellen sluit je de lettertype-tag af met een schuine streep naar voren: </font>. In ons voorbeeld is het woord "dolores" het enige woord dat turquoise is gekleurd.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/db\/Change-Text-Color-in-HTML-Step-4-Version-4.jpg\/v4-460px-Change-Text-Color-in-HTML-Step-4-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/db\/Change-Text-Color-in-HTML-Step-4-Version-4.jpg\/v4-728px-Change-Text-Color-in-HTML-Step-4-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Er zijn 256 kleuren in het standaard HTML-spectrum en hoewel je iets als Photoshop of een website zoals HTML color codes kunt gebruiken als bron om je gewenste kleur te kiezen, kun je ook de naam van een kleur als 147 gebruiken. De standaardkleuren zijn er allemaal: rood, groen ,blauw, geel, zwart en wit, en nog veel meer.
    • Bijvoorbeeld, in plaats van "40E0D0" te gebruiken, kun je ook gewoon zeggen "Lorem ipsum <font color = "turquoise"> dolores </font> sit amet.
    • Voor een volledige lijst met namen van kleuren die in HTML-code worden gebruikt, ga je naar w3schools .com
    Advertentie


Tips

  • Overdrijf het niet te veel met kleur-tags. Vroegere websites die lettertypekenmerken overmatig gebruikten zagen er zelfs in de begindagen van het internet vreselijk uit. Ze blijven lelijker dan lelijk, tot op de dag van vandaag!
  • Als je weet hoe je om moet gaan met CSS (Cascading Style Sheets), dan kun je dat beter gebruiken. De tag <font> dateert van HTML 3.2 en wordt niet veel meer gebruikt. Een voorbeeld van de kleur rood, aangegeven met CSS, is bijvoorbeeld: .highlighted { color: red; } in het CSS-bestand en <span class="highlighted">jouw tekst komt hier </span> in het HTML-bestand, of zo je wilt, <span style="color: red;">jouw tekst komt hier </span>, wat meestal veel gemakkelijker is om te gebruiken dan de tag <font> zoals hierboven aangegeven, zeker als het gaat om andere functies, zoals het wijzigen van het lettertype of de lettergrootte.
Advertentie

Gerelateerde artikelen

Commentaar toevoegen aan HTML
XML bestanden openen
De broncode van een webpagina bekijken
Spaties in HTML toevoegen
Een onschuldig virus creëren
De hex code van een kleur achterhalen op je computer
Programmeren in Python
Notepad gebruiken
Gegevens toevoegen aan een draaitabel in Excel
Programmeren in C
Een SQL Server database maken
Tekst centreren in HTML
Een HTML bestand omzetten naar Word
HTML bestanden bewerken
Advertentie

Bronnen

  1. HTML Color Codes
  2. w3schools.com

Over dit artikel

In andere talen
Deze pagina is 44.824 keer bekeken.

Was dit artikel nuttig?

Advertentie