Tag Archives: Body

3. Multimedia, Computing Higher

Task 5 – Coloured Backgrounds

Now that you’ve uploaded pages to the web server you have completed all the core tasks and have acquired the core skills necessary to maintain a set of web pages. The remaining tasks are designed to increase your HTML repertoire. You may prefer to continue developing your own pages and can refer to these tasks or to the “Beginners’ Guide to HTML” as you need to. The tasks are based upon what are normally the most desired effects that people want to incorporate in their web sites as soon as they can.

Netscape uses a mid-range grey as the default background colour for web pages. This colour is very suitable for highlighting the 3D effects that are part of HTML rules and tables and is actually a very good backround colour. Nevertheless, most people want to choose something a bit livelier or which will better reflect the ethos or personality of the web site they are designing.

Changing the background colour is also a very resource-efficient change to make as it does not send any graphic files to Netscape or other web browsers, it simply instructs the browser to use a certain colour as its background colour. Here’s how to do it…

Step 1. The HTML tag for changing the background colour is actually part of the <BODY> tag which is extended slightly to include a BGCOLOR element. Here’s the tag when it sets the colour to white, like all the task pages on today’s course; <BODY BGCOLOR=”FFFFFF”>.

Remember there is only ONE <BODY> tag in a web page. It appears near the very top.

Step 2. Preview your page.

Step 3. The strange looking codes that set the colour are hexadecimal numbers (numbers to base 16) and changing the hexadecimal number changes the colour. Below is a list of some common colours and the hexadecimal numbers to obtain them. Try adjusting your new <BODY BGCOLOR=”FFFFFF”> tag by substituting some of these numbers and then previewing your page. (The ‘#’ symbol that appears in the codes below is optional. It means ‘what follows is a hexadecimal number,’ but can be omitted.)

BGCOLOR=”#000000“
BGCOLOR=”#0000DD“
BGCOLOR=”#0099FF“
BGCOLOR=”#33CC33“
BGCOLOR=”#99FF66“
BGCOLOR=”#DD0000“
BGCOLOR=”#FF3366“
BGCOLOR=”#FFFF00“
BGCOLOR=”#FFFF66“
BGCOLOR=”#000000“
BGCOLOR=”#663300“
BGCOLOR=”#990099“
BGCOLOR=”#FF0024“
BGCOLOR=”#555555“
BGCOLOR=”#777777“
BGCOLOR=”#FFFFFF“ (white)

3. Multimedia, Computing Higher

Task 1 – Creating the page skeleton

This task guides you through creating the required parts of a web page.

Step 1. Start up the Notepad editor by double-clicking the program icon.

Step 2. Type in the text below

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>

<BODY>

</BODY>

</HTML>

Step 3. Enter your page title between the title Tags.

Notice the <HTML> and </HTML> tags at the top and bottom. These mark the beginning and end of the web page. It begins and ends the web page content.

When you add an HTML tag you usually have to close it off with the ending. (Usually the same as the start, but with a “/” before the letters)

The <HEAD> and </HEAD> just tell your browser it’s at the heading of the page. The “information” like the title is contained here.

Between the <TITLE> and </TITLE> is where you type the text you want to appear for the window name on the browser. Note that this title does NOT appear ONthe web page.

Step 4.The cursor should be positioned between the <TITLE> and </TITLE> tags, so type the title you want to use.

Step 5.Save this skeleton file with the name index.html before moving on to task 2. It is important to use the name index.html as the name for your main page as that is the filename which the server looks for if a filename is omitted from the URL. For example, the URL http://www.stac.ac.uk/ is an abbreviated URL and the web server will actually try to find a web page called http://www.stac.ac.uk/index.html.