★ wanayoo — archive 1999 http://wdvl.com/Authoring/HTML/Tutorial/image_placement_alignment.html

Image Placement and Alignment

There are several attributes that affect how images are set within the page. These include: ALIGN, HSPACE and VSPACE, and HEIGHT and WIDTH.
The ALIGN attribute specifies where text will be placed relative to an image and how it will wrap around an image. You can specify an alignment of TOP, BOTTOM, CENTER, LEFT or RIGHT. The attribute is applied generically as follows: [1]

<IMG SRC = "/old?u=http%3A%2F%2Fwdvl.com%2FAuthoring%2FHTML%2FTutorial%2Fx.gif&y=1999" ALIGN = "LEFT">

Let's take a look at an example since this is the easiest way to really understand image alignment coding. Consider the following HTML code:


<HTML>
<HEAD>
<TITLE>Image Alignment</TITLE>
</HEAD>
<BODY>
<B>No alignment</B><BR>
<IMG SRC = "/old?u=http%3A%2F%2Fwdvl.com%2FAuthoring%2FHTML%2FTutorial%2Fafraid_icon.gif&y=1999">
Here is some text for the non aligned image

<P>

<B>left alignment</B><BR>
<IMG SRC = "/old?u=http%3A%2F%2Fwdvl.com%2FAuthoring%2FHTML%2FTutorial%2Fafraid_icon.gif&y=1999" ALIGN = "LEFT">
Here is some text for the left aligned image

<BR CLEAR = "ALL">

<P>

<B>right alignment</B><BR>
<IMG SRC = "/old?u=http%3A%2F%2Fwdvl.com%2FAuthoring%2FHTML%2FTutorial%2Fafraid_icon.gif&y=1999" ALIGN = "RIGHT">
Here is some text for the right aligned image

<BR CLEAR = "ALL">

<P>

<B>center alignment</B><BR>
<IMG SRC = "/old?u=http%3A%2F%2Fwdvl.com%2FAuthoring%2FHTML%2FTutorial%2Fafraid_icon.gif&y=1999" ALIGN = "CENTER">
Here is some text for the center aligned image

<BR CLEAR = "ALL">

<P>

<B>top alignment</B><BR>
<IMG SRC = "/old?u=http%3A%2F%2Fwdvl.com%2FAuthoring%2FHTML%2FTutorial%2Fafraid_icon.gif&y=1999" ALIGN = "TOP">
Here is some text for the top aligned image

<BR CLEAR = "ALL">

<P>

<B>bottom alignment</B><BR>
<IMG SRC = "/old?u=http%3A%2F%2Fwdvl.com%2FAuthoring%2FHTML%2FTutorial%2Fafraid_icon.gif&y=1999" ALIGN = "BOTTOM">
Here is some text for the bottom aligned image
</BODY>
</HTML>

Notice the use of the <BR CLEAR = "ALL"> tag. By using this tag, you let the web browser know that your alignment instructions have terminated. This allows you to return to normal alignment.
The following image shows how a web browser would interpret the code above: