Free computer Tutorials
HOME Stay at Home and Learn

Web Design Tutorials
 
Computer Tutorials List

Beginners Computing
Microsoft Word
Microsoft Excel
Web Design
Cascading Style Sheets
Javascript
Visual Basic .NET
Beginners PHP

Excel 2007
Which Qualifications?

 

 

 
 

How to Insert an Image on a Web Page

 

In the last section, you used a colour for the background. But the background does not have to be a colour; it can be an image, if you prefer. We'll see how to add an image as the background now, and then discuss image types used on the internet.

Click here to download the Images you'll need for this lesson

We'll also discuss another crucial topic to do with image files and HTML files - how they are referenced. We'll then move on to inserting images generally.

  • So, load up your HTML Editor, and click on File > New
  • Alternatively, click this icon:

New File Icon

  • From the Background Options dialogue box, click on "Background Image". The Open dialogue box appears.
  • Navigate to the folder where you downloaded and unzipped the background images, and click on one of the images.
  • Click OK when you get back to the Background Options dialogue box
  • Your code will now look something like this:

<HTML>
<HEAD>
<TITLE>Background Images</TITLE>
</HEAD>

<BODY Background = background1.jpg>

</BODY>
</HTML>

Notice the new Tag - Background. When we wanted a coloured background for our web page, the Tag was this:

<BODY BGCOLOR = "Maroon">

When you want a background image, instead of a background colour, the Tag is:

<BODY BACKGROUND = "filename">

Before discussing file types, and how to reference images, click File > Save or File > Save As, and save your web page. Then click on View > View Web Page. Or click this icon in the toolbar:

View Web Page Icon

The background image you chose for your web page might not have displayed. Or even if it did, there will be a big problem if you were to put it on the internet. The problem is due to the way the image is referenced. We'll discuss that now.

 

Referencing image files and HTML files

If the background image didn't display, then the culprit is your HTML Editor. When you clicked on Background Options, then Background Image, you searched for an image that was either on your CD (if you order the printed course book, it comes with a CD of all the resources) or was downloaded to your own hard drive. The full path to the image file on the CD might be this:

D:\WebDesign\CD Rom Contents\HTML\Backgrounds\background1.jpg

However, if you look at the code in your HTML Editor the path has been shortened to this:

background1.jpg

The reason why the file path has been shortened is because of something called a Relative Reference. The un-shortened file path of D:\WebDesign\CD Rom Contents\HTML\Backgrounds\ background1.jpg is an Absolute Reference. We'll discuss those first.


Absolute References

Consider what would happen if you had this in your HTML code:

<BODY BACKGROUND = D:\HTML\Backgrounds\background1.jpg>

If you put the page on the internet, you'd have a problem. Because you're saying, "There is a folder on the D Drive called HTML. Inside this folder, there is another folder called Backgrounds. Inside the folder called Backgrounds, there is an image called background1.jpg. Please use this image as the background image for my web page."

You have used an Absolute Reference. And that's the problem. Although you will have all these folders on your D drive, somebody else viewing your web page won't. But that person's browser will try to look for all these folders. Of course it won't be able to find them, because all the folders are on your computer, and not theirs. So the background you specified to use in your web page won't be displayed to anybody else but you.

Absolute References are fine if you want to link to somebody else's web page on the internet. And you've seen this many times:

http://www.homeandlearn.co.uk

That's an absolute reference to a web page on the internet. Perfectly OK, and you'll see how to add links to web pages later. But Absolute References are not terribly practical when it comes to your own images and your own html pages. Relative References are much better.

 

Relative References

With Relative Referencing, the starting point is not your own computer, but the image file or HTML file itself. With Absolute Referencing, the browser starts the search for the image on the left hand side:

Absolute Reference

With Relative Referencing, the browser starts the search for the image on the right hand side:

Relative Reference

So with a Relative reference, the browser starts looking for a file called "background1.jpg". If you just put this:

<BODY BACKGROUND = "background.jpg">

the browser will look for the file in the same folder where you saved your web page. If it's there, no problem; the browser will display the image. You don't need to add anything else, because the browser will stop searching when the image has been found. In fact, the ONLY place the browser will look is in the same folder where you saved your web page.

So with Relative Referencing, if you put all your images and web pages in the same folder, the browser will know where to find everything. And when you're asking the browser to display an image or another web page, you only need the name of the image or web page. You don't need to do this:

<BODY BACKGROUND = C:\WebPages\Backgrounds\background1.jpg>

You can just do this:

<BODY BACKGROUND = "background1.jpg">

With this HTML Editor, Relative References are used. So if you create a folder on your hard drive called "Web Pages", you can save all your image and web pages into it. That way, all you images will display properly, and all the links to your web pages will work.

On a professional level, though, dumping everything into one folder is frowned upon. If you created a folder called "Web Pages" you would be expected to create other folders inside this one. A folder called "Images" to store all your image files; a folder called "Scripts" to store any external code; and a few other folders as well.

If you do that, Relative Referencing gets a little bit trickier. If you have a web page called index.html inside the "Web Pages" folder and wanted to use an image that was inside the folder called "Images", and this folder itself was in the "Web Pages" folder, you couldn't do this:

<BODY BACKGROUND = "background1.jpg">

If you tried that, the image wouldn't display. That's because you haven't told the browser about that folder called "Images". You would have to do this:

<BODY BACKGROUND = "Images/background1.jpg">

The forward slash means "look for a folder called . . . that is in the same folder as the current file." In this case, look for a folder called "Images".

If you wanted to point to an image that was outside the "Web Pages" folder, then life just got even trickier still. Unfortunately, the solution is outside the scope of this beginner's book. But as a beginner, if you keep everything in the same folder - images and web pages - then this sort of relative referencing should work:

<BODY BACKGROUND = "background1.jpg">

So after you create a new folder on your hard drive, start the Background image project again. Save your web page into the folder you create. And then do one important thing: copy the background images (NOT the folder) from your CD or hard drive to your newly created folder. When you've done all that, click on View > View Web Page. Your background image should now display.

Experiment with the other background images. There are 17 in all, some awful and some OK.

To sum up, then:

  • Your HTML Editor uses Relative Referencing
  • To ensure that images and web pages display correctly, create a folder on your hard drive and put all your course work into this new folder

<-- Back One Page Move on to the Next Part -->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses