What is an HTML document? It is a collection of instructions, written according to pre-defined rules, which instruct the browser how the contents of the document must be displayed. We're going to look at some of these instructions and rules.

We'll see the words TAG and ATTRIBUTE a great deal. What are they? TAGs tell the browser what to expect, text manipulation, link to somewhere, image download, etc. TAGs have ATTRIBUTES which supply the data to the browser as to how the TAGS must be applied. And finally, the ATTRIBUTES have different values that are the parameters that the browser need in order to complete the actions "ordered" by the TAGs.

A simple HTML document which contains the compulsory TAGs could be; (The <> brackets have been replaced with [] to make the HTML visible.

[!-- These characters allow you to write comments which are not visible in the document --]
[HTML][!-- tells your browser that this is an HTML document --]
[HEAD][!-- identifies the header section, we'll look at later --]
[TITLE][!-- is exactly what it says, your document's title --]
This is Natalie Schinkenpfeffer's HTML First Document!!
[/TITLE][!-- All tags have a closing tag. Its the same as the opening tag but with a '/' in front of it.--]
[/HEAD][!-- See? End of HEAD section--]
[BODY][!-- And this is where the story begins, the BODY section of the document --]
Yes! This is Natalie Schinkenpfeffer's First Ever HTML Document!!
[/BODY][!-- End of BODY --]
[/HTML][!-- End of HTML document --]

Of course, we don't write so many comments in a document so let's look at it without them.

[HTML]
[HEAD]
[TITLE]
This is Natalie Schinkenpfeffer's HTML First Document!!
[/TITLE
[HEAD]
[BODY]
Yes! This is Natalie Schinkenpfeffer's First Ever HTML Document!!
[/BODY]
[/HTML]

And what you see on the screen is: (dashes and asterisks are supposed to represent the screen.)

*Yes! This is Natalie Schinkenpfeffer's First Ever HTML Document!!

Let's have a look at a couple of BODY tag attributes that you could use, BGCOLOR and TEXT - for example using them could give you a blue screen with all the text yellow. There are other ways to adjust these factors but they fall outside the scope of this article.

With text we have a great deal of freedom as to size, sort, colour, font, etc. What we must remember is that we want visitors to our site to be able to read it easily and to understand it; i.e. it must be easy on the eye and the brain.

Let's start with paragraphs; the way to organize your text into paragraphs is as follows:

[BODY]
Yes! This is Natalie Schinkenpfeffer's First Ever HTML Document!!
[P]
And this is her second paragraph!!
[/P]
[/BODY]

The [P] tag starts a new paragraph for you after inserting an empty line, notice the closing [/P] tag.

What you see is:

*Yes! This is Natalie Schinkenpfeffer's First Ever HTML Document!!

*And this is her second paragraph!!

What if you want a break but no empty line?

[BODY]
Yes! This is Natalie Schinkenpfeffer's First Ever HTML Document!!
[BR /]
And this is her second paragraph!!
[/BODY]

What you see is:

*Yes! This is Natalie Schinkenpfeffer's First Ever HTML Document!!
*And this is her second paragraph!!

Notice the slash in the [BR /] tag, what's that doing there? There are some tags which didn't need a closing tag under HTML but XHTML, the next generation, expects closing tags for all tags. Now the [BR] tag was one which didn't need a closing tag therefore there wasn't one. This has been solved by placing the 'closing' slash in the [BR] tag itself after a space. Thus, [BR /].

Of course, you may want something a bit more definite than an empty line between our paragraphs. If you use the [HR /] tag it'll draw a line across the page for you and you can adjust the width, length and color with it's attributes.

There are tags to make your text bold, italicized, big, small and underlined. Let's see how.

bold
italicized
big
small
underlined

You may use any of these tags, for example, [B][I][U]in any [/U][/I][/B] combination you wish to get your message across but a quick word about the sequence. The sequence is unimportant for the opening tags as long as you reverse it for the closing tags. It's the same rule for all 'nested' tags - FILO - First In Last Out.

Of course the [BIG] and [SMALL] tags are OK for some situations but not for all. You can generate Headings with varying sizes using the [Hn][/Hn] tags, the 'n' varying from 1 to 5, large to small. This tag also generates a space line after the heading.

You can achieve the same sizes using the FONT tag with it's attribute. Here the "n" can vary from 7 to 1, large to small. But remember. this tag doesn't generate a line break. I use this method often because there are other FONT attributes, like "color" and "style", that can be combined within the brackets giving us lots of flexibility.

A word about apostrophes. The SIZE parameter "n", you'll have noticed, is in quotes. This applies to all attribute/parameters for all tags. Get used to using them and don't forget them, it'll do strange and unexpected things to your webpage and if you don't think about the "quotes" you'll search for the problem for hours. Believe me, I've done it.

One more thing about manipulation. If you don't instruct the browser as to where how the text should be aligned it will always be aligned left but you may want to be more flexible. Have a look at what the DIV tag does. This is the only use for the DIV tag.

[DIV ALIGN="left"]You don't have to actually define left[/DIV]
[DIV ALIGN="center"]Will put it in the middle[/DIV]
[DIV ALIGN="right"]Will put it on the right[/DIV]

If you enjoyed this article, there will eventually be 6 in total covering HTML. Good coding.