How can I place my text where I want it?
Aligning text on your page is a fairly simple but rather limited process. You cannot simply place the text anywhere you like. Basic HTML code is too limited to allow that.
There are two basic ways of aligning text blocks. First you can move a text block by itself around on a page, and secondly, you can align blocks of text around images. Trying to fit text in and around images can be quite a challenge.
If you have not yet read the tutorials regarding Image Tags and how to use them, you should probably do that first before moving on to this tutorial.
Aligning Your Text With Images
Let's pretend you have a picture of yourself on your web page. Let's call it MYPIC.JPG.
We will need an Image <IMG> Tag for the picture to start with:
<IMG SRC="mypic.jpg" WIDTH="50" HEIGHT="50" ALT="My cool picture" BORDER="0">
Now, let's say you want to add a caption to it to describe it for your visitors, that reads "This is a picture of me".
If you add an ALIGN= Attribute to the Image tag you can tell text where to put itself in relation to the picture. Correct Values for the Image <IMG> Tag ALIGN= Attribute are: "top", "middle" and "bottom".
We would add the ALIGN= Attribute to the Image <IMG> tag, and the text you want to use as the caption like this:
<IMG SRC="mypic.jpg" WIDTH="50" HEIGHT="50" ALT="My cool picture" BORDER="0" ALIGN="middle">This is a picture of me
Here is your 'picture' and text:
ALIGN="top"
This is a picture of me
ALIGN="middle"
This is a picture of me
ALIGN="bottom"
This is a picture of me
This method works well to a limited degree. If your text gets longer than a few words it begins to wrap very strangely. Aligning text around Images is much much simpler using Tables. When you are ready and have mastered these basic steps move on to the Table tutorials for more information on placing page elements much more precisely.
Aligning Your Text Without Images
Formatting and aligning text blocks can be a little tricky. The first two Tags we can use for this purpose are the Paragraph Tag and the Line Break Tag.
The Paragraph Tag is written like this: <P>
The purpose of this tag is to tell your browser when to display a new block of text. It will drop the cursor down two lines, creating a blank line and then display your text block. Older HTML tutorials will tell you to use the Closing Tag </P>, but this is no longer necessary. When a browser encounters a <P> tag it recognizes that a new paragraph is about to begin and acts accordingly.
The Line Break Tag is written like this: <BR>
The purpose of this tag is to tell your browser that a line of text has ended. It will drop the cursor down one line. Any text following the Line Break Tag will be displayed on the new line.
Let me show you the Paragraph tag in action:
Roses Are Red<P> Violets Are Blue
This will be displayed in your browser like this:
Roses Are Red
Violets Are Blue
As you can see, the text after the Tag is dropped down two lines to begin a new paragraph.
Now let me show you the same text with the Line Break tag:
Roses Are Red<BR> Violets Are Blue
This will be displayed in your browser like this:
Roses Are Red
Violets Are Blue
In this example you can see that the text after the tag is only dropped to the next line and the text is displayed at the beginning of that line.
We can also use the
Paragraph <P> tag and the ALIGN= Attribute to align text blocks further. The Correct value's for the ALIGN= Attribute, in this case, are "left", "right" and "center". Let's code some example paragraphs:
<P ALIGN="left"> This is the first paragraph
<P ALIGN="center"> This is the next paragraph
<P ALIGN="right"> This is the last paragraph
Coding the paragraphs as we did above will give you:
This is the first paragraph
This is the next paragraph
This is the last paragraph
Good luck trying these tutorials on your site!
