In this exercise we will be
experimenting with the <FONT FACE> and the <COLOR> tags.
Open Windows Notepad and then open the example from the previous exercise.
You should have something like the example below.
<HTML>
<HEAD>
<TITLE>My Motor Parts Business</TITLE>
</HEAD>
<BODY>
<H1>My Motor Parts Business</H1>
<H2>For all your automotive needs</H2>
<H3>This site is under construction</H3>
</BODY>
</HTML>
First, change
the <H1> line so that it looks like this...
<H1><FONT
FACE="Arial">My Motor Parts Business</FONT></H1>
Now save the file, and then open up your web browser and view the above file by
using the 'File Open' option on your browser. You should end up with something
looking like this -
click
here.
The <FONT
FACE> tag changes the type face just for that line. If you moved the end font
tag </FONT>, and inserted it just before the </BODY> tag, all the
text on the page would change to the "Arial" font.
The <FONT
FACE> tag also takes as its value, a set or range of font names, surround by
quotes and separated by commas. When a browser interprets a page with <FONT
FACE> in it, it will search the system for the given font names one at a
time. If it can't find the first one, it'll try the second, and then the third,
and so on, until it finds a font that is actually installed on the system.
If it cannot find any of the listed fonts, the default font will be used
instead. So, for example, the following line of text would be rendered in Futura.
If Futura is not available, the browser will try Helvetica, and fall back on the
default if Helvetica is not available.
<H3><FONT
FACE="Futura,Helvetica">This site is under
construction</FONT></H3>
A word of
warning when using different font faces. Do not use weird and wonderful fonts on
your web pages. If a user is looking at your website, and you use a font that
the user hasn't installed on his/her computer, the web page will be viewed in
the default font face, which is usually "Times Roman".
Adding
a Little Colour.
In this example we are going to play around with different colours.
We are going to change the <H3> line so that the text is in a different
colour, Sea Green, to be exact. Edit the <H3> line so it looks like
this...
<H3><FONT
COLOR=#33DB99>This site is under construction</FONT></H3>
Now save the
file, and then open up your web browser and view the above file by using the
'File Open' option on your browser. You should end up with something looking
like this -
click
here.
Now you may be
thinking which colours I can use on my web pages, and if I type <FONT COLOR=PERIWINKLE>
will the browser know I'm looking for a light bluish grey?
The short answer is NO. Only a limited number of colours can be specified by
name (periwinkle isn't one of them), and different browsers recognize different
sets of colours. So if you want to be precise about your font colours, you'll
want to replace the name of the colour with a hexadecimal code.
Any colour that can be displayed on a monitor can be described by its RGB value
- its relative amounts of red, green and blue (each of which is expressed as a
two-digit number, such as 51 or 14 or 00.
In order for a web browser to understand the RGB values, they must each be
translated into a hexadecimal (or base-16) number. Then the resulting two-digit
hexadecimal ("hex" for short) numbers are strung together into a
single six-digit code.
So in the example above, the first two "33" stands for the red value,
the next two stands for green, and the last two for blue.
Now, if you don't' want to bother with calculating those numbers, you can
consult our colour
chart or download the freeware utility program called EyeDropper, which
is available on our Links page.
But if you're
a real do-it-yourselfer, you'll probably want to do the calculations yourself.
So grab your abacus for this exercise.
Take the example from above of Sea Green, which has the RGB values R=51, G=219
and B=153.
To translate this into hexadecimal, you should first take the value of Red - in
this case, 51 - and divide it by 16. The balance is 3.1875. The integer, 3, will
be the first number in the hexadecimal formula. The remainder (0.1875) should be
multiplied by 16, which result in the number 3. So, 51 translates to 33 in Hex.
But sometimes the numbers don't
work out as evenly; often you'll get integers and remainders that translate to
11 or 14, for instance. And in those case, we translate the two-digit number
into a single letter (that's where all the D's and B's come in), where 10=A,
11=B, 12=C, 13=D, 14=E and 15=F. This becomes relevant to our lovely Sea Green
when we calculate the hexadecimal equivalent of its Green value, which is 219.
When we divide it by 16, we get 13.69. We translate 13 to D, and then multiply
the remainder, 0.69, by 16 and get 11, which equals B
Repeat this formula for the
Blue value, and then string them together (you should get 33DB99). Don't forget
to put the "#" symbol in front. Internet Explorer allows you to
indicate colour numbers without this leading symbol but, many other browsers
don't.
Go to Top
