You are here

A web page without an image or two is liable to seem pretty dry and dull. Now that you have mastered lists and links, you are ready to dress your page up a bit. But before we move on to the HTML tags for adding images to web pages, we will need some images to work with, so first let's cover downloading and saving images from web pages.

The good news is that almost any image on the web can be saved to your hard drive. The bad news is that you need to be careful, as many images on the web are the property of the web page designers and they may get very upset if people start stealing their images willy-nilly. There are plenty of free web image libraries on the web (here is a good link for library-related graphics, it's also on the Helpful Links page). On these sorts of sites, it is perfectly okay to download the images. All of the images I have provided in this tutorial are freely available for use by everyone.

Before we get down to saving some images, let's create a folder to put them in. Since the images are going to be used with my index.html file, I want the images folder to be near the index.html file on my computer. So I am going to create a folder inside my xyzlibrary folder called images. To do this:

  1. Right-click once on the Start button and select Explore.
  2. In the Explorer window's left hand pane, find the web page folder you created in the earlier section, Saving Your Work. Left-click once on the folder in the left hand pane of Explorer.
  3. Right-click once in the right hand pane of Explorer (where you see your index.html file) and select New Folder in the pop-up menu.
  4. Change New Folder's name to images (make it lowercase) and hit the Enter key to save the folder name.
  5. Close the Explorer window.

Mac users: You can do the same thing, just use the Control key rather than the right mouse button.

Now we are ready to get down to business. To save an image, just right-click on it:

reads

When you right-click on this image, a menu of choices will pop up (Mac users: just click and hold on an image to see the menu of choices). To save the image to your computer, select Save Image As. In the Save dialog box, point to the images directory that you created in the previous section. You can keep the image name, or change it in the File Name box then click the Save button.

If you change the file name, be sure to keep the same file extension that it had on the web. All images for use on the web will be in one of two formats: .gif or .jpg (sometimes you will see .jpeg - it's the same kind of file, it just has a slightly different extension). These formats (.gif and .jpg) are not interchangeable. If a file started life as a GIF file, it has to stay a GIF file. Image formats like .bmp will NOT work on the web.

Here are a few more images for you to practice saving to your computer:

need a librarian volunteer angel
kids imagine
cyberlibrary green drop

Okay, now we have some images! Let's move on to placing an image in a web page.

To add an image to a web page, you need to know the following tag:

<IMG src="file.gif">

IMG is the tag and src is an attribute, but src must always be used with the IMG tag. As is usual with tags and attributes, there must always be a space between IMG and src, and the image file name must be in quotations as it is a value. There are some important additional attributes for the IMG tag:

align="left" OR align="right" OR align="center"

The align attribute tells the web page where to put the image in relation to the text it is near, based on the value you specify. So:

<IMG src="images/imagine.gif" align="left">Once upon a time in a galaxy far, far away there were three bears.

would look like this on a web page:

imagine Once upon a time in a galaxy far, far away there were three bears.

 

Note that the image is to the left of the text.

If you type:

<IMG src="images/imagine.gif" align="right">Once upon a time in a galaxy far, far away there were three bears.

it would look like this:

imagine Once upon a time in a galaxy far, far away there were three bears.

 

 

 

 

Note that the image is now located to the right of the text.

If you type:

<IMG src="images/imagine.gif" align="middle">Once upon a time in a galaxy far, far away there were three bears.

it would look like this:

imagine Once upon a time in a galaxy far, far away there were three bears.

 

Now the image is centered vertically with the text.

The ALT Attribute

The last attribute is alt and it is in many ways the most important attribute. ALT stands for alternate text, and you use it to describe your images for people who can't see them. So when, say, a blind person reaches your web page, and the text of the page is read to them by a screen reader, the alt text you provide will describe the image that they can't see to them. You should always provide alt text for your images. If we add alt text to the example above, it would look like this:

<IMG src="images/imagine.gif" align="left" alt="imagine at the library">

The alt text should be brief and descriptive. The alt attribute has no effect on the physical appearance of the image. If you are using a graphic as spacing or decoration only (it has no real meaning on the page) you should use the alt attribute with what is called a null value: alt="". Screen readers skip over these tags altogether, which makes it much easier for the user listening to the screen reader.

Now let's put this new knowledge to work on your index.html file. For the following example code, I am going to put an image called reads.gif that is located in the folder images in my index.html file.

  1. Open your index.html file in Notepad.
  2. Add the following code below the <P> tag):
    <IMG src="images/reads.gif">
    Remember: I am using the image I saved earlier, and that I placed in the folder called images. You can use any image you want in your index.html file -- as long as you actually saved the image!

    My HTML code now looks like this:

    <HTML>
    <HEAD>
    <TITLE> XYZ Library </TITLE>
    </HEAD>
    <BODY>
    <H1>XYZ Library</H1>
    <P>
    <IMG src="images/reads.gif" alt="read at the library">
    <UL>
    <LI><A href="http://www.google.com/">Google</A>
    <LI><A href="http://www.lii.org/">Librarians' Index to the Internet</A>
    <LI><A href="http://www.yahoo.com/">Yahoo!</A>
    </UL>
    </P>
    </BODY>
    </HTML>

    When previewed in a web browser my page now looks like this:

    XYZ Library

    read at the library

    • Google
    • Librarians' Index to the Internet
    • Yahoo!
       
  3. After typing or pasting the HTML code into your index.html file, remember to save the file and preview it in your web browser.

Now try changing the alignment of the image. Use align="left" then save and preview the file in your web browser.

It should look like this:

read at the library

  • Google
  • Librarians' Index to the Internet
  • Yahoo!

 
 

Using an Image as a Hypertext Link

An image can be a hypertext link just like text can.

Let's add a hypertext link to the Library of Congress to the America Reads at the Library image by adding the following example code:

<a href="http://www.loc.gov/"><IMG src="images/reads.gif" alt="read at the library"></A>

This code will look like this in a web browser:

read at the library

Notice that the image is now a link (put your mouse on the image and watch it turn into a hand). The HTML code for a hypertext link is the same whether you use text or an image as the link.

Take a look at my index.html file to see these tags in action. To view the HTML code for a web page, click the View menu and choose Source (this works for most web browsers, the wording may vary slightly).