HTML: Images (Part 1)

 

Images

To include an image in a web page, use the <IMG> tag. You don't have to end with an </IMG> tag. To add the image "baseball.jpg," for example, you might write: <IMG SRC="baseball.jpg" ALT="New York Yankees in 1927">. "SRC" stands for "source."

Examples of optional attributes for <IMG> include:

ALT = "Welcome to XYZ Corp." defines text that shows up in case the image does not show up
WIDTH = 50 sets the image width to 50 pixels
WIDTH = 50% sets the image width to 50% of the window
HEIGHT = 75 sets the image height to 75 pixels
HEIGHT = 75% sets the image height to 75% of the window
BORDER = 5 sets a border of 5 pixels around the image
HSPACE = 10 sets a blank space of 10 pixels to the left and right of the image
VSPACE = 15 sets a blank space of 15 pixels above and below the image
ALIGN = left

places the image to the left of the window.
Other possibilities: right, center, top, middle

LOWSRC = "baseball2.jpg"defines a low-resolution image that loads quickly while the viewer waits for the higher-resolution image defined in SRC to load

 

Examples

Here's an image I'm going to include in a page:

1) Let's say I want to make this image smaller. Here's my code:

<p>Many students take the school bus to school each day. <img src="schoolBus.jpg" alt="A School Bus" align=center width=40 height=40>On a wintry day kids waiting for the bus utter many prayers that the bus will come soon.</p>

to see this how this code looks in a window.

 

2) What if I want a border around the image? Here's my code:

<p>Many students take the school bus to school each day. <img src="schoolBus.jpg" border = 5 alt="A School Bus" align=center width=40 height=40>On a wintry day kids waiting for the bus utter many prayers that the bus will come soon.</p>

to see this how this code looks in a window.

 

3) What happens if I misspell the name of the JPEG file?

<p>Many students take the school bus to school each day. <img src="scholBus.jpg" alt="A School Bus" align=right >On a wintry day kids waiting for the school bus utter many prayers that the bus will come soon.</p>

to see this how this code looks in a window.

Note: I omitted the WIDTH and HEIGHT attributes from example #3 because they prevented the ALT message from showing up.

 

Clip Art

There are many sources for clip art. One good source is the Web. Following is a listing of a few sources on the Web:

Page Link
Google Images images.google.com/
ClipArt.com www.clipart.com
animationfactory.com animationfactory.com

or do a search on the Web, find a GIF on a CDROM, or create your own.

 

Other Resources

Try these links on images and the <IMG> tag:

Page Link
The IMG Tag www.htmlhelp.com/reference/html40/special/img.html
Image Formats
(GIF, JPEG, Bitmap)
www.htmlgoodies.com/tutorials/web_graphics/article.php/3479931
Loading Images Quickly www.htmlgoodies.com/tutorials/web_graphics/article.php/3479921

or check out one of our reference books, or look for other help on the Web.

 

Exercise

You can work on 1) your own web page, or 2) the eEverything.com page. Find an image that you want to include on the page, and use the <IMG> tag to include it. If you work on eEverything.com you might include an image that displays some merchandise that eEverything.com might sell. Include the image at least twice on the page, with different HEIGHT and WIDTH attributes so that the two images are not identical. Use the ALT attribute for each image.