Stap 6 – Fonts gebruiken

Het accentueren van tekst kun je ook doen met 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.

Lettergrootte aanpassen

Pas jouw 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"
ALINK="#FF9B6A" VLINK="#FF0000">
<P><B>Nora Tol Virtual Publishing</B> werd midden jaren '90 gestart, toen Nora Tol begon met het
aanbieden van haar <I>webdesign-diensten</I>.</P>
<P>Inmiddels heeft ze een <U>nieuw bedrijf</U>, ElNorado Productions, dat zich richt op het
maken en beheren van de inhoud van websites en social media.</P>
<P><FONT SIZE=4>Kijk snel op haar website voor meer informatie.</FONT>
<BR />
E-mailen kan natuurlijk ook</P>
</BODY>
</HTML>

Zoals je ziet moet de FONT-tag wel 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 kun je over het algemeen als standaard zien. Je kunt 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 Verdana:

<HTML>
<HEAD>
<TITLE>mijn eigen website</TITLE>
</HEAD>
<BODY BACKGROUND="images/background.gif" BGCOLOR="#FFFFE1" TEXT="#808080" LINK="#FF9B6A"
ALINK="#FF9B6A" VLINK="#FF0000">
<FONT FACE="Verdana">
<P><B>Nora Tol Virtual Publishing</B> werd midden jaren '90 gestart, toen Nora Tol begon met het
aanbieden van haar <I>webdesign-diensten</I>.</P>
<P>Inmiddels heeft ze een <U>nieuw bedrijf</U>, ElNorado Productions, dat zich richt op het
maken en beheren van de inhoud van websites en social media.</P>
<P><FONT SIZE=4>Kijk snel op haar website voor meer informatie.</FONT>
<BR />
E-mailen kan natuurlijk ook</P>
</FONT>
</BODY>
</HTML>

Met de toevoeging FACE, bij de FONT-tag, kun je een lettertype aangeven. Hier kun je het beste gebruik maken van de standaardfonts die in Windows en op de Mac zitten. Gebruik je een font, die een ander niet snel zal op de PC zal hebben staan, dan geeft de browser al die tekst aan in Times New Roman. Wil je persé een font gebruiken die niet standaard is, biedt hem dan eventueel aan als download.

Meerdere FONT-instellingen op een pagina

Zoals je ziet, open ik deze FONT-tag aan het begin van de tekst en eindig ik hem helemaal aan het eind van mijn tekst, zelfs wanneer ik nog een andere FONT-tag gebruik. Het is met HTML mogelijk meerdere tags “om elkaar heen” (nested) te gebruiken, zoals ze in het programmeren vaak met strings en substrings werken. In het voorbeeld hierboven, geef ik aan dat het lettertype Verdana geldt voor alle tekst, zelfs voor de tekst, die ik eerder vergroot heb.

Wanneer je het document opslaat en gaat bekijken in een browser, merk je dat Verdana van zichzelf uit al een groot lettertype is. Op Internet lijkt het dan alsof je “schreeuwt”, dus ik wil hem iets verkleinen:

<HTML>
<HEAD>
<TITLE>mijn eigen website</TITLE>
</HEAD>
<BODY BACKGROUND="images/background.gif" BGCOLOR="#FFFFE1" TEXT="#808080" LINK="#FF9B6A"
ALINK="#FF9B6A" VLINK="#FF0000">
<FONT FACE="Verdana" SIZE=2>
<P><B>Nora Tol Virtual Publishing</B> werd midden jaren '90 gestart, toen Nora Tol begon met het
aanbieden van haar <I>webdesign-diensten</I>.</P>
<P>Inmiddels heeft ze een <U>nieuw bedrijf</U>, ElNorado Productions, dat zich richt op het
maken en beheren van de inhoud van websites en social media.</P>
<P><FONT SIZE=4>Kijk snel op haar website voor meer informatie.</FONT>
<BR />
E-mailen kan natuurlijk ook</P>
</FONT>
</BODY>
</HTML>

In het voorbeeld hierboven geldt SIZE 4 alleen voor de twee laatste regels tekst. Zou ik daaronder nog meer tekst toevoegen, dan zal de eerste waarde (in dit geval dus SIZE 2) weer gelden.

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

Bookmark the permalink.

Comments are closed