Image tag basics

<img src="name">
Adds an image.

<img src="name" align=?>
Aligns an image: left, right, center; bottom, top, middle.

This example demonstrates how to align an image within the text:
Aligning images

<img src="name" border=?>
Sets size of border around an image. It will generally be "zero" if you do not specify otherwise.

<img src="name" height=? width=?>

<img src="name" alt="Image description">
Each image tag should have an "alt" attribute specified. The alt attribute is used to define an "alternate text" for an image. From

The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.

Multiple attributes can be included in a single image tag as long as they are separated with spaces (see the examples below).


Below is a photo that I took with my digital camera and reduced in size using an image-editing program. The name of this image is bryce1-14.jpg, and it has a file size of about 29 KB.

Bryce Canyon

The code of this displayed image is: <img src="bryce1-14.jpg" width="400" height="267" alt="Bryce Canyon">.

To download an image directly from a web page, place the mouse cursor over the image and right-click. Then click "Save Image As" in the menu that appears. Select the folder that you want to save the file in and choose a name for the file. Click the "Save" button.

Try this exercise:
Save the above bryce1-14.jpg image to your computer's desktop and then upload it to your site.

Using the same principles, small graphic images like this New! can be added anywhere on a web page.

More design elements

Check the "view source" for this page to see how the text box was created using a div tag with properties set for margin, border, background-color, and padding.

Back to Web Page Design at