Anatomy of an HTML Document

Building a Web Site
of Your Own

Session I - Anatomy of an HTML Document

Below is a sample of a Hyper Text Markup Language (HTML) document and description of what each part of the document does. This is NOT a complete discussion of HTML but just a model to assist a beginner in understanding what is going on with a document they create either with an HTML editor or with a more sophisticated editor.

Note: All commands in an HTML document are enclosed between the "less than" and "greater than" symbols. For instance, to make part of a document italics, the commands would look something like this:

Part of this document will be in Italics and the rest is not.

The beginning of the HTML command is the . And when a command has a terminating point, it includes a slash in the symbols as with the above. Here is a side-by-side discussion of the HTML:

HTML Program Code

Explanation

<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE><HEAD>

<BODY>
<H1><CENTER>My First Web Page</CENTER></H1>
This sample includes several special HTML commands such as Italics. Also, the document includes underlining.

<HR>
Sometimes it is nice to make a list of stuff such as:

<OL>
<Li>This is the first list item
<Li>Here is a second list item
<Li>And this is a third list item
</OL>

Unordered lists are great to use - they have bullets instead of numbers when viewed in a browser.

<UL>
<Li>This is the first item in an unordered list.
<Li>This is another item in an unordered list.
</UL>

<HR Width= 150 Size= 10 NOSHADE>
Is that enough for one sample? If not, see <A HREF= "http://members.aol.com/bulwnkl/main.htm">Dr. West's site</A> or send him an <A HREF= "mailto:bulwnkl@aol.com"> e-mail </A>.

</BODY></HTML>

This signals beginning of an HTML document
HEAD and TITLE tell browser to display "My First..." as the window title. </TITLE> ends the title.

This begins the body of the HTML document
H1 means heading style #1 (largest) and <CENTER> sets alignment as centered for the paragraph. Both and <UNDERLINE> tags format the text and have matching closing tags to end the format.

This begins a new line and draws a horizontal rule. A paragraph break automatically occurs under the HR. Text in the next paragraph tells that a list will follow.
The <OL> indicates an ordered (numbered) list. Each item in the list begins with <LI> for List Item. The entire list must be terminated with a </OL> tag.

It is also a necessity to include a paragraph break at the end of the list to start a new paragraph.

The one difference between an ordered and an unordered list is that the unordered list begins <UL>.

The unordered list also ends with a </UL> tag. The last portion of the sample (below the unordered list) includes a more complex horizontal rule - a full explanation is not included but this shows how to specify a width other than full screen and a height of 10 pixels. After the line, the anchor tag <A ...> signifies an address is coming. This paragraph shows both a web address link and an e-mail address link. The text between the opening <A> and closing </A> will show up in a browser in a different color, will be underlined, and may be clicked to go to the address in the opening tag. Finally, we end the body and the HTML document with closing tags.

[Session 1] [Session 2] [Session 3] [Session 4] [Session 5] [HomePage Overview] [Top]
This site copyrighted (2005) by Dr. Blake West - Please credit when linking to the site!
Kansas NEA - 715 SW 10th Ave. Topeka, KS 66612.