|
|||||||||||||||||||||||||
Adding ColourOne of the simplest ways to make your document look nicer is to specify a background colour and a text colour. To set these colours for the whole document, you need to add two attributes to the BODY tag: BGCOLOR (as with so many things to do with computers, American English spelling is standard) and TEXT. There are two ways of defining colours. If you want to use one of the standard Windows colours like "black", "white", "red", "green", etc, you can use these colour names:
So, for example, if you want your document to be displayed with a dark blue background and yellow text, the <body> tag might look like this: <body bgcolor="navy" text="yellow">
Go back to your text editor. Open the file "file1.html" and change the <body> tag to the one given above. Save the file as "file9.html" and then open it in your browser. (Alternatively, you can open FILE9.HTML in Appendix A, and copy and paste the code into a new file in your text editor, then save it as "file9.html" and open it in your browser.) The content that is displayed hasn't changed, but instead of black text on grey or white, it should now look something like this: Figure 11: Adding colour However, what do you do if you want to use a colour other than these 16 "standard" ones? There is a scheme which lists all 216 "browser safe" colours (these are colours which will display correctly in most browsers without producing "dither" patterns on screen), and which gives a name to every single one. However not all browsers recognise these colour names, and trying to remember 216 colour names is impossible for most of us! There is another way of defining colours however. It is rather more technical, but don't let that put you off. It is based on the fact that, on screen, colours are made up of varying amounts of RED, GREEN and BLUE. Numerically, each of these components can be set to any value from 0 to 255, where "0" indicates none of that colour, and "255" indicates the maximum strength of that colour. So, for example, the navy blue colour we used for the background in the above screen can be defined as:
The yellow colour we used for the text can be defined as:
There is one more step we have to take before we can use these numerical values to define colours in HTML. We need to use the "hexadecimal" form of these numbers, rather than the "decimal" form. That is, they need to be in "base 16" rather than "base 10". If you understand what this means, great! If you don't, don't despair. Appendix B consists of a colour chart which lists all 216 browser safe colours, showing their hexadecimal RGB colour values. All you have to do is find on the chart the colour you want to use, and read off the hexadecimal RGB value. Alternatively, if you have a graphics program, you may find that it can be set to display the RGB colour values in hexadecimal form. If it does, you can use it find a colour you like, and simply read off the RGB colour value to use in your web pages. RGB colour values are always quoted in that order: red value, green value, blue value. The decimal values 0 to 255 only take up 2 digits in hexadecimal form, so the RGB value is always 6 digits: rrggbb. In the example we used above, the dark blue would be defined as "000080" and the yellow as "FFFF00". Appendix C contains a chart for converting the numbers 0 to 255 from base 10 to base 16 and vice versa. It also contains details of how to convert numbers yourself. Go back to your text editor, open the file we just created, "file9.html", and change the <body> tag to replace the colour names with their hexadecimal values. You need to put a "#" at the start of the number. So the <body> tag should now look like this: <body bgcolor="#000080" text="#FFFF00">
The letters used in hexadecimal values can be entered in either upper case or lower case. Either way is correct and should be recognised by the browser. Save the file and open it again in your browser. It should look exactly the same as when you used the colour names. You can also set the link colours for the page in a similar way. There are three link colours which can be specified:
The convention is that unvisited links are displayed in blue, visited links in purple and active links in red. Here's an example of a body tag specifying a conventional set of colours: <body bgcolor="#ffffff" text="#000000" link="#000099" vlink="#990099" alink="990000">
This defines the background colour as white, with black text, blue unvisited links, purple visited links and red active links. Most browser default settings use colours similar to these. As a result, it's probably best to specify all of these colours if you are going to specify any of them. If you leave any of them unspecified, these will be displayed using the user's default browser settings. So, for example, if you specify a blue background colour with white text, but don't specify a link colour, the browser will display unvisited links using the default setting, probably blue, which may have the result of making the links invisible! It's also advisable to stick to the convention if you can, but you could always choose a light blue link colour if you are using a dark blue background, for example. This isn't a hard and fast rule, however. You may have noticed that I haven't followed it myself in this tutorial! Use your text editor to add these new attributes to the BODY tag in "file9.html". Experiment with different colours in all of these attributes - save the file each time you change the values for these attributes, and open it in your browser to see what it looks like. |
|||||||||||||||||||||||||
|
|||||||||||||||||||||||||
