Met simpele html kleurcodes je tekst markeren

Met simpele html kleurcodes je tekst markeren

Tekst markeren met html kleurcodes zorgt dat belangrijke tekst in het oog springt. Een plugin heb je niet nodig; het is een kwestie van een piepklein stukje code invoegen.

NB: Je kán hier natuurlijk in WordPress wel een plugin voor gebruiken. Daarover lees je onder de kleurcodes meer.

Gekleurde tekst valt op. Maar kijk uit: mensen kunnen denken dat het een linkje is! Tekst tegen een felgekleurde achtergrond trekt veel meer de aandacht. Tekstkleur aanpassen is meestal een ingebouwde functie; tekst markeren doe je met html kleurcodes.

Ik heb het over html, de universele taal op internet. Deze methode werkt dus niet alleen op WordPress websites maar op alle mogelijke platformen. Je moet wel zelf even kijken waar je de html-kleurcode kan invoegen. De volgende alinea laat zien hoe dit in WordPress gaat.

Schakel over naar de teksteditor (WordPress)

Een kleurcode invoegen doe je niet in de visuele editor maar in de teksteditor, zie afbeelding.

Kleurcodes invoegen in de teksteditor van wordpress

Niet schrikken van wat je nu ziet. We noemen dit de broncode. Let niet op de coderingen en verander er ook niets aan. Zoek gewoon de tekst op die je wilt markeren.

Kleurcode invoegen met span style (ook niet-WordPress)

Als je de tekst geel wilt markeren, is dit de code:

<span style=”background-color: yellow;”>belangrijke tekst</span>

Wil je de tekst zelf geel maken, dan gebruik je:

<font color=”yellow;”>belangrijke tekst</font>

Wil je een andere kleur, dan kan dat. Om helemaal in control te zijn, gebruik je de zogeheten heximale waarde van de kleur. Op de plaats waar ‘yellow’ stond, zet je dan de kleurcode #ffff00. Switch je nu terug naar de visuele editor, dan zie je dat de tekst is gemarkeerd.

