Advanced Image Skills

ALT commands

It is good web manners to include alternate text information within the image tag. Alternate text creates a pop-up labels when the user mouses over the image. Like a newspaper caption, it helps clarify what the picture is; in the event that your picture refuses to download or the browser can't read it, or your page is being read by a screen reader program for a visually impaired person, alternate text conveys the content of your image.

The alternate text tag goes inside of the image tag and looks like this (the tag also contains an ALIGN command to center the picture):
<IMG SRC="majolicasun.jpg" ALIGN="center" ALT="Majolica tile w/ sunburst">

Majolica tile w/ sunburst

The above picture utilizes the alternate text feature; place your mouse on the image to see the pop-up label.

Height & Width

It is also good manners to include a height and width specification for your picture. This tells the browser how much space the image will taker up, allowing the browser to wrap the text around the picture even before the picture is done downloading.

Height and Width are specified in pixels - you will probably need to play around with this in order to get the size you desire. Measure the image with a ruler to get the height-to-width ratio. Then select a number for one of the dimensions (thumbnails are about 50 pixels high; the picture above is 138 pixels high) and multiply it by the ratio to derive the second dimension. You can specify any size you like and the browser will shrink or stretch your image accordingly; just make sure that you maintain the height-to-width ratio, or the picture will be distorted.

The height and width are specified as follows:
<IMG SRC="majolicasun.jpg" ALIGN="center" ALT="Majolica tile w/ sunburst" WIDTH="121" HEIGHT="116">

Majolica tile w/ sunburst

Alignment

You can also specify how you want to align your graphics using the ALIGN command within the <IMG SRC> tag.

Possible alignments are:

top Majolica tile w/ sunburstThis is a picture of the sun, and this text shows how the image is placed relative to the first line of the paragraph near the image.
middle Majolica tile w/ sunburstThis is a picture of the sun, and this text shows how the image is placed relative to the first line of the paragraph near the image.
absmiddle (aligns the picture with the middle of text, rather than the baseline) Majolica tile w/ sunburstThis is a picture of the sun, and this text shows how the image is placed relative to the first line of the paragraph near the image.
baseline Majolica tile w/ sunburstThis is a picture of the sun, and this text shows how the image is placed relative to the first line of the paragraph near the image.
bottom Majolica tile w/ sunburstThis is a picture of the sun, and this text shows how the image is placed relative to the first line of the paragraph near the image.
center

Majolica tile w/ sunburst

This is a picture of the sun, and this text shows how the image is placed relative to the first line of the paragraph near the image.
right Majolica tile w/ sunburstThis is a picture of the sun, and this text shows how the image is placed relative to the first line of the paragraph near the image.
left Majolica tile w/ sunburstThis is a picture of the sun, and this text shows how the image is placed relative to the first line of the paragraph near the image.