Text Appearance

There's a lot to discuss on this topic, so I'll try to keep the "dry" bit to a minimum!

Below is a list of tags that can change the way a browser displays the text within a web page.

The following tags are determined by the set-up of your browser:-

The following tags are not altered by the set-up of your browser:-

This is by no means an exhaustive list, there are many more, but this list is intended to cover those that are most frequently used. For a full list I would recommend a publication such as HTML 4.0 Sourcebook by Ian S Graham.


Heading

<H1> ... </H1>
<H2> ... </H2>
<H3> ... </H3>
<H4> ... </H4>
<H5> ... </H5>
<H6> ... </H6>

Headings may also be aligned as follows:-
<Hn ALIGN="LEFT|CENTER|RIGHT"> ... </Hn>
where n is from 1 to 6 and the vertical bar "|" denotes "or". If nothing is specified the default is ALIGN="LEFT".

<H1>An example of Heading 1</H1>

An example of Heading 1

<H2>An example of Heading 2</H1>

An example of Heading 2

<H3>A longer example of Heading 3!</H1>

A longer example of Heading 3!

<H4 ALIGN="RIGHT">An example of Heading 4 aligned to the right</H4>

An example of Heading 4 aligned to the right

<H5>An example of Heading 5</H5>

An example of Heading 5

<H6 ALIGN="CENTER">An example of a centre-aligned Heading 6</H5>

An example of a centre-aligned Heading 6

You will note that headings appear as bold text. The size that you view these headings at is, of course, entirely dependent on the font size settings in your browser. It is possible for them to all appear the same size if the same font size is specified for each category!


Blockquote

<BLOCKQUOTE> ... </BLOCKQUOTE>

Blockquoting text can radically improve the appearance of a largely text-based web page as it has the effect of adding a left and a right margin. Here is an example:-
<BLOCKQUOTE> This is an example of Blockquoted text. It is not exactly exciting but, as you can see, it does have an improved appearance when compared with the "normal" text used elsewhere on this page! </BLOCKQUOTE>

This is an example of Blockquoted text. It is not exactly exciting but, as you can see, it does have an improved appearance when compared with the "normal" text used elsewhere on this page!

Blockquoted text can be nested.

So, just to prove the point, here is some boring text that I need to establish before I can demonstrate nested blockquoting! Once this is established simply by using the <BLOCKQUOTE> tag again the left and right margins will indent further.
To go back to the original size margins just use </BLOCKQUOTE> where you want the narrower text to end. If you don't need to end it until the finish of the whole of the text, then at the end you must have </BLOCKQUOTE> </BLOCKQUOTE>.
Now it is established, I can type something that is, once again, blockquoted within the blockquote! Various tags may be nested in HTML but you must ensure that the end tags always appear in the exact reverse order of the start tags.

Emphasize

Self-explanatary really, and very similar to italicised text.

<EM>This is an example of emphasized text.</EM>
This is an example of emphasized text.


Keyboard

A lot of the time the effect of this command can be lost in the normal text! However, let's demonstrate with an example:

We start with normal text <KBD>then switch to an example of keyboard text</KBD> before resuming normal text.

We start with normal text then switch to an example of keyboard text before resuming normal text.


Address

Another italicised form of text.

<ADDRESS>Here is an example of Address text.</ADDRESS>

Here is an example of Address text.

Big Font Size

It does what it says on the tin! (Provided your browser is correctly setup)

<BIG>Here is an example of big text.</BIG>

Here is an example of big text.


Small Font Size

Guess what?

<SMALL>Here is an example of small text.</SMALL>

Here is an example of small text.


Font Colour

There are two ways to set the colour of a font, one is a limited list of 16 "named" colours and the other allows choice from all 16.7 million colours by specifying the hex code (scale of 16, 0 to 9 are the same as in decimal, A=10, B=11, C=12, D=13, E=14 and F=15) for the specific colour required, where each colour is controlled by its RGB code (RGB being Red Green Blue) where the three values combine into one value to produce the colour. For example, 000000 (no colours at all) is black and FFFFFF (full value of all three colours) is white.
The list of the 16 standard colour names is:

Black Maroon Green Olive
Navy Purple Teal Grey
Silver Red Lime Yellow
Blue Fuschia Aqua White

<FONT COLOR="RED">Here is red,</FONT><FONT COLOR="GREEN"> and green text!</FONT>

Here is red, and green text!

<FONT COLOR="#000000">Here is black,</FONT><FONT COLOR="#999999"> and grey text!</FONT>

Here is black, and grey text!

Further information on setting colours can be found in the chapter on Background and Colours.


Font Name

This is set by specifying the name of the font you wish to use thus:-

<FONT NAME="ARIAL, HELVETICA">This text should be in either Arial font or Helvetica font.</FONT>

This text will be in either Arial font, or if that is not installed on the receiving computer, in Helvetica font.

You may specify one, two, three or more fonts, but more than two can lead to clumsy programming with large files. The browser will interpret the first font if it can, if it doesn't have that font available then it will interpret the second font and if that is not available it will ignore the instruction and use the default font.


Font Size

This is set by specifying the value of the font size you wish to use thus:-

<FONT SIZE="1">This is font size 1</FONT><FONT SIZE="5"> and this is font size 5.</FONT>

This is font size 1 and this is font size 5.

The actual size depicted on-screen does, of course, depend on the values in the individual browser's settings.


A combination of all three of these font instructions is possible:-

<FONT NAME="ARIAL, HELVETICA" SIZE="5" COLOR="AQUA">Here we set the font to either Arial or Helvetica, the size to 5 and the colour as aqua. </FONT>

Here we set the font to Arial or Helvetica, the size to 5 and the colour as aqua.


Bold

<B>The bold instruction requires the <B> ... </B> tag. </B>

The bold instruction requires the <B> ... </B> tag.


Italic

<I>The italic instruction requires the <I> ... </I>tag. </I>

The italic instruction requires the <I> ... </I> tag.


Underline

<U>The underline instruction requires the <U> ... </U> tag.</U>

The underline instruction requires the <U> ... </U> tag.


Subscript

<SUB>The subscript instruction requires the <SUB> ... </SUB>tag.</SUB>

The subscript instruction requires the <SUB> ... </SUB> tag.


Superscript

<SUP>The superscript instruction requires the <SUP> ... </SUP>tag.</SUP>

The superscript instruction requires the <SUP> ... </SUP> tag.


Preformatted

<PRE>The preformatted instruction requires the <PRE> ... </PRE>tag.</PRE>

The preformatted instruction requires the <PRE> ...
</PRE> tag.

Fixed Width Typewriter Font

<TT>The fixed width typewriter font instruction requires the <TT> ... </TT>tag.</TT>

The fixed width typewriter font instruction requires the <TT> ... </TT> tag.


Centre

<CENTER>The centre instruction requires the <CENTER> ... </CENTER> tag.</CENTER>

The centre instruction requires the <CENTER> ... </CENTER> tag.