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=?>

An image will always load in a browser faster if its size is specified in the tag.
To find the size of an online image in IE, right-click on it and select "properties."
To find its size in Firefox or Netscape, right-click on it and select "View Image." The size will then show in the title bar.
It is not advisable to change the actual size of an image by specifying a different height and width. Doing so can distort the image and will not save on image file size or downloading speed.

<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 W3Schools.com:

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).

Examples

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.

Escher reptiles To the right is a single image, which is also tiled in the background as a background image.

Its code in this single image is:
<img src="reptiles.gif" width="171" height="100" align="right" border="1" alt="Escher reptiles">

To use a graphic as a background image, its code must go in the body tag. Example:
<body style="background:url(reptiles.gif)"> Note that for this tag to work, the file reptiles.gif needs to be in the same directory as the html page.

Using the same principles, small graphic images like this 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 http://wboardman.com/webdesign/