Step 3 – Body

You will detemine the lay-out of your homepage in the Body of your HTML document. The BODY-tag needs to be opened and closed. Anything written in between will show in the browser.

We’re going to add the BODY-tag. Make sure your document looks like this:

<HTML>
<HEAD>
<TITLE>my own homepage</TITLE>
</HEAD>

<BODY>

</BODY>

</HTML>

The enters aren’t necessary. They just make things easier to read.

Step 3b – back- and foreground colours:
There’s something special going on with the BODY-tag. Like other HTML tags you can add a few definitions and values to the BODY-tag. These are called attributes. Things like a background colour or a background image, the colour of the text in the document and the colour of the links.

We’re going to adjust our document index.html. We’re setting the background colour to a shade of off-white/light yellow, the text to grey and the links to orange and red.

<HTML>
<HEAD>
<TITLE>my own homepage</TITLE>
</HEAD>

<BODY
BGCOLOR=”#FFFFE1″ TEXT=”#808080″ LINK=”#FF9B6A”  VLINK=”#FF0000″>

</BODY>
</HTML>

The quotes aren’t required (though some browser prefer them). I’ve used them to make it clear to you that anything between quotes is a value. In this case the values are codes for colours.

Translation:
BGCOLOR – background colour
#FFFFE1 – off white/light yellow
TEXT – colour of the text
#808080- grey
LINK – colour of the links
#FF9B6A – orange
VLINK – colour of used links
#FF0000 – red

Stap 3c – background image:

The implementation of a background image needs some explaining. When you click this link you’ll start downloading a .zip file that contains 2 images. You can use this for the rest of this course. You can also use any other images.

If you haven’t done so before, please create a subdirectory on your computer named “images” and copy these images to that directory.

Then make sure that index.html looks like this:

<HTML>
<HEAD>
<TITLE>my own homepage</TITLE>
</HEAD>

<BODY BACKGROUND=”images/background.gif” BGCOLOR=”#FFFFE1″ TEXT=”#808080″ LINK=”#FF9B6A” ALINK=”#FF9B6A” VLINK=”#FF0000″>

</BODY>
</HTML>

We’ve added BACKGROUND=”images/background.gif” to the BODY-tag. This is where we defined our background image. The background image that we’re using is called “background.gif” and can be found in the subdirectory “images”, which explains the reference “images/background.gif”. If the background image would’ve been placed in the same directory as the HTML file, the reference should’ve been as followed: BACKGROUND=”background.gif”
The possibilities to refer to images is explained further in Step 12a. The things you read there also apply to the referals you make in BACKGROUND.

Images with the extension .jpg or .gif are most common on the Internet. This also counts for the background image you want to use. (Read more about the formats .jpg en .gif in Step 12f)

Save index.html and open the file in a browser. The original image is 400 x 400 pixels, but because we defined it in the BODY-tag as a background image, the picture will be tiled automatically.

In theory you could drop the BGCOLOR, but people can choose not to show pictures in their browser. So we use both. With MSIE you may see the BGCOLOR while the background image is being loaded. When you match the main colour of the image to the BGCOLOR this will give a very nice smooth effect to the loading process.

On to Step 4

Bookmark the permalink.

Comments are closed