Colour Scheming & Use of
the <BODY> tag:
The key to any HTML document as any web master will tell
you is the <BODY> tag. This tag is very important because it controls the layout and
the colour scheme your HTML document will adopt. It is healthy to bear in mind that some
people who run on slow ancient modems will probably have their browser set to not load any
pictures unless specified. So without the background to control the page's look, it is
important that we use a good and proper colour scheme for our web pages.
For example have you been to a page which has a colour
scheme like so
Hello and welcome to my homepage, if you can see
what I wrote here, it'll be a miracle! OR this one here:
This is a link, but if you can see it, good for you! |
I must admit, I don't like these web pages very much, I
need to go right up to the monitor and see what's going there! So save your visitors the
trouble of having to giraffe their necks to the monitor to read. Adopt a good colour
scheme! I will now show you how, but generally try to CONTRAST your colours, adopt a
bright text colour against a dark background and vice versa, avoid funky backgrounds that
ruin your layout. More examples later!
The <BODY> tag has several attributes which can be
used to specify the colour scheme of your page. The next paragraph shows an example of a
<BODY> tag.
<BODY TEXT="black" BGCOLOR="gray"
LINK="blue" ALINK="yellow" VLINK="red"
BACKGROUND="nice.jpg" BGPROPERTIES="fixed">
If the web master does not specify how the browser should
display the HTML document, the browser would automatically choose the default setting for
your HTML document and sometimes, the default options do not settle in with your HTML
document and displays it very poorly. Here is a list of most commonly used attributes and
their relevant explantions.
<BODY>
ATTRIBUTE |
|
Relevant
Explanations |
| TEXT |
|
This attribute TEXT="#xxxxxx" specifies the
colour of the text that will be used by the browser to display the page |
| BGCOLOR |
|
The BGCOLOR="#xxxxxx" attribute specifies what
background colour the page should have. Remember to use contrasting colours to the
TEXT="#xxxxxx" attribute or your visitors will find it difficult to read your
pages and your words. |
| LINK |
|
All unvisited links on your homepage will be controlled by
this LINK="#xxxxxx" attribute. |
| ALINK |
|
All active links on your homepage will be controlled by
this LINK="#xxxxxx" attribute. What is an active link? It is the colour that the
link changes to when you briefly click on it. |
| VLINK |
|
All visited links on your homepage will be controlled by
this LINK="#xxxxxx" attribute. When a visitor has finished visiting a LINK or a
URL, the link would change from the LINK colour to the VLINK colour. |
| BACKGROUND |
|
If you have a nice background you would like to use you
can specify the LOCATION of the background picture. It can be an ABSOLUTE URL or a
RELATIVE URL. It is also recommendable that you keep the colour of your background and the
colour of your bgcolor almost similar, so your page is guranteed to be user friendly. |
| BGPROPERTIES |
|
If you want your pages to have a watermark like property,
remember to include this field. However, this attribute is currently recognised ONLY by
Microsoft Internet Explorers Version 4.0 and above. |
Again, I would like to stress the importance of specifying
these attributes, if you DO NOT specify them, the browser would use the default colours
and it may or may not suite your colour scheme.
Colours can be specified using words like yellow, blue,
green, red, cyan, teal but ideally if you want to achieve a weird colour or have one
particular colour you would like to use, I propose using a proper colour picker.
A colour picker will generate HEXADECIMAL codes, something which looks like #fee1ab
and this will be translated into the appropriate colour by the web browser and it will
display it accordingly, so remember to replace the xxxxxx up there to suite your needs.
Colour pickers are quite common and you can usually find
them with commercial HTML editors like MS Front Page 98 (built in colour picker) or you
can get commercial colour pickers from www.tucows.com
and perform a search on color picker. This is one that I recommend because of its
simplicity, and its affordable too :
Product : Colour Manipulation Device
Cost to register : USD $15.00
Size : 567 kb
Home Page URL : http://www.meat.com/software/cmd/
Ranking : Awarded and ranked 5 cows by Tucows
The code that you can copy and paste is right here :
<BODY TEXT="#xxxxxx"
BGCOLOR="#xxxxxx" LINK="#xxxxxx" ALINK="#xxxxxx"
VLINK="#xxxxxx" BACKGROUND="nice.jpg"
BGPROPERTIES="fixed">
Now that we have learnt how to specify our colours, let's
move on to some HTML writing business.
Notes from Alex:
If you found my guidance helpful, please drop
a note by my guestbook! So I know that you have dropped by and benefitted from my efforts,
it took me quite sometime to get these tutorial up! Click on home and then SIGN GUESTBOOK! I will also visit
your homepage and will sign your guestbook too.
|
