NB: From this point onwards the worksheets showing actual HTML code will not illustrate the code in the EditPlus program. Code will be shown in Courier Font with new items shown in black and existing items in red.
Open your task 1 and add the head and body tags as shown below.
<p>I work as a tutor for the East Riding College Trade Union Studies Centre. Prior to January 2000 I worked as a designer at BAE Systems, Brough where I served my apprenticeship starting way back in 1983.
<p>My hobbies include playing guitar and tinkering around with my computer.
</body>
Save this and look at the site using the browser view, There should be no difference. Notice how the <body> tag is before the start of the main text, with the closing tag </body> coming after the end of the text but inside the </html>. At the moment the head section is defined but contains no information at all. Let’s add a simple entry into the head statement to put the title "My first internet page" in the blue section at the top of your browser window when viewing the page:-
Switch to the browser view again, notice the title in the top left hand corner.
Now we have the head and body defined we can set up a colour scheme by adding further information into the <body> tag. A typical body statement is shown below:-
<body
bgcolor="yellow" text="blue" link="red" alink="green" vlink="orange">Add the code shown in black into your <body> tag, save the file and refresh your browser. This way it is easier to see how the code breaks down. The background to your page has turned yellow due to the statement bgcolor="yellow", and the text has turned blue. The remaining three statements define the colour of links on your page when they are not visited, active and visited respectively. Don’t worry about this for now, we will cover links later. So, the basic format is defined. You can substitute the colours as you wish but take care to leave both of the quotation marks in the right place.
Using the names of the colours if fine, but it does limit the number of colours severely (16 on most browsers). Most people’s graphics card today will support 16 million colours (the actual number is 16,777,216). This is achieved by mixing the three primary colours of light; Red Green & Blue (RGB) and allowing each level of between 0 and 255. To use this RGB method to define colours HTML uses a numbering system called hexadecimal (base 16).
We count in decimal, base ten. That means that the number 10 means one ten + no units. In hexadecimal 10 means one sixteen + no units. The letters A to F are used to represent numbers ten to fifteen. So, FF means fifteen sixteen’s + fifteen units = two hundred and fifty five. Brain hurting yet?! Don’t panic, help is at hand.
If you want to know more about how hexadecimal works visit the web site http://www.nwu.edu/musicschool/links/projects/midi/pages/undstdbh.html
This program lets you mix colours by simply adjusting the three sliders in the top right hand corner. The equivalent numbers are shown below the slides in both decimal and hexadecimal format. You can mix a single colour or use the panel at the top left to define the colour scheme for the entire body statement. Notice how the sample page lets you see what the page will look like in context. Make sure that all the text can be easily read. Don’t worry too much about the active link colour, links only turn that colour for a very short period after they have been selected. Use the copy buttons on the Webcolor panel to copy either a single colour or the entire body statement into your code.
You can change the colour scheme at any time, but try to keep the same style for all your pages to give your site a clearly definition.