Yellow werkte in dit geval prima, maar niet alle kleurcodes hebben een html-naam. Dit donkergeel bijvoorbeeld (#f3c951) moet je echt definiëren met de heximale kleurcode.

Kleurcodes: html-naam en heximale waarde

Let erop dat gemarkeerde tekst wel leesbaar blijft!

geel html-naam: yellow, heximale waarde: #fff000

rood html-naam: red, heximale waarde: #ff0000

lichtblauw html-naam: aqua, heximale waarde: #00ffff

lichtgroen html-naam: lime, heximale waarde: #00ff00

goud html-naam: gold, heximale waarde: #ffd700

oranje html-naam: orange, heximale waarde: #ffa500

roze html-naam: pink, heximale waarde: #ffc0cb

fuchsia html-naam: fuchsia, heximale waarde: #ff00ff

zilver html-naam: silver, heximale waarde: #c0c0c0

Op een beeldscherm is elke kleur een mengeling van rood, groen en blauw (rgb-kleuren). Elke kleur kent 255 tinten. Dat betekent dat er 256³ rgb-kleuren zijn: dat zijn 16.777.216 verschillende kleuren. Keuze genoeg en genoeg keuze om keuzestress te krijgen 🙂

Maar… lang niet alle kleuren hebben een eigen html-naam en zijn lastiger te onthouden. Bekijk een keer deze lijst met html-kleurcodes bij naam en kleurcode. Kies er een paar uit die je bevallen en gebruik die voor tekstmarkingen. Je website is geen kermis.

Nogmaals, dit werkt zowel met WordPress als op andere platformen.

Kleurcodes in WordPress: plugin WP Edit

Dit kan dan weer wel alleen in WordPress. Ik ben er geen fan van om overal plugins voor te installeren. Plugins vertragen je website, en dat wil je niet. Ik houd van schone code, en dan is bovenstaande manier echt het beste.

Maar wil je, behalve tekst markeren, méér opties voor tekstbewerking, installeer dan de WordPress plugin WP Edit. Met deze plugin kan je onder andere gemakkelijk tabellen maken (in alle kleuren van de regenboog natuurlijk!).

Tekst markeren… gebruik kleurcodes met mate

Vetgedrukt, gekleurde tekst, emoji’s, gemarkeerde tekst, uitroeptekens: het werkt, maar alleen als je het selectief toepast.  Zeven gekleurde alinea’s vallen niet op. Dit irriteert alleen.

Het valt me op dat tekst markeren in zakelijke blogs weinig gebeurt. Alleen op verkooppagina’s zie je af en toe kleurcodes. Misschien omdat het een wat minder bekende optie is? In elk geval: jij weet het nu. Enjoy!

Kende jij deze shortcut om met kleurcodes tekst te markeren al?

 

Ook interessant voor je:

 

Heb je ondernemers in je netwerk die wat kunnen hebben aan deze informatie? Deel dan dit artikel. Je doet er ook mij een groot plezier mee!

27 reacties op “Met simpele html kleurcodes je tekst markeren

  1. Jetske schreef:

    Ik heb het geprobeerd op mijn weblog, maar het lukt niet. Ik werk met Pivot. Ik wilde graag het hartje rood hebben. Met tekst lukt het ook niet. Kun je mij adviseren?

    1. Jessie schreef:

      Ai, van Pivot heb ik geen kaas gegeven. Sorry! Misschien weet Google er raad mee…

  2. Chantal Govaarts schreef:

    Je artikel komt als geroepen. Ik was er net naar op zoek. Ik kon een blogartikel niet publiceren zonder deze optie, maar ik kon hem niet vinden. En dan kom je erachter dat het kinderlijk eenvoudig is. Maar je moet het even weten he?!

    Fijn! Kan ik mijn artikel af gaan maken. WP Edit ga ik ook even bekijken. Bedankt voor de tip weer!

  3. Robin schreef:

    Wel leuk om te weten dankje

  4. Neeltje schreef:

    Ja, ik kende de shortcut, want ik moest op de middelbare school websites maken haha 🙂

    1. Jessie van Loon schreef:

      Tja, dan is dit gesneden koek. Bedankt voor je reactie!

  5. Janet schreef:

    Ik doe belangrijke zaken dik- of schuingedrukt. Dit werkt voor mij prima.

  6. An schreef:

    In sommige teksten passen zo’n markeringen wel. Leuk artikel!!

    1. Jessie van Loon schreef:

      Dankjewel An!

  7. Bianca Schrijft schreef:

    Zelf vind ik het in online artikel niet prettig, markeringen. Doordat er licht vanaf komt, knalt het mijn ogen in. Hierdoor maak ik er zelf ook geen gebruik van.

    1. Jessie van Loon schreef:

      Bianca, ik moet ineens denken aan vroeger op school. Je had een proefwerk en wilde NIETS vergeten; bij sommige van mijn vriendinnen resulteerde dat in kantjes vol aantekeningen vol markeringen. Vrijwel alle tekst was geel, roze of groen. Daarbij had ik hetzelfde als jij bij online artikelen; dat het in je ogen knalde 🙂

  8. Nicole Orriëns schreef:

    Ja, dit heb ik wel eens gezien. Ik moet hiermee altijd oppassen, want ik ben nogal dol op kleurtjes. Mijn valkuil zou zijn dat ik teveel kleurtjes ga gebruiken ; )

    1. Jessie van Loon schreef:

      Ha Nicole, je ként je valkuil dus dan zal het wel meevallen!

  9. Melissa schreef:

    Dit vind ik zelf echt totaal niet fijn lezen. Zou het dan ook niet snel gebruiken. Wel handig voor als je het wel fijn vindt.

    1. Jessie van Loon schreef:

      Wat mij betreft gebruik je tekstmarkering daarom heel sporadisch, en nooit voor complete alinea’s. Dan valt de extra inspanning om te lezen mee en komt de boodschap wel aan. Met gele markering blijft tekst wel te doen, maar dat is persoonlijk!

  10. Chaya schreef:

    Altijd handig om te weten indien nodig. Het valt in ieder geval heel erg op.

    1. Jessie van Loon schreef:

      Ja, best wel!

  11. Felice Veenman schreef:

    Altijd leuk, weer een beetje wijzer in HTML.

    1. Jessie van Loon schreef:

      Mee eens. Een beetje HTML kennen is altijd handig!

  12. Amelie schreef:

    Wat handig om te kunnen gebruiken!

    1. Jessie van Loon schreef:

      Ha Amelie, ben benieuwd of ik tekstmarkeringen in jouw blogs ga zien!

  13. Sofie Katelijne schreef:

    Klinkt voor mij persoonlijk nogal ingewikkeld, hahaha. Ik heb gelukkig iemand die de technische kant van mijn blog op zich neemt 🙂

    1. Jessie van Loon schreef:

      Hm, is het zo erg? 🙂

  14. Blog & Beauty schreef:

    De shortcut kende ik nog niet. Voor mijn blog gebruik ik kleuren voor een linkje, en voor iets dat ik wil dat het opvalt doe ik cursief en of vet gedrukt.

    1. Jessie van Loon schreef:

      Misschien ook dit eens proberen, is weer eens wat anders 🙂

  15. Lodi schreef:

    Heel duidelijk artikel, en zeker met mate, haha te veel is ook niet goed. Die kleurcodes die ken ik.

    1. Jessie van Loon schreef:

      Ha Lodi, daarom was het zo leuk om het in dit artikel zo mateloos te ‘mogen’ doen…

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Share
Tweet
Pin
Share

Koekje erbij? Deze website heeft cookies nodig om te kunnen draaien. Klik op OK of op NEE. Maak je geen keuze en blijf je op deze site, dan ga je automatisch akkoord met de cookies. Je kan op de privacy-pagina je toestemming altijd aanpassen.

Cookie settings

Vink aan welke cookies je toestaat op deze website.

FunctioneelFunctionele cookies zorgen ervoor dat de website correct kan draaien op alle apparaten.

AnalytischMet analytische cookies kunnen we de website optimaliseren, zoals op gebied van gebruiksvriendelijkheid.

Social mediaMet sociale media cookies kunnen we je gepersonaliseerde content laten zien op social media.

OverigeDit gaat om 3rd party cookies die niet vallen onder social media cookies of advertentie cookies.