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.
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!
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:-
<B><I>Wow!</I></B>
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:-
<B><I>Wow!</B></I>
although in this particular case it would not cause a problem.
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.
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.
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:-
<BODY>
from which you can see that < is the entity for <
and > 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 &.
Another use of entity characters is to display characters and symbols, which are not available on your keyboard. For example you can use © to display the copyright symbol ©, whilst é 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 É 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 © instead of © 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 π is not recognised as a lower case greek letter Pi, wheras the numeric version π is correctly displayed as π (though it may not be on your browser!).
A final useful character entity to mention is 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 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. | |
|---|---|
| < and > | < and > |
| & | & |
| © or © | © |
| é and É | é and É Other accented letters follow same pattern. |
| | Non-breaking Space |
| π | π(Greek Pi, if your browser permits) |
| Copyright © Alan Simpson 2000-2007 | Back to index. | Forward to next page. | Last Updated 2007-10-30 |