Use this Dropdown Box to find a quick
link to the page you are looking for.

Lesson 4

Align Text Between Images

e have talked about text and we have talked about images. Now let's concentrate a little more on alignment. I will show you some of the ways to align your text and also to align it with your images.  

I am going to use a plain background on this page so that I can show you how to align your text and images without the extra confusion, for the moment, of a bordered background. Would you like to learn to wrap your text between two images? Well, here is how it is done!
First you add the two images, like so:
<img src="deer.jpg" ALIGN=left>
<img src="tiger.jpg" ALIGN=right>

You use Align=left and Align=right to align the images to the left and right sides of the text. Then you type the text that you want aligned between these two images like I am typing this paragraph. That should place everything between these two images. Not too hard, was it? To see another example, check out this page: About the Author. I may do a tutorial on how to make the buttons that are also displayed on that page. It is done using HTML instead of graphics. But for now, back to graphics.

Here is the source code:

<img src="images/ex1.jpg" ALIGN=left>
<img src="images/ex2.jpg" ALIGN=right>
<P>I am going to use a plain background on this page...


 

TOP, MIDDLE, BOTTOM?

 

Where do you want your text to go? You can align text at the top, middle or bottom of an image, if you like.

 

This text aligns itself at the top of the image.

This text is aligned in the middle.

This places your text near the bottom.  

This is how it's done:

First, you insert your image:
<img src="picture.gif">
Then, you add the align attribute to it, like so:
<img src="picture.gif" align=top>
That will align your text near the top of the image.
You use "top", "middle", and "bottom" to place it where
you want it to go. That's all there is to it!


Justifying Text

ne way to really clean up a web page is to use the paragraph tag to justify your text.
This is especially helpful if you have to type a whole page of information.
This is how you write it:

<P align="justify">

he paragraph below is from Texas Parks and Wildlife Outdoor Annual. This paragraph is justified. Neat looking, huh? For the next paragraph, I used two of the alignment tricks that I've shown you and put them together. Using simply the <P align="justfy:>, justifies the text, but it runs all the way from border to border on the page as you can see, so I combined the two (see lesson 3 on paragraph alignment) to set a margin width of one inch. You can set it however you like.

The code that I used below goes like this:  

<P STYLE="margin-left: 1in; margin-right: 1in" align="justify">

Non Protected, Non Game Animals Includes WILD FERAL HOGS. among others.No closed season, daily bag or possession limit for Non Game or Non Protected animals. These animals may be hunted any time by any means or method on PRIVATE PROPERTY It is against the law to hunt on privately owned land without permission from the owner. HARRASSMENT of hunters or trappers is punishable by fine of 200.00 to 2,000.00 and or 180 days in jail. (leave peoples traps alone) "Non Game Animals" - No firearms restrictions. Furthermore there are no restrictions on bows or crossbows for "Non Game Animals. RESTRICTIONS DO APPLY for protected and game animals.

Lesson 5 -- Next

Links

Home
Main Index -- List of everything!
Lycos - Search the Web
CareerPath - Where Employers and Employees Click

Email: debi@shadowfiregraphics.com