Creating a Web Page using Mozilla Composer
Computing Resources >> Tutorials >> Web Development >> Mozilla Composer 

Make Hyperlinks

Modify Page Properties

Preview in Browser

Evaluate this tutorial

Handout for this Tutorial

 

Insert an Image

To insert an image from one of your files into your web page:

Step 1:
Go to the menu item Insert > Image.

Step 2:
Click on the “choose file” button. Browse to where your image is saved and select it by clicking on it once. Then click the “open” button.

Step 3:
Back in the image properties window, enter an appropriate description in the “alternate text” field. Then click O.K.

Step 4:
To align the image: Use your mouse to click on it so that it is highlighted blue, then click on one of the alignment buttons.

A note on File Management:

A web page with images in it is actually a collection of files. You have one file that is your web page containing the HTML code. And when you insert an image, you introduce another file, the image file. The image file does not live within your web page; it exists independently. Your web page only contains directions on how to retrieve the image, which is usually the file name of the image. These directions are called the relative path. This kind of structure means you need to respect the relative path and be careful to always save your image and your web page in the same location - usually a single folder. If you put them in separate folders, the web page will not be able to find or display the image.

If you have trouble getting your image to display on the web, a good troubleshooting strategy is to check to make sure your web page has the correct relative path to the image. To do this, go to your HTML code, and locate the code that says image source - check the file name in the quotes and make sure the HTML code is referencing the correct file.


WRONG: <imgsrc="file:///C:/Documents%20and%20Settings/labuser/Desktop/mozillawindow.jpg">

CORRECT:
<img src="mozillawindow.jpg">




next section >

 

Watch the video
Mozilla logo
choose format/speed
real media dial-up | broadband
windows media dial-up | broadband
quicktime dial-up | broadband

tutorial transcript

© 2003 Emily Hebard | iSchool | UT Austin | webmaster