Add Some Variety to Your Pages !

So far we have used standard text and headings for our pages, with nothing more than horizontal lines to separate sections. It is time to be a bit more ambitious.

Get Some C O L O U R in Your Life!

Colour is a good place to start. HTML allows you to change the colour of many elements of your page. This is done by adding attributes to some tags. One word of warning; although HTML was invented by an Englishman, the major browsers were developed in America. So you had better get used to spelling color and center the American way, because that is what your browser will expect.

Let us start by changing the colour of the whole page. This can be done by adding a number of attributes to the <BODY> tag.

For example:

        <BODY bgcolor="silver" text="blue" link="red" vlink="green">
Here bgcolor sets the background colour for the page, text sets the default colour for the text, link sets the colour for a link, before the user clicks on it and vlink sets the colour for a "visited link", that is one that the user has clicked on.

In this example, I have used names for the colours. With common names, you can be pretty sure what you are going to get, but browser manufacturers have really gone over the top thinking of names for colours. Would you know what to expect if you specified "Moccasin", "Peru", or "Papayawhip"? All of these are colours recognised by some browsers! Another snag with such fanciful colours is that some may be specific to a particular browser manufacturer.

Fortunately there is an easy way of specifying exactly which colour you want. All colours on a computer screen are made by mixing together light of the three additive primary colours, Red, Green and Blue. So you can specify exactly what colour you want by writing a six digit number, where the first two digits specify the amount of red, the second two represent the amount of green, and the last two the amount of blue. This is often referred to as an RGB value. So for example 000000 represents black, 808080 represents grey, 800000 represents a medium red, 004000 represents a dark green and FFFFFF represents white.

"Hang on!", I hear you cry, "You said a number. Where did those 'F's come from?" The answer is, that the numbers are hexadecimal ones. In other words instead of each digit having ten possible values 0, 1, 2, 3, 4, 5, 6, 7, 8 and 9, they may have 16 possible values 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E and F. This means that for each of the three colours, instead of each two digit number representing one of 100 possible values, it may represent one of 256 possible values.

When using numeric values for colours, it is considered good practice to start the number with a "#" symbol. This avoids any confusion between for example "C0FFEE" intended as a number or "coffee" intended as a name. (I have to say that I have not yet come across a browser that required the "#" or indeed the quotation marks, to correctly interpret a number, and many authors leave them out.)

So if we use numeric colour values, the previous example would appear as:-

        <BODY bgcolor="#C0C0C0" text="#0000FF" link="#FF0000" vlink="#008000">
Note incidently how the standard value defined as "green" uses a value of 80 rather than FF for the RGB green value. This gives a darker green, which shows more clearly on a white background.

Anyone using a screen capable of showing "true colour" would be able to display any of the >16.7 million colours that may be represented by our 6 hexadecimal digits. However many computers and browsers operate with a much more restricted palette of colours. If we want our colours to appear as we intend on all colour screens, it is a good idea to limit ourselves to just 6 different intensities of each of the three primary colours. This still gives a pallette of 6 x 6 x 6 = 216 different colours which should be more than sufficient to add plenty of pizaz to your pages! The colour values for these so called "Browser Safe" colours are:- 00, 33, 66, 99, CC, FF. So for example a good "safe" ORANGE which will appear correctly on any colour screen can be represented by FF6600.

If you want to see the full range of colours in the Browser-Safe Palette, it can be found here on the main part of the Shotover web site.

It is worth also bearing in mind that some of your viewers may be using a monochrome screen. Whilst bright red letters on a bright blue background may be readable on a colour screen, on a monochrome screen they can both appear as the same shade of grey. It is best to try to keep a good contrast in the brightness between the text and the background.

So now go ahead and change the colour scheme used for some of your pages. By all means try some outrageous colour combinations. It is probably best to work it out of your system now! Then you can let your aesthetic taste bring you back to earth before you inflict your pages on the world. There are some pretty weird and wacky colour schemes out there already!

Change the Appearance of Your Text

The <BODY> tag lets you specify the colour of your text but nothing else about it. Tags like the <Hn> tags let you add headings that stand out from your normal body text. However there will be times when you want to make changes to individual sections of text, in order to add emphasis etc. There are a number of tags which allow you to do this. There are two approaches to this. The original idea of HTML was to concentrate on content, so there are tags such as <EM> for emphasised text, <STRONG> for important text, <ADDRESS> for text forming an address, <Q> for quotations, <CITE> for citations, <CODE> for examples of computer source code etc. How these are displayed is left to the browser itself. The idea being that if a particular display can underline characters, but not show them in bold, then <STRONG> would appear as underlined text. On another display that could display bold text, this might be used instead for the same tag. Try the effect of some of these on your page and see how they are displayed.

These days most people have displays used for WYSIWYG style word processing, which are capable of various text sizes, with bold, italic and underlining available. So it is now much more common to see people using a set of tags which specify the exact effect required. These include <B> for bold, <I> for italic, <U> for underline, <SUB> for subscript, <SUP> for superscript, <SMALL> for smaller letters, <BIG> for bigger letters. Try some of these on your pages and see which ones best suit your style of writing. You may notice that I have used bold a lot on these pages. Incidentally, if you haven't already realised this, it is generally possible to nest tags, so if you want bold and italic, you can use:-

Note however that strictly speaking, tags should always be properly nested, so that the innermost tag is closed before the outermost. Thus it would be bad practice to use:-
although in this particular case it would not cause a problem.

Preformatted Text

Normally a browser will display text in a proportionally spaced font, with line ends being decided by the width of the display. However there can be times when you want to control the exact appearance of a line of text. (I have used this for many of the examples in these pages). For this you can use the <PRE> and </PRE> container tags.

