“Do You Want to Align Text?”

Do You Want To Align Text?

Use these to jump around or read it all...

[Getting Text To Wrap] [Image In the Center]
[Speaking of Tables...]
[Align One Line of Text] [Align Two Lines of Text] [Adding Blank Lines] [Aligning Text Alone]
[What About Custom Text Shaping?]
     People ask all the time how to get images onto pages. If you aren't sure how yet, I cover it in HTML Lesson Day #5. However, once, they get those images onto a page, then they start asking how to get text to align or wrap around the images they have placed on their pages. That's the purpose of this tutorial, to tell you how to get the text to wrap. Just like this.

Getting Text To Wrap
     It's actually easier than you think. You see the two images I have so far? Both are wrapped by text, yet one is on the left and one is on the right. I did that by using a normal image command like so:

<IMG SRC="book.gif" ALIGN="----" WIDTH="70" ALT="A book">

     Please note I have used the HEIGHT and WIDTH commands for my image. You should do this with all your images. Plus use the ALT command. It really helps with page loading. Just this subject has enough information to make your brain pop.
     Now, notice the ALIGN="---" subcommand in the image command above. That ALIGN command, when using "right" or "left" refers to the placement of the image on the page rather than the text itself. That will be an important item in a minute. Keep it in mind.

     In order to get the text to wrap around the image, you use one of these ALIGN right or left commands. But the image is already to the left, you say. Do it anyway. The ALIGN alerts the browser to allow the text to wrap. That's what I did above.
     The image that went to the right just used the ALIGN="right" subcommand attribute to wrap.

Image In The Center
     Isn't that a neat trick above, getting the image in the middle of flowing text? It actually isn't much of a trick. It's a three-celled table with half the text in one side and half in the other.
     To do it, I wrote the text I wanted and split into the two parts. I made sure to write enough text so that the image height was equaled. Then I put it all into this table format:

<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="3">
<TR>
<TD> First Half of Text</TD>
<TD> Image</TD>
<TD> Second Half of Text</TD>
</TR>
</TABLE>

Speaking of Tables...

Will the ALIGN="---" commands work
when you are using Tables?

     Sure will. Just make a point of adding ALIGN="left" or ALIGN="right" inside the first TABLE command. Like so:

<TABLE BORDER="3" CELLPADDING="3" CELLSPACING="3" ALIGN="left">

Align One Line of Text
     This is actually the easiest of the bunch. If you only want to align one line of text, like a title, with a picture, then use one of three commands; "top," "middle," or "bottom." Like so:

<ALIGN="top">

<ALIGN="middle">       <ALIGN="bottom">

No <H#> Commands Allowed
     They won't align. "H" heading commands want to be alone. To get bigger text next to the image, use <FONT SIZE> commands.

Aligning Two Lines of Text
     If you've tried the top, middle, and bottom commands above, then you know after you get more than one line of text, the rest jumps to under the picture. Bummer.
     How to get around it is a little more tricky. First off, you only use a left or right ALIGN to get the text started. (Yes, it starts at the top. I'll explain further.) After you have the amount of text you want, you use this command:

<BR CLEAR="all">
     That little doo-dad clears the remainder of the picture wrap and starts you on the next line under the picture. Like so:

This text is next to the Monk's picture.
This text is also...
(<BR CLEAR="all"> placed here)
     This text isn't.
     Now, some may say they want the text to start down the picture a bit. They want the same effect as the ALIGN="middle" or ALIGN="bottom" commands above. Easy to do. You add blank lines.

Adding Blank Lines
     But... you say I have tried adding fifty <P> commands and I never get more than one line. That's true. The reason is because you never put anything on the line after the <P> command. Try this:

<P> <P>
     That's a great little deal that adds a couple blank lines. Why? Because the   is a space. You've put something on the line so the next <P> can act. But the space is invisible, so no one sees it and you get two blank lines. Slick, huh? Use a few to "bump" your text down the image face. You can get the same effect by simply adding a slew of <BR> commands too, but this gets the job done quicker with less text.

Aligning Text Alone
     You probably already know about the commands that center the text for you:

<CENTER> and </CENTER>
     You surround the text, tables, images, or whatever, with those two commands and it centers it all. No sweat.
     There's not much I can tell you about left align either since that happens without you doing anything. It's that pesky right align that messes people up.
I mean it's really a rough deal getting the text to do that!
Why, if I could do it... I would!
     Okay, bad joke. But it gets the point across. The text above is right-aligned. And it's easy. Just surround whatever you want right aligned with this:

<P ALIGN="right"> and </P>

What About Custom Text Shaping?
     No two ways about it. If you want certain breaks here and there and you want a space here and a line to end there, you have to do all that by hand.
Use...

<BR> for a single space text jump.
<P> for a double space text jump.
  to add a space.

     And that wraps it up. Get it?! Wraps?! Man! I can be so funny at times... and then there's now. *Sigh*

[Getting Text To Wrap] [Image In the Center]
[Speaking of Tables...]
[Align One Line of Text] [Align Two Lines of Text] [Adding Blank Lines] [Aligning Text Alone]
[What About Custom Text Shaping?]
Enjoy!