Fonts are a fun way to express yourself. Selecting fonts in HTML can seem clumsy compared to just choosing them from a drop-down bar on your word processing program, but it really isn't all that difficult. Of course, keep in mind that if you choose a font that is a little unusual, not everyone will have the software to view it. If that is the case, your visitor will simply see your text in the default font.
That said, here is how to select the font you want:
1) In front of the text you want in that font, type <FONT FACE="Fontname1"> where Fontname1 is the name of the font you want.
2) If you have a second choice font, as backup in case the first one can't be used on your visitor's computer, separate it with a comma after the first choice and type Fontname2. Like this: <FONT FACE="Fontname1, Fontname2">
4) At the end of the text you want displayed in that particular font, type </FONT>
So if you were putting a sentence into Verdana, with Helvetica as your second choice, it would look like this:
<FONT FACE="Verdana, Helvetica">Gerhard likes to go swimming.</FONT>
Try adding the above line to your page in NotePad.
You can also use this tag to change the size and color of your text.
Basefont
If you want all your text to be the same size, you can set it as the default. This is called the BASEFONT tag. This does not affect headers.
1) Under the <BODY> tag, type <BASEFONT SIZE="#">
Where # is a number from 1 to 7, and the default is 3. These numbers correspond to the browser's default size, which on Windows is 12, so 3=12 point. On Macs, the default is smaller, so keep in mind your text might appear smaller on Macs than it does for Windows users.
Try including a BASEFONT line under your <BODY> tag. Type <BASEFONT SIZE="1"> into your page.
So with your new changes, your page in NotePad should look like this:
And your page in the browser should look like this:
Changing the Size of Specific Sections of Text
If you want to change just a certain section of your text:
1) Type <FONT SIZE="#">, where # is a value between 1 and 7 and the default is usually 3 (12 point).
2) Write your text.
3) At the end of the text you want in that size, type </FONT>
Try making your second paragraph a little larger, by typing <FONT SIZE="4"> at the beginning of the paragraph and </FONT> at the end.
Color can really make your words jump off the page, and it makes your content a little more aesthetically appealing.
To set a default color for your entire page:
1) Inside the BODY tag, type TEXT="#AABBCC"
"AABBCC" represents the hexadecimal representation of the color. Colors in HTML are represented by 6 numbers, which correspond to a color chart. You can see a color chart to select just the right color and the hexadecimal representation of it at websites such as: http://www.html-color-codes.com/ or http://www.htmlclinic.com/colorchart.php.
Or instead of choosing a complicated hue, you can simply type <TEXT="color"> something basic like "green" or "blue". The 16 basic accepted colors are: Silver, Gray, Maroon, Green, Navy, Purple, Olive, Teal, White, Black, Red, Lime, Blue, Magenta, Yellow, and Cyan.
Make all your text indigo in your example page by changing your body tag to look like this: <BODY TEXT="indigo">
If you want to change the color of only a particular section of text, you use the FONT tag we have been using.
1) In front of the text you want to change, type either <FONT COLOR="blue"> or <FONT="#AABBCC">
2) At the end of the text you wanted changed, type </FONT>
You can specify the Font, Size, and Color all in the same tag.
Type the following line into your NotePad example page:
<FONT FACE="Verdana" SIZE="2" COLOR="red"> Pipsqueak hoped he didn't fall in the lake!</FONT>
With all your new changes, your page should now look like this in the browser:
<< Back to Part 3: Saving and Viewing Your Work | Part 5: Images and Links >>