Designing a Web Page with an Image

Stay at Home and Learn

Web Design Tutorials

Computer Tutorials List

Design a Web Page with an Image

In this lesson, we're going to design a web page with an image. Before you make a start, download the images in the link below:

Click here to download the Images for this lesson

Once you've downloaded the images, try the following.

Create a new web page with your HTML Editor software by clicking File > New
Set the background colour to white
In between the two BODY tags, type "This image was created using Paint Shop Pro 7"
Save your web page

Copy the planet images (NOT the folder) you downloaded above to the same place where you saved your web page. To insert an image, do the following:

From the menu bar, click on Insert > Image

Insert Image Menu

The Insert Image dialogue box appears:

Insert Image Dialogue Box

Click the "Search for an Image" option
The Windows "Open" dialogue box pops up
Locate the folder where you saved your web page and planet images
Click the black down-pointing arrow next to "Files of Type"
To view only GIF files, click GIF option. Here, we're going to be using one of the JPEG images
Click on one of the JPEG planet images, then click Open

You will be taken back to the Insert Image dialogue box. Notice the text box at the bottom: "Use this text if image doesn't appear". Sometimes, things go wrong with web pages, and the browser cannot find the image. In that case, you can type some alternative text which will display if the image is not found.

So click inside the text box and type "Planet Image"
Then click OK
Your HTML code should now look like this:

<HTML>
<HEAD>
<TITLE>Insert Your Title Here</TITLE>
</HEAD>

<BODY BGCOLOR = White>

This image was created using Paint Shop Pro 7

</BODY>
</HTML>

Click on View > View Web page to see the results of your work.

What happened? You probably found that the image displayed on the right hand side, and the text on the left hand side, near the bottom of the image.

But if you look at the code, you'll see we typed the text first, then put the Image code on the line below it. So why didn't the image appear underneath the text?

The image appears to the right of the text because of one reason: HTML code does not recognise the carriage return. So when you press the enter key on your keyboard to get a new line, the HTML Editor itself knows what you mean, and what you want. But when you load the code into a browser, that new line break is not recognised. The browser thinks you want the text and the image on the same line.

With HTML code, you have to "tell" the browser that you want to start a new paragraph. If you forget, then the browser will put everything on the same line.

The way you "tell" the browser to start a new line is with either the tag or the tag. The P stands for Paragraph, and the BR for Break. The difference between the two is that the tag gives you double space, and the tag gives you single space.

To insert a Paragraph tag, click where you want the new paragraph to be. Then click Insert > Paragraph from the menu bar. Or click the icon in the toolbar.

To insert a Break tag, click where you want the new Break to be. Then click Insert > Break from the menu bar. Or click the icon in the toolbar.

After you have inserted a or tag, save your work, and then view the web page. You should see the image appear below the text. To see the ALT part of the image code in action, delete a couple of letters from the file name. Something like this:

Save your work, and then view the web page again. You should have gotten something like this in the browser:

Image Not Found

The red X signifies that an image could not be found. The ALT text we typed appears in its place. If you keep getting a red X instead of an image, make sure you image file referencing is correct (The SRC part of the IMG tag.)

In the next lesson, you'll learn all about image alignment.

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

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses