Step 3 – Body

Last update: February 15 2019

Now, let’s start designing the lay-out of the web page by creating the Body of the HTML document. The BODY-element needs to be opened and closed. Anything written in between will show in the browser window.

BTW, you’ll be learning 3 things in this step:

Step 3a – Add A Body-Element

To add a BODY-element, make sure your document looks like this:

<html>
<head>
<title>my own homepage</title>
</head>
<body>
</body>
</html>

Congratulations! You’re really building a web page now. The BODY-element can hold many additional settings. These additional settings are called attributes. Whichever values you apply to the attributes of your BODY-tag, will be valid for the whole web page.

Step 3b – Background Color And Text Color

In the BODY-tag, you can add attributes like background color or background image. You can also set the color of text and links of the document. However, in this day and age, it’s uncommon to set the text and link color in the BODY-tag. Usually, we use CSS for that now.

Nevertheless, to show you how, we’re setting the background color to a shade of off-white/light yellow, the text to grey and the links to orange and red. Change your code to this:

<html>
<head>
<title>my own homepage</title>
</head>
<body
bgcolor="#ffffe1" text="#808080" link="#ff9b6A" alink="#ff9b6A" vlink="#ff0000">
</body>
</html>

It’ll be good to teach yourself to add quotes to surround the values. They aren’t required (though some browser prefer them), but most of the time you’ll be using them in scripting languages too. It becomes something you’ll become accustomed to as a webdesigner.

You’ll notice the weird codes used as our values. These are hex color codes. Browsers can only handle RGB color models (Red, Green, Blue). So, these codes represent a blend of these three colors to produce a certain color (more about this later). Don’t worry about not knowing these codes by heart. Google offers an online color picker.

Explanation of attributes and values:
BGCOLOR – background color
#FFFFE1 – off white/light yellow
TEXT – color for text
#808080 – grey
LINK – color for links
#FF9B6A – orange
ALINK – color for active links
#FF9B6A – orange
VLINK – color for visited links
#FF0000 – red

LINK and ALINK are pretty much the same. They color the links that aren’t yet clicked. Those that are clicked get the color set in the VLINK-tag.

Because you added these colors to the BODY-element, they will be applied to all texts and all links on that page.

Stap 3c – Background Image

Adding a background image needs some explaining. If you want, you can download a .zip file that contains 2 images. You can use this for the rest of this course. You’re free to use any other images.

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

Then, make sure the index.html looks like this:

<html>
<head>
<title>my own homepage</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
</body>
</html>

You’ve added BACKGROUND=”images/background.gif” to the BODY-tag. This is where you’ve defined your background image. The background image that you’re using is called “background.gif” and can be found in the sub directory “images”, which explains the reference “images/background.gif”. If you’re using any of your own images, you need to change the file name accordingly.

If the background image would’ve been placed in the same directory as the HTML file, you don’t need to refer to the images directory anymore. You’re code should simple be: BACKGROUND=”background.gif”

The possibilities to refer to images is explained in depth in Step 12a. These rules to refer to the right path for images also apply here.

Images with the extension .jpg, .png 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 12)

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. If you don’t want to tile your background image, you will need to use CSS.

In theory, you could drop the BGCOLOR, but people can choose not to show pictures in their browser. So we use both. 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.