HTML MADE EASY

 
Free Graphics | Graphics Optimizer | Resources | Freeware
JPEGCruncher Desktop | T-Shirts

Lesson 6: Alignment


Aligning Text With Graphics
If you tried to align a paragraph with a picture you know how frustrating it can be. After the first line the text jumps right down and underneath the picture. To stop that from happening use the ALIGN attribute in the IMG SRC tag:

<IMG SRC="graphicname.gif" ALIGN="left">

This makes the text flow down the side of the picture. Example:

<IMG ALIGN="left" SRC="pups.jpg"> <I> See how the text here is going down the picture?<BR>The align attribute makes this possible.</I>

Result:

See how the text here is going down the picture?
The align attribute makes this possible.


Did you notice the <I> </I> tag I put in? Use the tags you learned, otherwise you'll forget.

To start your sentence or paragraph a little further down the picture use a couple of <BR> tags before you begin typing your text:

<IMG SRC="pups.jpg" ALIGN="left"> <BR> <BR> <BR> <I>See how the text here is starting a little further down the picture?<BR> The break tags make this possible.</I>

Result:




See how the text here is stating a little further down the picture?
The break tags make this possible.


If your paragraph ended before it reached the bottom of the picture and you want to start a new line of text below the picture, use the CLEAR="all" attribute in the <BR> tag:

<BR CLEAR="all">


It goes right after the text that's aligned with the picture:

<IMG ALIGN="left" SRC="pups.jpg"> <BR> <BR> <I> See how far down the text here starts?<BR>The BR tags make it happen. <BR CLEAR="all"> See how this line of text starts below the picture? The CLEAR attribute did it. </I>

Result:



See how far down the text here starts?
The BR tags make it happen.
See how this line of text starts below the picture? The CLEAR attribute did it.

Experiment a little with the tags, see what kind of results you can get and then find out how to put links on your page in Lesson 7