Once you have your website text posted and formatted to your liking, it's time to spice up the page with a few images. Not only can images add color and life to your pages, you can also use them to generate text effects that would be difficult or impossible to do with regular text and formatting. For example, your font choices will typically be limited to the small number of fonts you can be sure are installed on visitors' computers, since if they don't have the font installed they can't see it on your site! Anytime you post text in an unavailable font, the visitors' computers will render it in whatever available font is closest in style, which can often wreck havoc on your website design.

On the other hand, if you use an image editing program to capture text in a fancy font and post it as a GIF or JPEG on your site, any visitor will see it precisely as you intended – since it's now a picture of text rather than text itself. This can free you to use fanciful fonts in your headers and group them in unusual ways.

The basic tag used to display images is the following:

<img src = "/folder/filename">

The above code will work perfectly in HTML. If you are using XHTML or want to be sure that your site is XHTML-ready, you should add a slash to close the tag, since in XHTML you can't use open-ended tags:

<img src="/folder/filename" />

'Src' is short for source, and you will use it to specify the file path to your image – in other words, to tell your browser where the image can be found on your site. If you keep your images in the same folder as your web pages, you don't need to list the folder in the 'src' text – you can just type in the image filename.

Once you've specified your image source, you can enhance this basic framework with various optional attributes to get the most out of your images. One attribute you should nearly always use is the 'alt' attribute. This allows you to specify what text the browser should display if it's unable to show your image for some reason. The 'alt' text is prepared as follows:

<img src="/folder/filename" alt="Alternate Text Here" />

Another useful set of attributes is the 'width' and 'height' tags. These allow you to display images at a different size than the actual image size. You can use them to tweak your image so that it fits perfectly into your overall page design. However, it's generally preferable to change the actual image size using image editing programs and then post the image on line, for two reasons. First, the image editing software will almost always give you a better looking result than tweaking the size by hand. Second, changing the 'width' and 'height' tags does not change the actual image's file size, so if you have an enormous image that you display as a thumbnail, the image will take just as long to load and will chew up just as much bandwidth as if you had displayed it at full size.

When specifying an image's size you can list the height, the width or both. Sizes are specified by the pixel as you can see below:

<img src="/folder/filename" width="300px" height="150px" />

You can also 'align' your images to work them in smoothly with the flow of your text. If you choose left alignment, the text will start to the right of the image. If you choose right alignment, the image will display on the right side of the page, and your text will come up to the left side of the image and then break to a new line.

Image alignment is set as follows:

<img src="/folder/filename" align="right" alt="Alternate Text Here" />

You can also set the alignment to "top," "bottom," or "middle" to make the image line up with either the top or bottom of the text line. If you don't specify alignment the image will default to "bottom."

As a side note, you can include your image attributes (src, align, alt, etc.) in any order within the image tags. My personal preference is to list the 'src' attribute first, since that's the most basic attribute and must be included in every image tag, but you can use whatever sequence feels most natural to you.