|
HTML GUIDE
PAGE 6
|
Tags covered on this page
<BODY> <FONT> <IMG>
|
COLOURS, IMAGES AND ANIMATIONS
Before stating how to use colours on your pages, we need to discuss how the colour system works.
The easiest way of setting a colour is to choose one from the pre-defined list.
(These names can be found in Appendix II)
So, a colour can be defined as simply as
.. COLOR="colour name" ..
e.g.
.. COLOR="maroon" ..
By using these names you can avoid the hexadecimal red-green-blue system.
This system is a little more complex, but once mastered, means you can alter colours at will, without having to refer to the pre-defined colour chart all the time.
The red-green-blue system ( rrggbb ) is a way of denoted strengths of the three primary colours. The strength of each colour is within the range 0-255, but since we are talking in terms of computers here, these values are placed in HexaDecimal form.
|
A wee note on HexaDecimal numbers
If you do very little programming then you may have never come across the HexaDecimal number system.
So a full list of numbers from 0-255 would be 00 01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F 10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F . . . . . . . . . . . . . . . . 90 91 92 93 94 95 96 97 98 99 9A 9B 9C 9D 9E 9F A0 A1 A2 A3 A4 A5 A6 A7 A8 A9 AA AB AC AD AE AF . . . . . . . . . . . . . . . . E0 E1 E2 E3 E4 E5 E6 E7 E8 E9 EA EB EC ED EE EF F0 F1 F2 F3 F4 F5 F6 F7 F8 F9 FA FB FC FD FE FF |
To enter these strengths into html, we use the form
.. COLOR="#rrggbb" ..
Where rrggbb is replaced by your choice of saturation levels for each colour, and the # is inserted to tell the browser that this colour is specified in rrggbb form and is not to be looked up as a name in the colour table.
.. COLOR="#FF0000" .. - Red
.. COLOR="#800000" .. - Dark Red
.. COLOR="#00FF00" .. - Green
.. COLOR="#000080" .. - Dark Blue
.. COLOR="#FFFF00" .. - Yellow
|
<FONT>
The code given above can be pasted directly into a font tag to allow changes in the colour of text on your page - as shown below.
Try editing Example File 2 on the examples page to get to grips with the rrggbb colouring system.
|
Blue Text
|
<BODY>
Another tag that allows colour changes is the body tag.
This is more important than the font tag as this defines page colours for the following aspects:
Page background, Text, Links, Any active link, Visited links.
The syntax for which is :
<BODY BGCOLOR="colour" TEXT="colour" LINK="colour" ALINK="colour" VLINK="colour">
|
|
Where, BGCOLOR : is the background colour of the page
TEXT : is the colour of the text on the page
LINK : is the colour of each link on the page
ALINK : is the colour of a link that is being followed by the user
VLINK : is the colour of a link on the page that has been visited before by the user
and,
|
The order of these attributes is irrelevent and any ommisions are set to the standard default colours.
However, it is good practice to keep these colours in one order or another and to enter values in even if unnecessary. By doing this you will find editing your files alot easier.
Example File 3 on the examples page will give you the code to set up the basic colours on a page. Fine tuning these colour values is an art in itself but, at the end of the day, beauty is in the eye of the beholder. There is no need to spend hours changing colours willy-nilly. Just make sure that the text is readable and that no two colours clash.
OK, now it's time to really make your friends jealous.
We're gonna stick some really great piccys on your home-page.
Placing picture images onto your page is very simple, however, creating them requires a little more effort.
If you own an art package then you can create pictures yourself. Just make sure you save them in GIF or JPEG format so the browser can recognise them.
If you have do not, then all is not lost. Lots of sites give away free images for you to download and use on your home page ( like the ones here ).
Once you have the the pictures, the rest is easy.
<IMG>
The IMaGe tag is a very simple fellow.
To place a picture file on your page all you need to do is specify the SouRCe of the file by the file name,
like so
<IMG SRC="file name">
e.g.
<IMG SRC="Bug1.jpg">
This will place your picture on your page and in the correct size.
You can, however, change the size of the image using the WIDTH and HEIGHT attributes of the IMG tag.
e.g.
<IMG SRC="Bug1.jpg" HEIGHT=20>
<IMG SRC="Bug1.jpg" WIDTH=80>
As you can see, by specifying one of the size attributes, the picture fills out to the same proportions.
By specifying both WIDTH and HEIGHT at the same time you can stretch and compress the image to produce some strange effects.
e.g.
<IMG SRC="Bug1.jpg" WIDTH=80 HEIGHT=20>
An added bonus in doing this is that the browser knows how much room to leave for the image. This means text can be written around the image whilst the image itself is still downloading. So visitors to your site do not have to wait for long periods of time before the textual content of your page to be displayed.
An animated picture is nothing more than a single GIF file which has several frames stored within it.
So to display an animation on your site you only need to download or create a GIF file, then display it
just as you would a normal image.
e.g.
<IMG SRC="Polyoid.gif" WIDTH=64 HEIGHT=64>
You can mess around with these pictures by editing Example File 4 on the examples page.
<BODY> (revisited)
We take a short back-step for a moment to revisit the BODY tag.
Now we've discovered images there is one last attribute to cover
which specifies a BACKGROUND picture file.
The background picture is an image, like those before, in GIF of JPEG format, which is displayed under the text on the page. You specify the image to use within the BODY tag, like this:
<BODY BACKGROUND="file name" ... >
The files used for background images can not be animations, neither can they be resized - the original size of the picture is always used.
When creating background images be sure that they tesselate correctly, otherwise the image will look odd and will distract the user from the page content.
It is always wise to specify the BGCOLOR of the page. It may seem like a waste of time, but if someone visits your page without Auto-Loading your images, they may be presented with white text (because your background image is black) on a gray background, making it very difficult to read.
