Text/Image Alignment Tutorial
Horizontal Bar
Overview:
HTML Alignment commands, as simple as they may be, are crucial to your web site's layout and design. Things would get pretty boring if everything was aligned right down the left column. Changing the default alignment to suit your needs is something that's necessary for a good web site. Read on to find out more about how to position your text and images to fit your site...
Horizontal Bar
Aligning Text ~~ Aligning Graphics ~~ In Summary
Horizontal Bar
Aligning Text:
Most documents require that you align text in a certain way. Just like in a word processor, you have commands that will allow you to left, center, and right align your text on the page. They're not hard commands to memorize, but again, you'll use them a lot, so keep them in mind when you're creating your page. Now, with that said, here's how to go about it...
Horizontal Bar
The Commands:
Left Aligning Text: This oughtta be pretty simple. There's not really a code to do it, 'cause it's default. If you want your text left aligned, just don't use the center or right align codes, and you've got it! Simple as that.

Center Aligning Text: <CENTER>Text to be centered</CENTER> -- Don't forget the </CENTER> command! The page from the <CENTER> command down will all be centered if your forget it!

Right Aligning Text: <P ALIGN="RIGHT">Text to be right aligned</P> -- Remember the ending command here also. It'll do the same as center if you forget it.
The Results:
Left aligned text.
Center aligned text.

Right aligned text.

Back to Top
Horizontal Bar
Aligning Graphics:
There's actually two techniques to use when aligning your graphics. You can use the method above and just type the commands before and after the <IMG SRC> command, *or*, you can use alignment parameters inside the image commands. Here's examples of both to show you how to do each method...
Horizontal Bar
The Commands:
Technique #1:

Left Aligning Graphics: Works the same all the way around. There's no code for left alignment. Just don't use either of the other two commands, and the graphic will be aligned on the left side of the page.

Center Aligning Graphics: <CENTER><IMG SRC="nameofgraphic.gif"></CENTER> -- Note: Center aligning your images can only be done using this method.

Right Aligning Graphics: <P ALIGN="RIGHT"><IMG SRC="nameofgraphic.gif"></P>

Technique #2:

Right Aligning Graphics (#2): <IMG SRC="nameofgraphic.gif" ALIGN="RIGHT">
The Results:


Back to Top
Horizontal Bar
The results above display what each method of HTML code will display. Using the first technique will not differ from the second. Just a little FYI.
Horizontal Bar
In Summary:
Now you have a basic idea of how to align text and graphics on your web site. By now, you should be realizing that this Hypertext stuff isn't as hard as you may have thought. It just takes some simple explaining to get ya going. Well, this about takes care of this lesson. Good luck with your future alignment endeavors!
Back to Top
Horizontal Bar
Back to Home

1