Using Images

Crrreeeaaatttiiinnnggg aaa Weeebbb PPPaaagggeee::: PPPaaarrrttt 222 ––– Unnndddeeerrrssstttaaannndddiiinnnggg aaannnddd Usssiiinnnggg IIImaaagggeeesss
Now that you have created a basic web page, it is helpful to understand how to incorporate images. Here is an
example of an image used on the University Libraries home page:
This image is named “catalog.gif”. Sample HTML code for this image could read:
<img src="images/home/catalog.gif" alt="Catalog" border="0" width="127" height="18">
An image used on a Web page is a separate file on the Libraries’ server. All information about the image is put
inside the <img> tag. The <img> tag stands alone; it is not used in a pair. An important thing to remember is
that you have to include enough information within the <img> tag to enable the Web server to find your image.
Where is the image located? If the image is located in a different folder from your HTML file, you will need to
include that information in the URL. In the above example, the image is housed in the “home” subfolder of the
“images” folder.
In the above example, there will be no border around the image when it appears on a web page. The “ALT”
text is what appears when you “hover” over the image with your mouse in Internet Explorer, and also provides
important information for people with disabilities who use software designed to help them access the Web. It is
also what is displayed when you have a broken link to an image, or if you are using a text-only browser. The
text that goes with the alt attribute must be enclosed in quotation marks. Think of your users when you are
creating these alt attributes, and choose descriptive words or phrases.
Introduction to HTML – UM University Libraries 10
A Word About Images
The IMG tag may be used to link to a number of different types of images. Two common types of images you
might add to your web page are:
.GIF = A frequently-used graphics format, with small files which can be downloaded quickly.
.JPG or JPEG = Designed for compressing either full-color or gray-scale images of natural, real-world scenes.
JPEGs work well on photographs, naturalistic artwork, and similar material; not so well on lettering, simple
cartoons, or line drawings.
An Important Note about Sizing Images
Images should have their dimensions stated in the <img> tag for quicker loading, but it is not good practice to
“force” a resize of an image in the <img> tag using the height and width attributes. It is better to make sure
the images you use are “optimized” for the web. This means the file size has been set in a graphics program
such as PhotoShop or Fireworks. Images for the Libraries web page, as specified in the templates,
(http://www.lib.umd.edu/itd/web/templates/) are already optimized. For assistance in optimizing graphics you
may wish to add to a library page, contact Web Services at webservices@itd.umd.edu.
For our “sample” web page, let’s add a simple graphic seen on the Learning Curriculum Pages:
On your page, after the “ordered list” <ol>, add a new paragraph
<p>
Then add the following coding to insert the graphic that is saved on the desktop of your computer
(lcpuzzle.jpg):
<img src="lcpuzzle.jpg" border=“0” height=“119” width=“121” alt=“Learning Curriculum Logo”>
</p>
Now, save your file and view it in Firefox. Do you see the Learning Curriculum logo, or do you see either of
these images instead: or this ?
Why do you think you cannot see the Learning Curriculum logo?
To fix this, minimize Firefox, and open the “My Computer” icon on your desktop. Select the “3½ floppy (A:)”
icon or the icon for your flash drive and drag the lcpuzzle.jpg image from the desktop to your disk or flash
drive to copy the image there.
Preview your file again in Firefox (using “Reload” if necessary), and your image should appear. This illustrates
an important point – files and images must either be in the same folder, or images must be “pointed to” via the
URL.


NOTE: When you are creating pages for the Library website, create an /image subfolder and place all images
within this folder. Point to this folder when you use the <img> tag.
Now that we have the image saved on disk with our HTML document, you can also align it in various places on
your page. Add another copy of the image aligned to the center of your page. To do this, insert this coding
after the first graphic:
<p><center><img src="lcpuzzle.jpg" border=“0” height=“119” width=“121” alt=“Learning Curriculum
Logo”></center></p>
Save your file and view it in Firefox.
In addition to making text “hyperlink” to other documents, you can also add a hypertext link to graphics on your
pages, which will allow you to “jump” to another page, or to another location within the same page. To do this,
select one of the two graphics you inserted into your page. Then, revise the coding so that it reads as follows:
<a href="http://www.lib.umd.edu/groups/learning/stafflearning.html"> <img src="lcpuzzle.jpg" border=“0”
height=“119” width=“121” alt=“Learning Curriculum: Learn More”></a>
Once again, save your file, and view it in Firefox. Although you will not see the change in the alt text when you
hover over the two images, a screen reader would distinguish between the two. (If you would like to see your
alt tags in action, you can preview your page in Internet Explorer.) You should be able to click on the image
you linked to, and go to the Learning Curriculum web page.