Are you ready? Time to take the small pieces we have learned and discover how to format them into a fully functional page.
Here is where we will show you some simple text tools of formatting and aligning.
You'll see how you can put your image where you want on the page as well as text.
We will give you three versions.

  Straight down center format
  Staggered text and image format
  Image and text on side by side format

Creating a fine looking page can be as simple as a font color or size of text to set your page off.
This basic tool is a foundation for text. We'd like now to place our title on our page for all to see.
This is done with the < H1 > we told you about earlier. This means header and size.
1 being the largest. You can also make it smaller as in < H4 >.

Elainz Exciting Action Page     Lesson Four A X

Elainz Exciting Action Page Elainz Angelz Elainz Afghanz

Elainz Toolz

This is set with the default text from the top of our html document. So you want to change it? We'll try. Simple!
Here is the code: < font color= "" font face= "" >
Color for text < font color= "purple" >
Font for text < font face= "Cataneo BT" >
Size for font < font size= "4 " >

Elainz Exciting Action Page     Lesson Four A X

Elainz Exciting Action Page Elainz Angelz Elainz Afghanz

Elainz Toolz

You may use any font you like just type it in the code, < font face=" " >
Some fonts are not used by all computers so start with a simple font. Your font size < font size=" " >
will be put where you want to change size. The same as for the < font color=" " >
Just change them when and where ever you wish. Note! These fonts must be closed following use where you want the tag.
If it is not close the change will follow the entire page. Please close your work!

  Straight down center format

Now you may use our first center tag.
Formatting text:

Center < center > < /center >
Paragraph < p >
Line brake < b r>
Paragraph left < p align= "left" >
Paragraph right < p align= "right" >

Elainz Exciting Action Page                             Lesson Four A X

Elainz Exciting Action Page Any time you like we will show you how the text will view on our page. This shows Center! See how the text is centered on the page. On this page you will find all the text and images are centered on the page. This is a quick way to make a page putting images then text... Elainz Angelz Elainz Afghanz Here you can click on the images and go to the web sites.

Elainz Toolz

Notice that the center tag opens at the start of the text and ends at the end of the body.
This will hold all text and images centered the document.
This is the quick and easy way to format your web page.
With just a scroll all your text and images will be on your page. The < p > paragraph tag is the one to use here.
This will send each image and each text into spaced fields one under the other.
If you want them on the same line just don't put the < p >.
Remember that word wrap is always in affect and you will have to view your page to see if this is how you wish the page to look.

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
    < TITLE >Elainz Exciting Action Page < /TITLE >
< /HEAD >
< body background="back02ax.jpg" bgcolor="violet" 
text="black" link="purple" vlink="red" alink="blue" >
< p >
< center >
< font color="purple" font face="Cataneo BT" font size="4" >
Elainz Exciting Action Page< /font >
< p >
Any time you like we will show you how the text will view on our 
page. This shows Center! See how the text is centered on the page.
< p >
< center >< a href="http://dezart.biz/toolz/etoolz.html" >
< img src="images/etoolzhtmlsm.jpg" 
width="150" height="75" alt="Elainz Toolz" border="0"  >
< /a >
On this page you will find all the text and images are centered 
on the page. This is a quick way to make a page putting images 
then text...
< p >
< a href="http://dezart.biz/angelz/eangel.html" >
Elainz Angelz< /a >
< a href="http://www.dezart.biz/afghan/afghanz.html" >
Elainz Afghanz< /a >
< p >Here you can click on the images and go to the web sites.
< /center >
< /body >
< /html >

  Staggered text and image format

This page will make word wrapping around text. We have used here the simplest test we could find.
By using the code:
vspace= "40"
hspace= "20"
The vspace and hspace is by far the simplest way to wrap text.
The perimeters on the vspace and hspace are just designating how far to space pixels between image, from side or top.
This is spacing your text around an image. To have the image and text seem to be on the same line. Page Right and Left.
This is a hard thing to have work. We have spent long hours finding this out. Along with this code we have used < p > and < br >
to off set our text and image so they seem to align next to each other.
Try this code, you'll see what a difference it can make. This one is easy.
You will have to look and look at your html until you have the right spacing desired. Go head and try this one.

Elainz Exciting Action Page                               Lesson Four A X

Elainz Exciting Action Page

Any time you like we will show you how the text will view on our page. This shows Word Wrap! See how the text is wraped on the page.

On this page you have text and an image in the same field. The text seems to be in a box to the side. But it is wrapped next to the image. This is a simple way to wrap without puting text into a separate table cell.

On this page you will find all the text and images are centered on the page. This is a quick way to make a page putting images then text...

Elainz Angelz

Elainz Afghanz

Here you can click on the images and go to the web sites.

Elainz Toolz