CSC106 Intermed PC Appls and Programming

Image Formatting

Attributes of the img Tag

align=bottom: The bottom of the image is aligned with the baseline of the text in the current line.
align=middle: This is handled differently by Netscape and IE. In Netscape, the middle of the image is aligned with the baseline of the text in the current line. In IE, the middle of the image is aligned with the middle of the tallest item in the current line of text.
align=top: The top of the image is aligned with the top of the tallest item in the current line of text.
align=left: The image is placed against the left margin; text appears to the right of the image.
align=right: The image is placed against the right margin; text appears to the left of the image.
alt="some text string": The value of the alt attribute is a text string of up to 1024 characters, which must be enclosed in double quotes. No tags are allowed in the string. If the user is browsing with images on, the string will appear in a yellow box if the mouse is placed over the image. If the user is browsing with images off, the string will appear in place of the image.
border=n: When an image is a hyperlink, it appears with a colored border that is two pixels wide to show that it is a link. This may not be desired. This attribute sets the width of the border to n pixels; if 0 is specified, then no border is displayed.
height=n width=m: These attributes specify the height and width of the image in pixels. You can use different numbers than the actual image size, and the browser will scale the image to the size specified. However, this will slow the display of the image.
hspace=n vspace=m: These attributes specify the number of pixels of blank space to leave between the image and the surrounding text.

Controlling the Placement of Images

Images appear in line with the text of a paragraph or other text block unless you add line breaks or put the image in a separate paragraph. For example, here is a picture of a Volkswagen beetle. Notice how the image appears within the flow of the paragraph in which it is contained.

The align attribute changes where an image is placed on the page. The align=right attribute puts an image on the right side of the browser window. Text that follows the <img> tag is displayed in the empty space to the left of the image. This is a picture of the barrier reef off the coast of Belize, Central America. The photo was taken by Laurie Minor-Penland of the National Museum of Natural History. You can see this and other photos taken by her at one of the pages of the Smithsonian Institution Office of Imaging, Printing & Photographic Services.

The align=left attribute puts an image on the left side of the browser window. Text that follows the <img> tag is displayed in the empty space to the right of the image. This image is a thumbnail. If you click on the image, it links to a larger version of the same image. This image is a picture of Stradivarius violins taken by Eric Long. The violins are part of the Smithsonian's collection of musical instruments in the National Museum of American History. Notice the thick border around the image; this is because of using the border attribute to create a border that is 5 pixels wide. Also notice the extra space between the image and the text: this was created using the hspace and vspace attributes.

When an image is aligned left (or right), the left (or right) margin is redefined to be the edge of the image instead of the edge of the browser window. The left (or right) margin will return to the original setting when the bottom of the image is reached. This means that text following the image will be placed next to the image, as we have seen above. It also means that subsequent images will use this margin if they are aligned.

To center an image, place the image in a paragraph, and use the align=center attribute for the paragraph. The image must be separated from the surrounding text by line breaks or paragraph tags. Exactly how this is accomplished depends on the size of the image and the surrounding content. Even if the image is in a separate paragraph, the following paragraph or a later image may be placed next to the image. You may need to use multiple <br> tags to separate your image.

For example, look at the placement of the image of a hurricane taken from the space shuttle. This image is inside a separate paragraph that has the align=center attribute.

However, the space next to the preceding image, a computer generated image created by Ravi Ramamoorthi of Stanford University, has not yet been filled. When the browser displays the photo of the hurricane taken from the space shuttle, the current left margin is the right edge of the preceding image, so the image is centered starting from there, rather than starting from the left edge of the browser window. Adding extra <br> tags before the <img> tag would cause the browser to center the image of the hurricane.

You can create a row of images by including a group of consecutive image tags. This technique can be used to create a sequence of images or a row of buttons. In a row of buttons, the images are usually all the same size, and each is a link to another web page.

Below is a row of buttons. Place each <img> tag inside an <a> tag to make the button into a link.

My Home Page Back Links

Here are the buttons I use on my home page, with the <a> tags.

Remember that the page layout is always affected by the width of the browser window and the screen resolution. A beautiful layout on your monitor may look completely different on another user's monitor. Try changing the width of your browser window and see how it affects the display of this page.