These force the text to be in a fixed width typeface and displayed more or less as the original HTML was written. Try it and see how it works. Be aware of one warning though. On the latest browsers, you can include characters such as < and > or indeed any other complete HTML tags, apart from </PRE> within preformatted text and they will be displayed correctly. However many of the older browsers still in use will attempt to interpret these as tags. So unfortunately, to be safe you should use the entity characters described below when you want to show tag elements within preformatted text. This works with all browsers. (Tedious isn't it!)

If you want a single line of preformatted text to be centred on your page, you can contain it within an outer pair of <CENTER> and </CENTER> containers.

There may be other cases, where you do not want the strict format control of the <PRE> tag, but you do want to control where a particular line ends. You could of course just start a new paragraph by using a <P> tag, but this would put a gap between the lines, which you might not want. A useful tag here is the <BR> tag, which adds a line break, without leaving a gap between lines. Note that this is another example of a tag which does not "contain" anything, and so needs no closing tag. <BR> is normally used without attributes but can have the attribute clear, which may take values left, right or all. With this attribute the new line does not start until either the left hand margin or the right hand margin or both margins are clear. This provides a way of forcing text to start after a picture for example, rather than wrapping round it.

Change the Colour, Size and Typeface with the <FONT> Tag

To get the most detailed control over the apperance of your type, you can use the <FONT> tag. This tag contains the text it applies to but without any attributes, it would have no visible effect on that text. It may take up to four attributes:-
  1. color specifies the colour of the text, using the same values discussed earlier for the <BODY> tag.
  2. size specifies the size of the letters and may take a number in the range 1 to 7, where 1 is the smallest and 7 is the largest. As an alternative, size may have a value with a preceeding "+" or "-" sign. In this case the size is increased or decreased by one relative to the default text size. Try the effect of each of these on your pages.
  3. face allows you to specify a particular type face for your text, by name. Unfortunately there is a snag here, as different systems use different names for type faces. It is however possible to specify several names, separated by commas, and the browser will choose the first name from the list it recognises. Even if it does not recognise any of your names, it will still display the text, using the browser's default type face. The names "Times Roman", and "Arial" are pretty universal for serif and sans-serif fonts. (But note that Windows systems and Internet Explorer require "Times New Roman" rather than "Times Roman", so it is safest to specify both forms thus: "Times Roman, Times New Roman".) By all means try the names for other more exotic fonts which you may have on your system. For example anyone using a PC is likely to have the standard Windows fonts available. But you have to be aware that users with other machines will probably end up viewing your pages in their default font.

If you want to specify font face and size for the whole of your page, you can place the <BASEFONT> immediately following your body tag. This can also be used to set the default text colour, but if that is all you want to change, it is simpler to use the text attribute of the <BODY> tag as described earlier.

Entity Characters

There can be occasions when you need to display characters which have some special meaning within HTML. Obvious examples are the "less-than" and "greater-than" angled brackets (< and >) used to denote tags in HTML. It may already have occurred to you to wonder how I have been including examples of tags in many places in these pages without confusing your browser into interpreting these as real tags.

HTML makes provision for this by use of entity characters. There are a large number of such characters, which all follow the same mechanism. Here we will just describe a few of the most common ones. An entity character always starts with an ampersand & character. This is followed by an abbreviation on the entity, and a terminating semicolon. So for example when I wanted to display an example of the <BODY> tag above, what I had to type was:-

from which you can see that &lt; is the entity for < and &gt; is the entity for >. Since ampersand is used to indicate an entity character, we clearly need an entity character to display the ampersand symbol and that, not suprisingly is &amp;.

Another use of entity characters is to display characters and symbols, which are not available on your keyboard. For example you can use &copy; to display the copyright symbol ©, whilst &eacute; displays a lower-case "e" with an acute accent, é.

This is a good point to introduce one feature of entity characters. Unlike most aspects of HTML, the abbreviation used to describe the entity is case-sensitive. So &Eacute; displays a upper-case "e" with an acute accent, É, whilst &Copy; is not recognised as an entity character. As a general rule, when trying to remember (or guess) a particular entity character, stick to all lower-case letters unless there is a specific reason to use an upper-case letter, (as for the upper-case accented letters).

The character entities described here are just a small fraction of the total. If you want the full list, consult a more detailed reference work. But beware that some of the less common ones may only work with some browsers or on some operating systems. The entity characters described so far are strictly speaking all described as "Character Entity Characters". You can also use "Numeric Entity Characters", where instead of an abbreviation for the character, you use the numeric value for the character, preceeded by a hash symbol. So you could use &#169; instead of &copy; for the copyright symbol ©. This can be useful for more obscure symbols, where the named character is not recognised. For example on the version of Pocket Internet Explorer on which I am writing this page, the entity &pi; is not recognised as a lower case greek letter Pi, wheras the numeric version &#960; is correctly displayed as π (though it may not be on your browser!).

A final useful character entity to mention is &nbsp; which introduces a "non-breaking space". You will recall from earlier, that it does not matter how many spaces you put between characters in your HTML source, the browser will reduce them to a single space (other than between <PRE> tags). If you specifically want several spaces in a page, the &nbsp; entity can be used instead of a normal space and the browser will respect this.

Here is a summary of the entities we have covered.
&lt; and &gt; < and >
&amp; &
&copy; or &#169; ©
&eacute; and &Eacute; é and É
Other accented letters follow same pattern.
&nbsp; Non-breaking Space
&#960; π(Greek Pi, if your browser permits)

Copyright © Alan Simpson 2000-2007 Back to index. Forward to next page. Last Updated 2007-10-30