Basic Web Page - Pictures

In this section you will learn how to make your basic web page more presentable. Please click here to view the example web page you'll create.

If you view the source code from this example page you will see the following...
(the new code is in blue)

<html>

<head>
 <title>Stephen's Beatles Web Site</title>
</head>

 <body bgcolor="#CCFFFF">

 <img src="images/beatles_logo.jpg">

 Stephen's Web Site Dedicated to The Beatles

 <hr>

 This site includes the following information on my favourite ever band.

 Biography

 List of Albums

 Images

 Favourite Songs

 <hr>

</body>

</html>

This code is now explained

<body bgcolor="#CCFFFF">
This specifies the background colour. It is in hexi-decimal code. Click here for a full list of colours.

<img src="images/beatles_logo.jpg">
This displays the picture on the screen. The file location of the picture must be inserted between the speech marks. Generally the picture file must be in .jpg or .gif format.

In the example here, the picture file is located in the sub-folder images. The relationship between the web page (beatles1.htm) and the image (beatles_logo.jpg) is shown below...

note - any picture from the web can be saved to your computer's hard drive. It is easy; all you have to do is click on the image with the right mouse button and then choose the "save picture as..." option. You then choose which folder to put it in.

<hr>
This simply puts a horizontal line across the screen.

TASK
Now that you know a bit more about web site design try and make your site more presentable.

Web Tutor

Click here to progress to the next stage.

Worth your time