Basic HTML Web Site Formatting

Now that we've learned about font manipulation through HTML, the next step is, quite rightly, how to format your site so that you have more than just a bunch of blocked up text. This tutorial will go through the basics of alignment, paragraphing, and so on. Keep in mind this is just the basics of formatting. Further structure and formatting at an advanced level will be covered in another tutorial.

Our first stop will be alignment. HTML affords a couple of different methods to align our site elements. The text area below shows one of these methods which I'll discuss in greater detail below.

An Explanation of Format Altering HTML

Placement : Center and Align commands are placed between the Body and /Body commands in a document. They may appear at the beginning of the document, or anywhere throughout the body area, but will affect only the elements that follow the command, but do not appear after the command is ended.

The Format : As with all other HTML commands, the center and align commands are also enclosed in <>. The align commands must always start with the word align, followed by a space, followed by an equals sign, quotation mark, and then a value which is a command telling the computer to change the element and make it equal to the value you enter in quotation marks. Align tags must be ended with a /align tag after you've finished typing the elements you wish to be changed.

The Center Tag : The Center tag will align any element (text, image, table, etc.) that follows it to the center of the page (horizontally). These list items are not centered, but, if I do a page break and then use the center command This text will be centered. If I use the end center /center tag and do another page break

the text is no longer centered. The center tag can be used anywhere in the body immediately in front of a new line that you'd like centered and should be closed with the /center tag immediately following the centered element.

After you've used the center tag to align your headline at the top of your web page, you may realize you're wanting to type some paragraphs. HTML has a special tag for this as well, as I've showed you in the textarea below. Another way to format text is using blockquotes which are indented at both margins. I've also included this code and an explanation.

An Explanation of Paragraphs and block quotes HTML

Placement and Format : The P and Blockquote tags belong in the body at the beginning of your paragraph or blockquote and must be closed immediately after the quote or paragraph with the /p or /blockquote tags respectively.

The Paragraph Tag : The paragraph tag is used during textual sections of a site to tell the visitors' computers to display text in a neat paragraph.

Note that paragraphs always begin on a new line. Anything typed after the /p tag appears on a new line as well. Paragraph text is NOTnormally indented. That is a seperate topic for later discussion.

The Blockquote Tag : Blockquotes are like double indented paragraphs. This text was done as a blockquote. If I keep typing long enough to actually take up more than a part of a line you may really get to see the double indented aspect of blockquotes.

I've returned to normal text by entering the /blockquote tag. Note that, like the paragraph tag, blockquote places all text on a new line, with text following the blockquote element also on a new line. The final area we're going to delve into in regards to formatting at this juncture is line breaks. These can occur in a variety of ways using HTML. We'll cover two of them here. Look over the code snippets in the text area and then read on for further explanation.

An Explanation of Breaks in HTML

Placement and Format : Both the br and hr tags can be used anywhere in the body of an HTML document. Neither require a closing or end tag. Place them exactly where you want the break to occur.

The Break Tag : The line break tag is the equivalent to hitting the return key of a computer when word processing. I'll insert a br tag now
Notice how this text is on a new line, but there is no noticeable break. I'll add two br tags now

Notice now that this is another new line and there is a noticeable break between this line and the previous. You can use as many br tags in a row as you'd like for proper spacing.

The Hard Return Tag : The hr tag causes a break that is visible in that a thin line horizontal line appears across the computer screen where the hr tag was placed. I'll add an hr now

See how the horizontal line has shown up and this text is on a new line. Like br tags, hr tags may be used in multiples. However, entering three hr tags in a row wouldn't just move your text down, it would create three horizontal lines as well!!

This completes the basic formatting tutorial. Lets take a look at what we can do with the HTML we've covered in the three tutorials so far.