• Finalist Infinity Blog Award banner

Stap 6 – Fonts gebruiken

Laatste update: 2 maart 2019

Tekst laten opvallen kan ook met gebruik van de FONT-tag. Hiermee kun je, onder andere, de grootte van de tekst bepalen. Dit geldt dan alleen voor de tekst, dat binnen de FONT-tag is gezet.

Let op! Het is heel leuk om dit te weten, maar we gebruiken inmiddels CSS hiervoor. Ik voorspel dat de FONT-tag uiteindelijk zal gaan vervallen.

Lettergrootte aanpassen

Pas de tekst aan en zorg dat de volgende code verwerkt wordt: <FONT SIZE=4>.

Voorbeeld:

<html>
<head>
<title>mijn eigen website</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<p>Nora Tol begon met het aanbieden van webdesigndiensten sinds <u>midden jaren '90</u> met
haar eerste bedrijf <i>Nora Tol Virtual Publishing</i>. En nu weer, met haar tweede bedrijf
<i>ElNorado Productions</i></p>
<p>Al snel groeide de vraag naar <u>andere diensten</u> als het ontwerpen van logo's,
webhosting, online marketing en het maken van online content. Diensten die toegevoegd
werden.</p>
<p>Bekijk haar website voor meer informatie.<br /><b><font size="4">Of neem contact
op</font></b>.</p>
</body>
</html>

Zoals je ziet moet de FONT-tag afgesloten worden. Alle tekst tussen <FONT SIZE=4> en </FONT> wordt nu een slag groter weergegeven, dan de rest van de tekst in het document. SIZE 3 is min of meer de standaard instelling. Al weet je dat nooit zeker. Mensen kunnen zelf alles instellen in de browser. Ze kunnen ook nog in en uitzoomen. Dat is waarom we graag CSS gebruiken. Daarin stel je de lettergrootte in punten of pixels in. Dat werkt overal hetzelfde.

In ieder geval kun je tekst vergroten, zoals in het voorbeeld, maar ook verkleinen (maak dan de waarde kleiner dan 3). Ook negatieve waarden (-1) worden door de meeste browsers gelezen.

Lettertype aanpassen

Naast het aanpassen van de grootte kun je ook het lettertype zelf aanpassen. Het standaardlettertype dat een browser gebruikt is veelal Times New Roman. Zo wil ik het hele document weergeven in Arial:

<html>
<head>
<title>mijn eigen website</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<font face="Arial">
<p>Nora Tol begon met het aanbieden van webdesigndiensten sinds <u>midden jaren '90</u> met
haar eerste bedrijf <i>Nora Tol Virtual Publishing</i>. En nu weer, met haar tweede bedrijf
<i>ElNorado Productions</i></p>
<p>Al snel groeide de vraag naar <u>andere diensten</u> als het ontwerpen van logo's,
webhosting, online marketing en het maken van online content. Diensten die toegevoegd
werden.</p>
<p>Bekijk haar website voor meer informatie.<br /><b><font size="4">Of neem contact
op</font></b>.</p>
</font>
</body>
</html>

Met de FACE-attribute kun je een lettertype instellen. Elke computer heeft standaard lettertypes geinstalleerd gekregen. Die komen vaak overeen en kun je het beste gebruiken. Gebruik je een ander font (lettertype), die een ander niet snel zal op zijn apparaat heeft staan, dan geeft de browser al die tekst aan in Times New Roman. Dat zou jammer zijn. Omdat dit al heel lang een probleem voor webdesigners was, zijn er wat oplossingen bedacht. Je kunt True Type fonts installeren op de site of gebruikmaken van Google Fonts. Je hebt hier wel CSS voor nodig om het daadwerkelijk te gebruiken. Daarom denk ik dus niet dat de FONT-tag zal overleven.

Meerdere FONT-instellingen op een pagina

Zoals je ziet, open ik de nieuw FONT-tag aan het begin van de tekst en eindig ik hem helemaal aan het eind, zelfs wanneer ik nog een andere FONT-tag gebruik. Het is met HTML mogelijk meerdere tags “om elkaar heen” (nested) te gebruiken.

In het voorbeeld hierboven, geef ik aan dat het lettertype Arial gebruikt moet worden voor alle tekst, inclusief de tekst die ik eerder vergroot heb. Ik kan zelfs nog een ander formaat instellen:

<html>
<head>
<title>mijn eigen website</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<font face="Arial" size="2">
<p>Nora Tol begon met het aanbieden van webdesigndiensten sinds <u>midden jaren '90</u> met
haar eerste bedrijf <i>Nora Tol Virtual Publishing</i>. En nu weer, met haar tweede bedrijf
<i>ElNorado Productions</i></p>
<p>Al snel groeide de vraag naar <u>andere diensten</u> als het ontwerpen van logo's,
webhosting, online marketing en het maken van online content. Diensten die toegevoegd
werden.</p>
<p>Bekijk haar website voor meer informatie.<br /><b><font size="4">Of neem contact
op</font></b>.</p>
</font>
</body>
</html>

Hierdoor werkt SIZE 4 alleen voor de twee laatste regel tekst, terwijl SIZE 2 voor de rest geld. Zelfs voor eventuele tekst die ik onder mijn laatste zin zou plaatsen.

Ookal werkt bovenstaande prima, het is eigenlijk heel slordig werk. Omdat we nu vaak de paragraph-tag, meer als een element beschouwen op de pagina, zou dit eigenlijk netter zijn:

<html>
<head>
<title>mijn eigen website</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<p><font face="Arial" size="2">Nora Tol begon met het aanbieden van webdesigndiensten sinds
<u>midden jaren '90</u> met haar eerste bedrijf <i>Nora Tol Virtual Publishing</i>. En nu
weer, met haar tweede bedrijf <i>ElNorado Productions</i></font></p>
<p><font face="Arial" size="2">Al snel groeide de vraag naar <u>andere diensten</u> als het
ontwerpen van logo's, webhosting, online marketing en het maken van online content. Diensten
die toegevoegd werden.</font></p>
<p><font face="Arial" size="2">Bekijk haar website voor meer informatie.</font><br />
<b><font size="4">Of neem contact op</font></b>.</p>
</font>
</body>
</html>

We gaan door met de eerste versie.

Laten we maar snel verder gaan naar stap 7. We gaan kleuren!

Bookmark the permalink.

Comments are closed.