Over the last 2 articles I provided you with a solid base to html writing. This month I will discuss how to use colour in you html documents and the attributes of the tag.
Colours By name
There are two different ways to specify a colour in a html document. The first is to use a name. There are a number of different colours that you can specify by name in a html document.
The primary colours are red, green and blue. To create yellow you would have too combine red and green. To create magenta you would have to combine red and blue. To create aqua you would have to combine green and blue. To create white you would have to combine red, green and blue. There are 16.7 million colours that can be created by combining these three colours.
The reason there are so many is that the final colour differs depending on the amount of each colour that is used. For example if you use a certain amount of red and a certain amount of blue you will create a colour. If you double the amount of red that you used you will create a different colour.
But how do you tell the computer how much of each colour to use? You can use none of a certain colour, all of a certain colour or an amount in between. (NOTE: if you use all of every colour you will make white, if you use none of any colour you will make black). There are 256 different settings for each colour. For example you could set the red component to setting 200, the green component to setting 100, and the blue component to setting 50. This results in a dark orange colour.
Although in an image editing / creating program you specify colours in decimal. For example 34 bits of read, 67 bits of green and 123 bits of blue, where 34, 67 and 123 are all in decimal notation. On a web page you will use Hexadecimal notation. 34 becomes 22, 67 becomes 43 and 123 becomes 7B. To reference this colour in a html document you combine the three colours in order (IE: red, then green, then blue) and add a hash before it. The code for this colour would then be #22677B. This code could be used in any place where a colour is expected as a setting to attribute.
You may be confused so here are some step by step instructions:
1.) Note the red, green and blue components of your colour.
2.) Convert each of these to hexadecimal notation.
3.) Create the code with a hash and the three values.
And now an example:
1) red: 156, green: 45, blue: 234 2) red: 9C. green: 2C, blue: EA 3) #9C2CEA
You may be having problems with understanding how to convert a decimal number to hexadecimal. For this reason I have created a program that will do the work for you. All you have to do is download this program and whenever you need to convert decimal to hexadecimal it will do the work for you.
I covered the body tag in my first article but didn’t cover all of its attributes (I discussed attributed in my second article). Basically what I will now do is provide a list of attributes of the tag and a brief description of what each of them does.
Sets the background colour of the page, you should use one of the pre-defined colours or your personalised colour in hexadecimal notation. Text: Sets the default colour of the text on the page, you should use one of the pre-defined colours or your own personalised colour in hexadecimal notation.
Sets the colour of links on the page, you should use one of the pre-defined colours or your own personalised colour in hexadecimal notation. You will learn more about links in the next article.
Sets the colour of visited links on the page, you should use one of the pre-defined colours or your own personalised colour in hexadecimal notation.
Sets the colour of active links on the page, you should use one of the pre-defined colours or your own personalised colour in hexadecimal notation.
Sets a background image. This image if smaller than the window will tile to fill the entire background. You must specify a file name of a gif or jpg image.
Sets the amount of space to leave at the top of the page before the text, image etc. are displayed. You must specify the size in pixels. Only works with Internet Explorer.
Sets the amount of space to leave at the left of the page before the text, image etc. are displayed. You must specify the size in pixels. Only works with Internet Explorer.
If you have a background image and you do not want it to scroll when the page is scrolled you should set this to fixed. This only works with Internet Explorer.
A complete example:
<body text=#000000 bgcolor=#ffffff alink=#ffffff vlink=#ff3333 link=#ff0000 topmargin=8 leftmarfin=15 bgproperties=fixed background=tile.gif>
Although I said last month that I would cover the tag this month, I elaborated too much on the colour section to include it. I hope no one is disappointed. I will quite possible include it next post.