Adding Graphics To Your Page

SIMPLE:

This tag results in the graphic being left justified, the text beginning at the bottom right hand corner of the graphic as it appears here. Imagine several graphics on a page all doing the same thing. The result would be very unimaginative as well as producing lots of whitespace. There was a time that this was your only option... but no more.

Graphics can now be left, right or centered with text running all around filling in that ghastly white space. So let's put those graphics where you want them on your page, and not be limited by the confines of the simple IMG=SRC tag!

LEFT AND RIGHT WRAP AROUND TEXT

ALIGN LEFT: Here we have the source code to place our graphic to the left side of the page, the text starting at the top of the graphic, flowing down the side and eventually wrapping beneath the graphic. A single <BR> tag was placed between the graphic and the beginning of the text to leave a single line of white space between the line above and the new line of text. The <PRE> tags with one or two lines of white space can be used to generate an even larger gap, but be careful not to defeat your original purpose in aligning your image to the left.

Some people may prefer to break a page up with white space, but if you're trying to add a lot of text while maintaining the appearance of a shorter page with less scroll down screens, the wrap a round text is the answer.

ALIGN RIGHT: The align=right attribute pushes your image to the extreme right side of the page, allowing the text to flow down the left side and beneath it. In this case I decided to add a little interest to the paragraph by using the <DD> tag to indent my paragraph. When using this method to indent, it must be remembered that <DL> is a container and requires both an opening and closing tag. The <DD> itself does not have a closing tag.

Left and Right... Is This ~All~ We Can Do?

Images can also be centered... but how to get text on both sides of the image? Usually you see a centered image with text above and below it, but to each side? Text here

Text here

Not quite what you had in mind, is it. How about this?

Text to the left of the image		Text to the right of the image
with plenty of space between the text and image so everything doesn't look all bunched up.

The centered image with text on each side was generated with a table utilizing the cell attributes to align each element of the design to my specifications.

Source Code:

<CENTER>
<TABLE border=0 width="90%" cellpadding=9 cellspacing=9>
<TR>
<TD align=right>Replace left side text with your own text.</TD>
<TD align=center> <IMG SRC="graphic2.gif" WIDTH=125 HEIGHT=109 BORDER=0><BR></TD>
<TD ALIGN=LEFT>Replace right side text with your own text</TD>
</TR>
<TR><TD colspan=3 align=center>Replace bottom cell text with your own text. </TD></TR>
</TABLE>
</CENTER>

The simplest way to get your image centered between text is to copy the above source code, paste it into your document then replace my text and file names with your own. There may be some adjustments required which I've covered below for those who are interested.

The image and the text can be drawn closer together or pushed farther apart simply by changing the TABLE WIDTH variable. If you've set your width to 50% and everything looks cramped, try adjusting it to 80%. If you haven't set the width at all and you've ended up with a single line of text on each side of the image, adjust the width to a lower percentage.

You want the larger table, but you'd like your text placed closer to the image. There are two adjustments you can make.

First, you can change the CELLPADDING and CELLSPACING variables. A higher number will give you more space between the text and imagepsp while a lower number will give you less. A second method of moving your text closer to the image is to align the left side text to the right and the right side text to the left of their respective cells.

As an aid in working with tables, you might want to set the BORDER variable to 1 while you're working, changing it back to 0 if you'd prefer the border to not show in the finished product.

**Setting the table border to 1 accents the slight imperfections in this table allowing you to better ascertain where adjustments need to be made.**
Text to the left of the image		Text to the right of the image

To make the table symmetrical, you will need to align the text on each side of the image in opposite directions. If you allow them to both justify left, the effect will appear lop-sided. For text closer to the image, align the left text to the right side of the cell using <TD ALIGN=RIGHT>, and the right text to the left side of the cell using <TD ALIGN=LEFT>. For text farther from the image, reverse the above procedure. Technically, you don't need to align the text to the left, but it helps to keep it straight in your head if you do.

The image will also need to be aligned to prevent it from clinging to the left side of it's cell. This is accomplished by setting the cell alignment to the center thusly: <TD ALIGN=CENTER>

I've probably told you more than you wanted to know about placing your image between two blocks of text, so I'll leave you at this point and let you go and play with your graphics. :)