The world is coloured, isn't it? So why use that standard gray background that appears every time a page is created? Most browsers allow the use of colours and images to liven up background. You can also change the text and link colours so as to create a page quite different from the browser standard. In this episode, you will learn to use and change the parameters of the <BODY> command, which is responsible for the colours of the page.
The browsers make available up to 256 colours to be used as background or text colour. Each colour is composed of an RGB (red/green/blue) code. The RGB code is composed of three numbers in which the first number represents the intensity of red (R); the second, the intensity of green (G); and the last, the intensity of blue (B). Each colour may have a value from 0 to 255. If the minimum values R=000, G=000, and B=000 are assigned, the colour black is obtained. If the maximum value (255) is assigned to each colour, the colour white is obtained.
Now we will complicate things a little. Instead of using a code of the type 134,000,333 to represent a colour, the number triplets and converted from the decimal base (0-9) to the hexadecimal base (0-9, a, b, c, d, e, f) since computers work better with this format. This ends up adding complications to the process of obtaining the correct colour code!
To make your life easier, the Tabcolor.htm file has a list of the colours and their coats. Below is the code for a few colours:
Black: #000000
White: #FFFFFF
Yellow: #FFFF00
Blue: #0000FF
Green: #00FF00
Dark Green: #2F4F2F
These colour codes should be used in the <BODY> command. The syntax of the <BODY> command in relation to colour is:
<BODY BGCOLOR=#XXXXXX TEXT=#XXXXXX LINK=#XXXXXX VLINK=#XXXXXX>
Where XXXXXX should be replaced by a code identifying the colour desired for that elements:
BGCOLOR = Background colour; the standard is grey.
TEXT = Text colour; its standard is black.
LINK = Link text colour; its standard is blue.
VLINK = Colour of the link already visited; the standard is purple.
Here is an example:
<BODY BGCOLOR=#000000 TEXT=#EEEEBB LINK=#33CCFF VLINK=#CC0000>
This combination assembles a black background, yellow text, hypertext in light blue, and visited links is red. You may specify the parameters in any order. You do not need to specify all the parameters- only those for which you wish to change the standard.
Load the Examp11a.htm file. It is identical to the Examp08b.htm file, but has the <BODY> command changed to reflect the colour yellow for the background.
<BODY BGCOLOR=#FFFF00>
Load the Examp11b.htm file. It is identical to Examp11a.htm but was changed to display the background in the colour light wood, similar to salmon, and the letters in a variation of green called sea green. Below is its source code:
<html>
<head>
<title>Spain</title>
</head>
<body bgcolor=#e9c2a6 text=#3299cc>
<p><img src="elogos.gif" align="left"></p>
<h1 align="center">Spain</h1>
Changing the link colours may confuse the user who does not know beforehand which colour represents the link text and which represents the visited link text. Because of this, I recommand leaving the standard colours for the links.
The change in background colour causes different effects on the other colours displayed on the screen. The Examp11c and Examp11d files show a set of coloured squares against a background of different colours.
Obtaining the Colour Codes
There are several ways of obtaining the colour code to use in HTML pages. The more recent versions of several HTML editors have wizards or modulus allowing direct selection of a colour from a palette and obtaining its hexadecimal code.
Next, we will discuss the BodyTag program, one of the simplest and easiest to operate. It is found on the companion CD.
The BodyTag Program :-
To install this program, just uncompact the bodytag.zip file to a new directory in a file of your choice. In our case, we created a directory called bodytag. It requires no special installation.
To load the program, just click on the Bodytag icon.
It's simple to use. On the left side of the window a model appears, showing the normal text and the links of a page, as well as the background colour. There is a radio button to the left of elements that can have their colours changed. Click on the item whose colour you wish to change.
The bottom part of the window shows the command, or tag, responsible for the general page colour, which is the <BODY> command corresponding to the current selection.
On the right side of the screen, 3 sliding controls appear which, on being moved, automatically change the colour of the selected item and the syntax of the tag. After obtaining the desired colour, press the copy button in the lower right part of the window to transfer the command to the transfer area. Next, switch to the editor window being used to create the HTML program, and use the paste button or command to insert the command into the document.
Creation of a Colour Scheme :-
If you have a colour standard for your pages, you can create a predefined scheme. To do this, just select the colours you desire and press the save As button.
When the save scheme dialog box appears, give a name to the scheme and press the OK button. It will appear in the program's list of schemes.
To select a scheme, just click on the selection list arrow and click on the name of the scheme desired.
Using the Colour Palette :-
If you prefer, you may use the colour palette to click directly on one of the 16 colours available on the basic palette. For example, the next figure shows the selection of yellow for the background. Just click on the background option and then click on the colour yellow in the palate.
If the colour desired is not on this palette, click on the button to the right of the basic pilot to activate the colour box. On the left hand side of this box is a palette with 48 more colours. If none of these suffice, you can use the advanced palette.
Click on a point of the pallet on the right and the colour will appear in the colour/solid panel.
Depending on the colour selected, a colour will appear, feeling the colour/solid panel. Most times, the colour will appear on the left and its basic solid colour on the right. If you click on the OK button, the colour on the left will be used. If you wish to use the solid colour, double click on it and click on the OK button.
The compound colours shown in this panel do not exactly reflect the colour used in the HTML page because of the resolution shown. Thus, it's a good idea to generate the HTML page to clear up doubts as to the colours appearance.
The Colour Table :-
The Colors.htm document has two colour table showing the name, code, and an example of the colour being used as background.
Using Colour Names Instead of Codes :-
The latest versions of the Netscape and Microsoft browser allow specifying the name of 16 basic colours in place of their code. The Colors.htm document shows a table with these 16 colours highlighted.
👈Episode 9. Episode 10.2👉
Share This Post
PRINT THIS POST
No comments:
Post a Comment
If you have any doubts. Please let me know.