Well here we are, well on our way to making a great website. You have the basic understanding of how to make a webpage, and you should even know how to format text with the best of them.

At this point in the tutorial, we will be basically presenting you with some more basic tags to give you a better idea of how to format your webpage, before we go onto page design.

Headers

To separate headers from the rest of the text you can use h tags. There are 6 of them and here they are...

	This is the h1 tag
	This is the h2 tag
	This is the h3 tag
	This is the h4 tag
	This is the h5 tag
	This is the h6 tag

You should be able to see from the example above how these tags are used and what they do.

NOTES:

• h1 is the largest, and h6 is the smallest
• a space is added above and below the h tag on an html page automautically

Line Breaks

With html What-You-See isn't always What-You-Get. HTML automautically ignores excess space in a document, so you can't just hit enter a bunch of times and expect text to jump down that many lines. You have to use line break tags like so..

Example:

This is text. And so is this.

The
tag doesn't have any closing tag. It tells the document to jump to the next line. Sometimes, this will jump to another line, but there will still be items to the left or right of where you end up. In this case you can use the clear attribute with the br tag like so:

< br clear="all" >

This will tell the html document to "clear" everything when it jumps to the next line.

HR lines

This is another nifty tag. To automautically insert a horizontal rule (HR line) into the document, use the hr tag.

Will produce this:

The hr tag can be slightly customized, but it is better to do this with CSS (which, at this point in the tutorial we will assume you do not know how to do this) so we are going to just stick with a basic hr line for now.


Paragraphs

Paragraphs are an important part of html. While not necessary, they can help you in formatting text displayed on your screen much easier than when not using them. When using the paragraph tags, a blank line is automautically inserted above and below the paragraph like so:

This is a paragraph And this is another paragraph

You can specify the alignment of the text within a paragraph with the align tag. Valid alignments include

• left
• right
• center
• justify

You use the attribute like so:

<p align="center">This paragraph is aligned in the center. I'm just adding some bogus text in here so you can see the full effect of this aligment attribute. It is better to use styles (CSS) to alter the alignment of a paragraph, but don't let that discourage you from using the align tag in your html ventures.</p>

Which will produce this:

This paragraph is aligned in the center. I'm just adding some bogus text in here so you can see the full effect of this aligment attribute. It is better to use styles (CSS) to alter the alignment of a paragraph, but don't let that discourage you from using the align tag in your html ventures.

Preformatted text

By now after tinkering with your code for a while, you may be noticing that your webpage doesn't always agree with you on how text should display. You can add as many spaces as you like and still there is always just one between text items. One way to circumvent this is with preformatted text.

The < pre > tag is used like so...

<pre>This text preserves line breaks and spaces both! Ain't that cool? </pre>

This text preserves line breaks and spaces both! Ain't that cool?

Webpage Background

Ok. We have a few basic tags presented to us, but I'm sure at this point your main concern is the "ugly white page". You want a background texture or at least a color other than white

What you want to do in this case is add your first attribute to your HTML document (boy I am so proud of you ).

Find your < body > tag. If you want to add a background image or pattern, you will want to make this < body background="yourimage.jpg" > and if you wish to make your background a different color, you would make this < body bgcolor="blue" > substituting blue for whatever color you want your background to be

First warning I will give you....if you decide to use images, you must understand file structure. If you use the code presented above, the background image must be in the same directory as the webpage you are working on...the code doesn't know to look anywhere else.

Say, for example, your background image is in a folder called "images" underneath your index.html...you would want the body tag to read < body background="images/yourimage.jpg" > (of course if it is not a jpg image, change the extension to whatever it should be).



Conclusion

At this time we are going to break from our fun so you can absorb these tags and integrate them into your html document. With the use of these tags, you should find you have a lot more control over your webpage and they way your page looks.


Click here to move on to Part 4 of this tutorial! -->