Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Your basic <IMG> tag, then, should look like the following:

<IMG SRC=”URL_of_image_file” WIDTH=width_in_pixels
HEIGHT=height_in_pixels ALT=”alternative_text_description”>

Most sites make conscientious use of these attributes in each <IMG> tag. Figure 5.1, for example, shows the banner graphic on the World Wide Web Consortium’s main page along with the corresponding HTML source code in Listing 5.1.

FIGURE 5.1  The banner graphic on the W3C home page is set up with WIDTH, HEIGHT, and ALT attributes. These attributes produce the box labeled “W3C” that you see in the upper left.

Listing 5.1 <IMG> Tag from the W3C Home Page

<TD COLSPAN=”4">
<H1><IMG ALT=”W3C” HEIGHT=48 WIDTH=307 SRC=”Icons/WWW/w3c_main”></H1>
<H2><I>Leading the Web to its Full Potential...</I></H2>
...
</TD>

---

NOTE:  You can also use the HEIGHT and WIDTH attributes to scale the size of your images on some browsers. If you have an image that is 420 pixels wide by 220 pixels high, for example, its dimensions can be halved with the use of the following tag:

<IMG SRC=”graphic.gif” WIDTH=210 HEIGHT=110 ALT=”Reduced image”>

Similarly, you could scale the image size up by using a WIDTH greater than 420 and a HEIGHT greater than 220.

Although this is one way to modify the size of images, it is probably not the best way because browsers don’t always do the best job at resizing. Additionally, this does not change the download time because the file size is still the same.

Your best bet is to use a program such as Photoshop or LView Pro to resize the graphic before placing it on your Web page. Not only are these programs better suited to resize an image, they also enable you to preserve the aspect ratio (ratio of width to height) during the resize.

---

Adding a Border

The BORDER attribute gives you a simple way to instruct the browser to place a border around an image. BORDER is set equal to the number of pixels wide you want the border to be. Figure 5.2 shows an image with a seven-pixel-wide border. The default border is no border.

FIGURE 5.2  Borders look good when placed on photos; they give the picture the appearance of being framed.

Adding Space Around Your Image

Whitespace around an image is called gutter space or runaround. Putting a little extra space around an image is a good way to give it some breathing room on the page and make it stand out better.

Runaround is controlled by the HSPACE and VSPACE attributes. Each is set to the number of pixels of extra space to leave to the right and left of an image (HSPACE) or above and below an image (VSPACE). Figures 5.3 and 5.4 show some images with varying amounts of HSPACE and VSPACE. In each figure, all images have either extra HSPACE (see Figure 5.3) or extra VSPACE (see Figure 5.4) around them.

---

NOTE:  HSPACE and VSPACE don’t have to be used independently of each other. In fact, they are often used together. The following code would leave 10 pixels of space all the way around the image, for example:

<IMG SRC=”picture.jpg” HSPACE=10 VSPACE=10 ...>

---

---

CAUTION:  

You cannot increase space on only one side of an image. Remember that HSPACE adds space to both the left and the right of an image and VSPACE adds space both above and below the image.

---

FIGURE 5.3  HSPACE controls the distance between an image and page elements to the right and left of the image.

FIGURE 5.4  VSPACE can open up room above and below an image.

The ALIGN Attribute and Floating Images

The ALIGN attribute of the <IMG> tag can take on one of the five values summarized in Table 5.2. TOP, MIDDLE, and BOTTOM refer to how text should be aligned following the image. LEFT and RIGHT create floating images in either the left or right margin.

Figure 5.5 shows text aligned with TOP, MIDDLE, and BOTTOM (the default alignment). One important thing to note with TOP and MIDDLE alignments is that once the text reaches a point where it needs to break, it breaks at a point below the image and leaves some whitespace between the lines of text.

FIGURE 5.5  Of TOP, MIDDLE, and BOTTOM alignments, only BOTTOM enables text to properly wrap around an image.

Values of LEFT and RIGHT for the ALIGN attribute were adopted as part of the HTML 3.2 standard to allow for floating images that permit text to wrap around them. Figure 5.6 shows an image floating in the left margin with text wrapping around it to the right.

FIGURE 5.6  Floating images sit in one margin and enable text to wrap around them.

Floating images opened the door to many creative and interesting layouts. It is even possible to overlap images by floating one in the left margin and one in the right margin.

The advent of floating images created a need for a way to break to the first left or right margin that is clear of a floating image. To satisfy this need, the CLEAR attribute was added to the <BR> tag. Setting CLEAR to LEFT breaks to the first instance of a left margin that is clear of floating images. CLEAR=RIGHT does the same thing, except it breaks to the first right margin. You can clear both margins by setting CLEAR=ALL.