Building a simple HTML Document

HTML uses tags embedded in the document to instruct the browser how to display the page. HTML tags:

  • Are always enclosed in < > brackets.
  • Generally occur in pairs with an opening < > and a closing </ > tag. Anything in between the opening and closing tags will be effected by the tag. for example:

    <i>This is Italic</i>

    Some tags such as <br> (line break), <hr> (horizontal rule) and <img> (image) do not require closing tags.

  • Can include one or more attributes. For example, in the tag

    <img scr="picture.gif">

    "img" is the tag name and "scr" is the attribute which which defines where the image can be found.

  • Are not case specific. <HTML> is the same as <html> or <Html>. While HTML tags are not case specific, the content of attributes may be. For example, <img scr="picture.gif"> may not be the same as <img scr="Picture.GIF">. Attribute values which are longer than one word should be enclosed in quotes ("").
Here's a simple HTML document which you can use as a template when making you own web pages:

<html>
<head>
<title>Your title goes here</title>
</head>
<body>
Your text, graphics and other multimedia elements go here.
</body>
</html>

Here's how this document would appear in your browser:

Your text, graphics and other multimedia elements go here.

You will notice that tags enclosed in < > brackets do not appear when the document is displayed in the browser. (They did in the first example because I included special tags so you could see them.) The four tags included in this simple page form the backbone of all HTML documents:

  • <html> - Defines the document as one written in HTML.
  • <head> - Defines the introductory section of the page which includes the title and perhaps other information.
  • <title> - Defines the title which will be displayed at the top of the browser window.
  • <body> - Defines the main section of your page which includes the text, graphics and other multimedia elements.
While the text and multimedia elements (graphics, audio and video) determine the content of a page, it is the HTML tags which determine how the document will appear on the screen. For example, suppose you typed the following HTML page:

<html>
<head>
<title>A Sample Document</title>
</head>
<body>
Charles Albritton
123 Main Street
Yourtown, USA

This is a sample HTML document. It contains several line and paragraph returns.

So long.
</body>
</html>

Here's how this page would appear in your browser:

Charles Albritton 123 Main Street Yourtown, USA This is a sample HTML document. It contains several line and paragraph returns. So long.

Probably not what you intended. In HTML, the browser interprets the page based only on the HTML tags, not the spaces, tabs or returns included in the test. Two additional tags are needed to make this document appear as you would expect:

  • <br> - Instructs the browser to continue the document on a new line. Several <br> tags will produce several blank lines. <br> has no closing tag.
  • <p> - Instructs the browser to continue the document in a new paragraph with a blank line in between. Paragraphs can be aligned left, right or center with the align attribute. Left is the default alignment.
Here's the document including <br> and <p> tags:

<html>
<head>
<title>Another Sample Document</title>
</head>
<body>
Charles Albritton<br>
123 Main Street<br>
Yourtown, USA<br>
<p>
This is another sample HTML document. It contains several line and paragraph breaks.
<p>
So long.
</body>
</html>

Finally, here's how it would appear in your browser:

Charles Albritton
123 Main Street
Yourtown, USA

This section has provided you with the basic tags that are needed to build a web page -- <html>, <head>, <title>, <body>, <br> and <p>.


Use your BackSpace key to return to the MAIN page
Copyright,�, 1998, Charles and Susan Albritton.
Site Design and Maintained by Charles and Susan Albritton
If you have any questions or Comments mail to WebMaster 		Go to Top Of Page