Het wijzigen van een lettertype (lettertype, lettergrootte en tekstkleur) gaat in HTML met de <font>-tag. De <font>-tag heeft een aantal attributen.
Het lettertype wijzigen gaat met het face attribuut. Hier is een voorbeeldje:
<html>
<head>
<title>Titel van de website</title>
</head>
<body>
<font face="Comic Sans MS">
Deze tekst is in het lettertype Comic Sans MS
</font>
</body>
</html>
<html>
<head>
<title>Titel van de website</title>
</head>
<body>
<font face="Comic Sans MS, Arial, Courier New">
Deze tekst is in het lettertype Comic Sans MS, of als je
systeem dat niet ondersteunt in Arial, of als je systeem dat
ook niet ondersteunt in Courier New.
</font>
</body>
</html>
Je kunt in HTML ook de lettergrootte veranderen. Dat gaat ook met de <font>-tag, met het size-attribuut.
Je kunt een absolute waarde opgeven, of een relatieve waarde.
De tekstgrootte is altijd tussen 1 en 7. 1 is de kleinste tekstgrootte, en 7 is de grootste tekstgrootte.
Hier een voorbeeldje van de grootste lettergrootte (7) en de kleinste lettergrootte (1):
<html>
<head>
<title>Titel van de website</title>
</head>
<body>
<font size="7">
Deze tekst is in lettergrootte 7, dat is de grootst mogelijke lettergrootte.
</font>
<br>
<font size="1">
Deze tekst is in lettergrootte 1, dat is de kleinst mogelijke lettergrootte.
</font>
</body>
</html>
<html>
<head>
<title>Titel van de website</title>
</head>
<body>
<font size="+1">
Deze tekst is 1 groter dan normaal.
</font>
<br>
<font size="-1">
Deze tekst is 1 kleiner dan normaal.
</font>
</body>
</html>
Ook de tekstkleur kun je in HTML veranderen met de <font>-tag, deze keer met het color-attribuut. Dat werkt zo:
<html>
<head>
<title>Titel van de website</title>
</head>
<body>
<font color="red">
Deze tekst is rood.
</font>
<br>
<font color="green">
Deze tekst is groen.
</font>
</body>
</html>
Als je het lettertype, de lettergrootte en de tekstkleur tegelijk wilt veranderen, is het niet nodig om 3 keer de <font>-tag te gebruiken, maar je kunt, net zoals bij alle andere tags, attributen achter elkaar zetten:
<html>
<head>
<title>Titel van de website</title>
</head>
<body>
<font color="purple" size="5" face="Courier New">
Deze tekst is paars, heel groot en lettertype Courier New.
</font>
</body>
</html>
Je kunt nu ook verschillende lettertypes, lettergroottes en tekstkleuren gebruiken. In de volgende les leer je hoe je afbeeldingen kunt invoegen.
⇒ Ga verder met Les 5: Plaatjes
← Ga terug naar Les 3: Testopmaak
↵ Terug naar de HTML-cursus
Simon de Vries
info@simondevries.com