Web Publishing Guide

Web Publishing Guide

Web News

Look here for training opportunities and news about our Web site.

Cool Tips

Putting Images on Your Site

Photo of Sunken Garden fountain.To align images on your page, use the align attribute. With a left alignment, the image will be positioned on the left side of the page and text will wrap around the right side of the image as shown in the example here. A right alignment will place the image on the right side of the page and text will wrap around the left side of the image. You can add space between the image and the text by using the vspace (vertical space) and/or hspace (horizontal space) attributes. If you want to make your image a link, add border="0" to the <img src="" /> tag to avoid getting a blue line around the image. Here's an example of the code:

<img src="images/fountain.jpg" alt="Photo of Sunken Garden fountain." width="250" height="200" hspace="8" border="0" align="left" />

In this example:

  • The image is located in a folder (or sub-directory) called "images." (See Creating Your Web Site.)
  • The required alternate text (alt) provides a description of the photo for site visitors who can't see the image.
  • The width and height indicates the dimensions of your image so the browser knows how to display it.
  • There will be 8 pixels of horizontal space on both sides of your image. You can use any number of pixels; experiment to see what looks best.
  • If the image is also a link, the default blue border will not be displayed.
  • The image will be aligned on the left side of the page with text wrapping around the right side of the image.

For more information, visit HTML Goodies. Also, see the section on editing images on our Web Development Software page.

Web Publishing Guide
Contact: Web Team

Last Updated: 9/1/09