Images

For an alternative (slightly fuller) account, click here.


The code to include an image is

<img src="images/myImage.gif" alt="My Image" />

The two attributes of the <img> element given here are src, which gives the image's source, and alt, which gives an alternative text description of the image for readers who are unable to see the image. The <img> element has a number of other elements which relate to its placement, size, and appearance:

<img src="images/myImage.gif" alt="My Image" width="100" height="100" align="center" border= "1"/>

This will make the image 100 pixels high by 100 pixels wide and place the image in the centre of the screen. It will also give it a 1 pixel border.

Finding your Image's Source

If you are using an image from another web site, you must find its source. The easiest way is to use Firefox as your browser. Right-click on the image and select "Copy Image Location". Then go to your HTML code and paste the result into the src attribute of your <img> element. If you use another browser, it's a bit trickier. If you right-click, you may get an option such as "Save Image As...". Selecting this will get you the name of the image file, but you will then have to reconstruct the path.

There are two methods of including an image in a web page. One method is to make a copy of the image file, place it on your server, and then use the src attribute to indicate the path to it. The second method is to place the path to the image file on another server in the src attribute. Each has its advantages and disadvantages.

Notes on Method 1

  • You cannot make a copy of copyrighted images. You can only use images in the public domain.
  • You must upload the image file to your web account.  The easiest thing to do is to place the file in the same folder as your web page. In this case, the path will be the name of the image file. You may also create an "images" directory. In this case, the path will be "images/myImage.gif".

Notes on Method 2

  • Since you are drawing your image from another web site, your page will change if the author of that site deletes or changes the image.

Making Thumbnails

By using the width and height attributes of the <img> element, you can make the image appear smaller than its original form so that it fits in a small area of your page. This may result in a loss of detail. However, you can place the <img> element inside an <a> element, which will make it into a link to a full-sized version of the image. In this case, your smaller image is called a thumbnail.

To make a thumbnail, simply use your src path in the href attribute. For instance, if myImage.gif is a 200 x 200 pixel image, the code for your thumbnail might be:

<a href="images/myImage.gif">
<img src="images/myImage.gif" alt="My Image" width="100" height="100" align="center" border="1"/>
</a>

Readers who click on the image will see an empty web page with a full-sized image. If you wanted to, you could link to another web page containing the image, instead of directly to the image file. In this case, you could provide other information on the page.

Return to Top