Secrets and Tricks about Web Page Writing

The <IMG . . .> tag allows you to embed images and image objects, such as .avi files, into your web page. This is a one-sided tag and does not require a closing tag. You must use the SRC= attribute.

This allows you to specify how the text next to the image should be aligned in relation to the image. Possible values for this attribute are LEFT, RIGHT, TOP, TEXTTOP, MIDDLE, ABSMIDDLE, BASELINE, BOTTOM, or ABSBOTTOM.

Betty’s face is displayed at right. This is coded like this:

<p>
<IMG ALIGN="RIGHT" src="../images/bettyfb3.gif" alt="Bertty's face (bettyfb3.gif--86x83)" width="86" height="83">

This allows you to specify how . . .

Note that the IMG tag is placed at the beginning of each paragraph.

Here is an example for ALIGN="LEFT". blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

<p>
<IMG ALIGN="LEFT" src="../images/bettyfa3.gif" alt="Bertty's face (bettyfa3.gif--86x83)" width="86" height="83">

Here is an example for ALIGN="LEFT". blah blah blah . . .

Here comes an example for ALIGN="TOP". blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

<p>
<IMG ALIGN="TOP" src="../images/bettyfd3.gif" alt="Bertty's face (bettyfd3.gif--86x83)" width="86" height="83">

Here comes an example for ALIGN="TOP". blah blah blah . . .

This is an example for ALIGN="TEXTTOP". blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

<p>
<IMG ALIGN="TEXTTOP" src="../images/bettyfd3.gif" alt="Bertty's face (bettyfd3.gif--86x83)" width="86" height="83">

This is an example for ALIGN="TEXTTOP". blah blah blah . . .

This is an example for ALIGN="MIDDLE". blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

<p>
<IMG ALIGN="MIDDLE" src="../images/bettyfa3.gif" alt="Betty's face (bettyfa3.gif--86x83)" width="86" height="83">

This is an example for ALIGN="MIDDLE". blah blah blah . . .

This is an example for ALIGN="ABSMIDDLE". blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

<p>
<IMG ALIGN="ABSMIDDLE" src="../images/bettyfb3.gif" alt="Betty's face (bettyfb3.gif--86x83)" width="86" height="83">

This is an example for ALIGN="ABSMIDDLE". blah blah blah . . .

You probably wonder, “what is the difference between MIDDLE and ABSMIDDLE?”

I know you cannot see any difference in the above two examples. If you’re using the latest version of Netscape Navigator, MSIE, Opera, NeoPlanet, and HotJava, you cannot see any difference. However, some older browsers handle somewhat differently—maybe erratically.

I’m Betty.

I’m Betty.

The above six pictures are displayed by the following code:

<p>
I&#8217;m Betty. <img src="../images/bettyfb3.gif" alt="Betty's face (bettyfb3.gif--86x83)" width="86" height="83">
<img align="middle" src="../images/bettyfb3.gif" alt="Betty's face (bettyfb3.gif--86x83)" width="86" height="83">
<img align="absmiddle" src="../images/bettyfb3.gif" alt="Betty's face (bettyfb3.gif--86x83)" width="86" height="83">

<p>
I&#8217;m Betty. <img src="../images/bettyfb3.gif" alt="Betty's face (bettyfb3.gif--86x83)" width="86" height="83">
<img align="absmiddle" src="../images/bettyfb3.gif" alt="Betty's face (bettyfb3.gif--86x83)" width="86" height="83">
<img align="middle" src="../images/bettyfb3.gif" alt="Betty's face (bettyfb3.gif--86x83)" width="86" height="83">

If you’re using MSIE 6.0, Netscape Navigator 7.02, Opera 7.10, NeoPlanet 5.2, or HotJava 3.0, your screen shows the following image:

If you’re using Mosaic 3.0, you see the following screen:

And if you’re using Netscape Communicator 4.79, you see the following image:

As you see, the latest versions of all the major browsers treat both of them exactly the same way. So, after all, you don’t have to use ABSMIDDLE.

This is an example for ALIGN="BASELINE". blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

<p>
<IMG ALIGN="BASELINE" src="../images/bettyfc3.gif" alt="Betty's face (bettyfc3.gif--86x83)" width="86" height="83">

This is an example for ALIGN="BASELINE". blah blah blah . . .

This is an example for ALIGN="BOTTOM". blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

<p>
<IMG ALIGN="BOTTOM" src="../images/bettyfd3.gif" alt="Betty's face (bettyfd3.gif--86x83)" width="86" height="83">

This is an example for ALIGN="BOTTOM". blah blah blah . . .

This is an example for ALIGN="ABSBOTTOM". blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

<p>
<IMG ALIGN="ABSBOTTOM" src="../images/bettyfa3.gif" alt="Betty's face (bettyfa3.gif--86x83)" width="86" height="83">

This is an example for ALIGN="ABSBOTTOM". blah blah blah . . .

All the latest major browsers treat BASELINE, BOTTOM, and ABSBOTTOM exactly the same way, although some older versions might handle them slightly differently.

Only the BOTTOM, MIDDLE, TOP, LEFT, and RIGHT values are valid while the others are proprietary extensions. Try to use only the valid ones. If one of the other values gives you the layout that you’re looking for, go ahead and use it. Browsers that don’t recognize the value will still display the image, though the alignment might not be exactly what you want.

In practice, you’ll seldom find that ALIGN= will accomplish a complicated layout of your page. You’ll more likely use either TABLE or CSS positioning to achieve your layout.

To know more about the TABLE tag, please visit this page: How to Use a TABLE.
For more information on CSS (Cascading Style Sheet), please visit this page: CSS Table of Contents.

You’ll often use ALIGN= just to position a caption or direction beside an image, as in the following example where I’ve used ALIGN="MIDDLE":