Aligning Images

The horizontal alignment of images on your page is formatted using the tags and techniques described in the justification section. Here's a quick review:

• Use the <div align=.".."> tag before the image tag to center or justify right or left.
• Use the </div> tag after the image tag to end the justification.
• Use the <align=.".."> tag within the "img src" tag to have text wrap around the image.

Insert these tags within the "img src" tag for the vertical alignment of images in relation to text:

• align="bottom"
  The text lines up with the bottom of the image.
  

  TEXT

  <img src="http://static.howstuffworks.com/gif/hsw-logo3.gif" alt="HowStuffWorks" border=0 align="bottom">
  
  
  

• align="top"
  The text lines up with the top of the image.

  TEXT

  <img src="http://static.howstuffworks.com/gif/hsw-logo3.gif" alt="HowStuffWorks" border=0 align="top">
  
  
  

• align="middle"
  The text lines up alongside the middle of the image.

  TEXT

  <img src="http://static.howstuffworks.com/gif/hsw-logo3.gif" alt="HowStuffWorks" border=0 align="middle">
  
  
  

In each of the above examples, the image is justified left by default, so the text appears on its right side. If you want the text on the left and the image on the right, you can add the <div align> image alignment tag discussed above.

Creating Animated GIFs
Animated GIFs add movement and flash to your pages. A good tool for creating animated GIFs is The GIF Construction Set. Using this tool, or another tool like it, you can create different frames in an animated sequence and then roll them up into a single image. Here's an example of five frames and an animated GIF created from them:

The final animated GIF: