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

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 http://wboardman.com/webdesign/