Text Formatting

--oo00oo--

Bold, Italic etc... These are the most common formatting tools in any word processor. They've been supported in most of the hundreds of web browsers since the start. And as such, they're some of the easiest tools to use. Let's just have a quick look at what's on offer to your web browser :
Effect Tag
BOLD <B>word</B>
ITALIC <I>word</I>
UNDERLINE <U>word</U>
BLINKING <BLINK>word</BLINK>
STRIKE THROUGH <S>word</S>
BIG TEXT <BIG>word</BIG>
SMALL TEXT <SMALL>word</SMALL>
SUPERSCRIPT SUBSCRIPT <SUP>word</SUP>
<SUB>word</SUB>

If any of the above don't look like the description, then your web browser can't handle that type of text. (I've found Netscape 3 to be a little buggy with regards to blinking text). There are several alternatives to these though :

BOLD ITALIC
STRONG EMPHASIS

CITE

Hopefully all appear in your browser as they should. To use these tags, simply place them between the <BODY> </BODY> tags.

Font Sizes The traditional use of font sizes was to create headings and sub headings. That was back in the days when most web pages were text based. They used the headings tags. There were 6 of them, <H1>word</H1> <H2>word</H2> <H3>word</H3> <H4>word</H4> <H5>word</H5> <H6>word</H6>. H1 was the largest, and H6 was the smallest. You could add ALIGN=CENTER, LEFT or RIGHT to give you a heading that was either centre, left or right aligned. So you could have <H3 ALIGN=RIGHT>word</H3> to get the following :

word

This has now pretty much become obsolete, with the arrival of the <FONT> tag. Let's explore it a little further.
The <FONT> tag is switched on and off like all tags, and it has the following properties :

SIZE= COLOR= FACE=

Size can be a number from 1 to 7, with 7 being largest and 1 smallest (opposite to the heading tags). Or it can be incremental, for example you could have SIZE=+1 or SIZE=-2. This is useful for Text Effects.
Color determines the colour of the enclosed text. It's represented in a hexadecimal value, two letters for Red, two for Green and two for Blue. See Colours for more information.
Face is the actual font you want the browser to se. For example you might want it to use Black Chancery, Technical or Times New Roman. All of the Guide series pages use special fonts. But of course, if the person viewing your web page hasn't got the fonts, it won't look quite like you want it to. For this reason you can specify more than one font. So we could have <FONT FACE="BLACK CHANCERY, VIVANTE-DTC">word</FONT> to make word appear in either Black Chancery or Vivante DTC, whichever (if any) the browser has. To make things easier for the person viewing your site, zip up the fonts and include a link to them like the one for this site.

Text Effects You can create many wonderful effects with the Font tag. For example, a "Small Caps" effect as seen in MS Word 6.
HERE'S AN EXAMPLE.

This effect is pretty useful for titles. To see it used better, visit my gallery.

To achieve this effect, I simply added a font tag around the first letter of each word, increasing the size by two. so it looked like this :
<FONT SIZE=+2>H</FONT>ERE'S <FONT SIZE=+2>A</FONT>N <FONT SIZE=+2>E</FONT>XAMPLE.

See, it's not all that hard. It's just telling the browser to increase the size of the letters contained between the tags by two steps. Try and recreate this :
ROLLER COASTER

Text Colours This is the COLOR= part of the font tag. To get more information on colours, go to the Colours part of this guide. Look, I'm RED!!, well, I hope I am. If your browser didn't display that as red, then you need to upgrade. This feature is available in Netscape from version 2 upwards, and in IE. To achieve it I did the following :
<FONT COLOR="#FF0000">Look, I'm RED!!</FONT>
Remember, the first two hexadecimal numbers are for Red, the second are for green and the third are for blue. Hexadecimal (base 16) numbers go from 0 to 15. However, in order to represent a two digit number (such as 12) in one digit, it uses a letter, so the true rang of numbers is 0123456789ABCDEF.
Combining Font Tags You can combine font tags, for example, most of the text on this page is reduced by 1 step. So we can have multiple font tags to create the "Small Caps" effect. For example :
<FONT SIZE=-1><FONT SIZE=+2>H</FONT>ELLO <FONT SIZE=+2>W</FONT>ORLD</FONT>.
Tells the browser to represent the words enclosed at -1 step. Then the extra font tags say, hang on I actually want this bit +2.