5.1: Tekstdecoraties
We hebben tot nu toe alleen nog maar de tekst in het midden gezet door de code: <p style="text-align: center">Tekst centreren</p>. Maar we willen natuurlijk ook andere dingen kunnen aanpassen van de tekst, zoals bijvoorbeeld de grootte en de kleuren van een tekst. Hieronder zijn enkele decoratieve opties voor tekst opgenomen.
5.1.1: Lettergrootte
Je hebt reeds geleerd hoe je met <hn> koppen in afwijkende lettergroottes kunt maken. Daarbij werd ook aangegeven dat je dat element beter niet gebruikt om letters aan te passen in een tekst. De reden daarvoor is eenvoudig: voor en na een kop wordt altijd een blanco regel ingevoegd, ook al maak je geen gebruik van de <p> of <br>.
Om grotere, of juist kleinere letters te gebruiken kunnen we een extra style-optie meegeven aan bijvoorbeeld een paragraaf <p>. Deze style-optie is: font-size: met hierachter een getal met daarachter px die de grootte van het lettertype aangeeft in pixels.
Voorbeelden verschillende groottes:
<p style="font-size: 5px;">Tekst met grootte 5</p>:Tekst met grootte 5
<p style="font-size: 10px;">Tekst met grootte 10</p>:Tekst met grootte 10
<p style="font-size: 20px;">Tekst met grootte 20</p>:Tekst met grootte 20
<p style="font-size: 50px;">Tekst met grootte 50</p>:Tekst met grootte 50
- Let op: Je kunt meerdere style-attributen (attribuut = eigenschap en de waarde van die eigenschap) in één style-element zetten. Je moet dan iedere attribuut afsluiten met een ; (puntkomma).
- Voorbeeld: <p style="text-align: center; font-size: 12px;">Tekst in het midden met tekstgrootte 12 pixels</p>
-
Het opnemen van het het woord style binnen één en hetzelfde element is NIET toegestaan.
- Foutief Voorbeeld: <p style="text-align:center" style="font-size:13px">
Wil je de tekstgrootte van de hele webpagina aanpassen, kun je deze style-optie ook toepassen in de body: <body style="font-size: 20px;">
5.1.2: Tekstkleuren
Om de kleur van de tekst aan te passen, gaan we weer een ander stijl attribuut gebruiken. Deze is genaamd color: gevolgd door een engelse benaming van een kleur zoals je die in hoofdstuk 4 geleerd
hebt.
Bijvoorbeeld:
<p style="color: red;">Tekst in de kleur rood</p>
Tekst in de kleur: red
<p style="color: navy;">Tekst in de kleur marineblauw</p>
Tekst in de kleur: marineblauw
De beperkte mogelijkheden van de kleurnamen kun je uitbreiden met kleurcodes. Zowel de RGB-kleurcodes als de Hexadecimale kleurcodes kun je hier gebruiken. Zo heb je ruim 16,7 miljoen mogelijke kleuren tot je beschikking.
Voorbeelden:
<p style="color:rgb(255,128,0);">Tekst in de kleur oranje</p>
Tekst in de kleur oranje <p style="color:#a2a2a2;">Tekst in de kleur grijs</p>
Tekst in de kleur grijs
5.1.3: Lettertypen
Je kunt je webpagina ook aanpassen door gebruik te maken van verschillende soorten lettertypen. Hiervoor gebruik je weer het style-element, maar dit keer met als attribuuteigenschap: font-family: en als attribuutwaarde het gewenste lettertype.
De volgende zaken zijn hierbij belangrijk om te weten:
- Je maakt je website voor de bezoekers. Het is van belang wat zij voor een font/lettertypes geïnstalleerd hebben op hun computer. Daarom noem je vaak meerdere lettertypes. Van links naar rechts wordt er dan gekeken of dat lettertype aanwezig is op de computer van de bezoeker.
- Een lettertype dat uit meerdere woorden bestaat met daartussen een spatie, wordt als attribuutwaarde tussen 'enkele quotes' gezet (bijv. 'Times New Roman')
Hieronder wat voorbeelden:
- <p style="font-family: Arial, Helvetica, sans-serif">Arial</p>
- <p style="font-family: 'Times New Roman', Times, serif">Times New Roman, Times, serif</p>
- <p style="font-family: 'Courier New', Courier, monospace">Courier New</p>
- <p style="font-family: Georgia, 'Times New Roman', Times, serif">Georgia</p>
- <p style="font-family: Verdana, Arial, Helvetica, sans-serif">Verdana</p>
- <p style="font-family: Geneva, Arial, Helvetica, sans-serif">Geneva</p>
5.1.4: Andere tekstdecoraties:
Bold, italic, onderstreept
We kunnen teksten ook dikgedrukt, schuin of onderstreept maken. Deze opties kom je ook vaak tegen in bijvoorbeeld Word.
Om teksten dikgedrukt te maken heb je twee mogelijkheden:
- <b></b>: Maakt tekst gewoon vetgedrukt
- <strong></strong>: Maakt tekst vetgedrukt maar maakt de vetgedrukte tekst ook belangrijker ten opzichte van andere tekst. Zoekmachines vinden een tekst tussen <strong></strong> in je website dan ook belangrijker dan een tekst die tussen <b></b> staat
Schuingedrukte tekst heeft ook twee mogelijke vormen:
- <i></i>: Maakt tekst gewoon schuingedrukt (italic)
- <em></em>: Maakt tekst schuingedrukt maar maakt de schuingedrukte tekst ook belangrijker ten opzichte van andere tekst. Dat werkt dus precies hetzelfde als bij vetgedrukt.
PS: em komt af van het Engelse woord "emphasize" hetgeen benadrukken betekent.
Om een tekst te onderstrepen kun je gebruikenmaken van de elementen <u></u>, dit komt af van het woord "underline". Alles wat je tussen deze twee elementen zet wordt dus onderstreept.
Markeerstift <mark></mark>
Sinds html versie 5 is het mogelijk om tekst te markeren. Het lijkt er dan op alsof je er met een
markeerstift overheen gegaan bent. Plaats de te markeren tekst eenvoudig tussen <mark></mark>.
Standaard is de markering geel maar je kunt de kleur envoudig aanpassen door de in hoofdstuk 4 geleerde methoden te bgebruiken om een kleur te kiezen (kleurnaam, rgb- of hexadecimale kleur). Hiervoor gebruik je de attribuuteigenschap background-color in
het mark-element:
Deze markeerstift is
groen <mark style="background-color:green">groen</mark>
Deze markeerstift is
aqua <mark style="background-color:aqua">aqua</mark>