Adding Images to Your Document



In this lesson, you will learn to include colorful images in your HTML document.

You will need three windows open on your screen at this time. A Netscape window displaying this tutorial, an experimental window to view your HTML document, and a window in which you will type the HTML document.

Most Web browsers can handle just a few kind of images:

Including Images

To include an image, enter the following tag and information:

<img src=" URL of the image">

For example, the following source:


looks as follows, viewed through Netscape:


In this example, the image of the earth is a file that has been downloaded and placed in a folder called images on the hard drive. The actual name of the file is Earth_nb.gif.
Since the image is stored on the local hard drive the URL is the file "path". A path consists of a list of folders separated by slashes and ending with the files name. Paths are assumed to start from the folder containing the HTML source that you are currently viewing.

When you are adding images to your document you generally find an image you want on the Web, download it and place it on your hard drive or diskette and then include it in your document with the appropriate tag and URL. Once the file is located on your hard drive or diskette it is now a local file.

It is time for you to download an image and insert it into your HTML document.

Here are three images to choose from:



Download one of the three images to your hard drive or diskette. You can keep the name that has been given to the file or you can change it.

Click on the window containing your HTML document.
Insert the image you just downloaded by entering the following :
<img src=" URL of the image"> with the appropriate URL.
Save your changes, and open your document in the experimental window.

URL's can also specify external files on the Web.

For example, the following source:


will display an external image on the Web.

Aligning Images

You have some flexibility when displaying images. You can have images aligned to the left, right or center of the page.
To display an image without any associated text, make it a separate paragraph. Use the paragraph align= attribute to position the image.

For example, the following source:


looks as follows, viewed through Netscape:


Aligning Text with an Image

You can align text along the top, center, or bottom of an image. By default the text is aligned along the bottom of an image.

To align text you must use the align= attribute within the <img src=" URL of the image"> Tag.

For example, the following source:


looks as follows, viewed through Netscape:
(Note that words are supposed to be unreadable, the image has been shrunk)


Next Topic: Adding An Original Drawing to Your Document
Main Menu