Every HTML document begins with the tag <HTML> and ends with the tag </HTML>. Nothing outside the boundaries marked by these tags will be recognized as part of the HTML document.
The document's header information, such as the document title, owner, etc., is bounded by the tags <HEAD> and </HEAD>. Again, anything not within the boundaries marked by these tags will be recognized as part of the document head. It is very important to give each document a title (bounded by the tags <TITLE> and </TITLE> of course), as this title will appear at the top of the browser screen while viewing the document.
The body of the document, which contains the actual text which will appear as your document, is bounded by the tags <BODY> and </BODY>, as you might have guessed.
The tags described so far would give us the following basic outline for any HTML document:
<HTML>
<HEAD>
<TITLE>Put Your Document's Title Here</TITLE>
</HEAD>
<BODY>
This is where the actual text of your document goes.
</BODY>
</HTML>
Don't bother trying to make your document's text look nice by inserting spaces, tabs, blank lines, etc. An HTML browser will defeat your efforts by collapsing all such whitespace to a single space and formatting all your text into a single paragraph. You can , however, arrange your document's text nicely by using the proper tags.
You can insert a blank line and then start a new paragraph by using the paragraph tag <P> (there is no </P>).
You can end a line and have the text which follows begin a new line by inserting the line break tag <BR>.
If you want some text to be indented both from the left and right margins of the page, surround that text with the tags <BLOCKQUOTE> and </BLOCKQUOTE>.
Any text placed between the tags <PRE> and </PRE> will
be displayed exactly as typed by browsers that recognize these
tags. For example, the following is preformatted:
Column 1 Column 2 Column 3 Column 4 Column 5
34 47 76 21 11
9 30 81 13 104
Some browser programs do not recognize preformatted text tags.
You can cause a horizontal bar like the following to appear across the page by inserting the horizontal rule tag <HR>.
When you want a list of items each marked with a bullet, surround the whole group of items with the unordered list tags <UL> and </UL>. Begin each separate item in the list with the list item tag <LI> (there is no </LI>).
When you want a numbered list of items, surround the entire group of items with the ordered list tags <OL> and </OL>. Begin each separate item in the numbered list, as above, with the list item tag <LI>.
You can use the following techniques to emphasize or highlight text in different ways.
There are six levels of headings predefined in HTML. Surrounding heading text with the tags <H1> and </H1> will cause it to be displayed using the largest size heading font. Surrounding heading text with the tags <H6> and </H6> will display the text in the smallest size heading font.
As you've probably noticed, certain characters have special meanings in an HTML document. One challenge we have yet to consider is how to display these characters without having them treated by the HTML browser program in their usual special way.
An example of how to display special characters can be found right in these tutorial documents. Whenever I want to display the '<' character I have to write <. The ampersand character tells the HTML browser program to treat everything up to the next semi-colon as a literal character. The pound sign character indicates that an ASCII character code follows. Do the same for other special characters, just look up the decimal code for the character wanted in an ASCII chart and use it the same way. Some characters have been given names. For them, you can substitute the name for the pound sign and ASCII code. For example, the '<' character can be displayed by writing < in your HTML document.
Just a Note ... Though we've shown all the HTML tags in all upper case, that was just to get your attention. You can also use lower case characters for all the tags.
Well, that about covers the basics! Check out the other links from the main page for more useful information.
Click here to go back to the beginning of this page.
Click here to go back to the main menu.