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 = "x.gif" 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 = "afraid_icon.gif">
Here is some text for the non aligned image
<P>
<B>left alignment</B><BR>
<IMG SRC = "afraid_icon.gif" ALIGN = "LEFT">
Here is some text for the left aligned image
<BR CLEAR = "ALL">
<P>
<B>right alignment</B><BR>
<IMG SRC = "afraid_icon.gif" ALIGN = "RIGHT">
Here is some text for the right aligned image
<BR CLEAR = "ALL">
<P>
<B>center alignment</B><BR>
<IMG SRC = "afraid_icon.gif" ALIGN = "CENTER">
Here is some text for the center aligned image
<BR CLEAR = "ALL">
<P>
<B>top alignment</B><BR>
<IMG SRC = "afraid_icon.gif" ALIGN = "TOP">
Here is some text for the top aligned image
<BR CLEAR = "ALL">
<P>
<B>bottom alignment</B><BR>
<IMG SRC = "afraid_icon.gif" 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:
Additional Resources:
Clickable Images
Introduction to Web Design | Table of Contents
Image Size
|
