HTML Reference Center
Document Summary Report
Written by Mike Ware on June 5, 2003

The HTML Reference Center tutorial will be devised in the form of two main parts. The first part will consist of articles that describe the major areas of HTML. These articles will explain the skills beginning web designers need to develop when working with these topics and will illustrate how HTML is used to aid in the development and creation process of that particular topic. The second part will consist of a complete reference listing and formal description of all HTML tags available.

Part 1 - HTML Topics

HTML Topics to be covered in the tutorial are as follows:

    --> What is HTML?
    --> Where do I begin?
    --> Marking Up with Tags
    --> Displaying and Formatting Text
    --> Getting Out and Around Using Hyperlinks
    --> Imaging, Image Mapping, and Image Editing
    --> Organizing Content Using Lists
    --> Adding Structure Using Tables
    --> Getting Visitor Feeback With Forms
    --> Behind the Scenes With Frames

What is HTML?
This article will define HTML and state brief history facts as well as explain what a person needs to develop web pages. It will also list many basic web terms that will be used throughout the rest of the tutorial.

Where do I begin?
This article will introduce the standard structure of an HTML document and describe the tags that every web page should contain. It will also depict some of the attributes of the body element and will provide step by step instructions of how to create a web page document using HTML.

Marking Up with Tags
This article will cover the most important aspect of HTML: tags. It will illustrate what a "tag" actually consists of and will describe each basic HTML tag (html, head, title, body). Document structure tags and document formatting tags are used to provide examples of how to "mark up" a web document.

Displaying and Formatting Text
This article will describe the tags needed to render text and will describe the character formatting tags capable of specifying the apperance of text in a web document. Text tags (text-level and block-level) are used to provide examples as well as show disadvantages and advantages.

Getting Out and Around Using Hyperlinks
This article will introduce how web pages "talk" to eachother and explain why web users have the ability of moving from one web page to the next or from one web region to the next. The anchor tag ( a ) is formally described to illustrate how web users get out and around while surfing the www.

Imaging, Image Mapping, and Image Editing
This article will cover the tags needed to add life to web pages using images. It also explains why imaging is important to web design, and how image editing is vital to creating unique web pages. The creation of image maps will also be covered with examples to re-inforce the material.

Organizing Content Using Lists
This article will illustrate how web page content may be organized in a neat fashion with the help of lists. Each list type (OL, UL, DL) will be formally described and illustrations will be provided to show which list type should be used in certain situations.

Adding Structure Using Tables
This article will describe the most powerful element that exists: the table tag. Tables are one of the most important aspects of HTML, to me, and care will be taken to illustrate the capabilities that tables possess. It will also cover how tables are commonly used to add structure to a web document.

Getting Visitor Feedback With Forms
This article will describe how a form is displayed using HTML, and how forms are processed using some type of scripting language. Form elements will be described and illustrated with examples. A final note will summarize that an HTML form is absolutely worthless, unless for general layout purposes, without a server-side scripting language to process the form data.

Behind the Scenes With Frames
This article will cover what frames are and how they are used in developing web pages. It will also explain why special caution must be considered when working with frames and will list advantages/disadvantages of using them in a web page.

Part 2 - HTML Tags

The HTML tags section consists of a complete description of each tag in HTML. The tags are grouped into the following categories: document structure, heading, text (block-level), text (text-level), hyperlink, image, table, form, frame, document formatting, list, applet/plug-in, and scripts. Each category will also have an introduction depicting the capabilites of the tags it contains. A complete listing of tags to be covered in the tutorial is as follows:

Document Structure Tags
    <html> </html>
    <head> </head>
    <body> </body>
    <comment> </comment>
    <bdo> </bdo>

Heading Tags
    <title> </title>
    <base>
    <meta>
    <style> </style>
    <link>
    <bgsound>

Text : Block-Level Tags
    <address> </address>
    <blockquote> </blockquote>
    <div> </div>
    <h(1-6)> </h(1-6)>
    <p> </p>
    <pre> </pre>
    <xmp> </xmp>

Text : Characteristic Tags (Text-Level)
    <b> </b>
    <basefont>
    <big> </big>
    <blink> </blink>
    <cite> </cite>
    <code> </code>
    <em> </em>
    <font> </font>
    <i> </i>
    <kbd> </kbd>
    <plaintext> </plaintext>
    <s> </s>
    <small> </small>
    <strike> </strike>
    <strong> </strong>
    <sub> </sub>
    <sup> </sup>
    <tt> </tt>
    <u> </u>
    <var> </var>
    <q> </q>
    <samp> </samp>
    <del> </del>
    <dfn> </dfn>

Hyperlink Tags
    <a> </a>

Image Tags
    <img>
    <area>
    <map> </map>

Table Tags
    <table> </table>
    <caption> </caption>
    <tr> </tr>
    <th> </th>
    <td> </td>
    <col> </col>
    <colgroup> </colgroup>
    <tbody> </tbody>
    <tfoot> </tfoot>
    <thead> </thead>

Form Tags
    <form> </form>
    <input>
    <select> </select>
    <option>
    <textarea> </textarea>
    <isindex>
    <button> </button>
    <fieldset> </fieldset>
    <label> </label>
    <legend> </legend>

Frame Tags
    <frame> </frame>
    <frameset> </frameset>
    <noframes> </noframes>
    <iframe> </iframe>

Document Formatting Tags
    <br>
    <acronym></acronym>
    <center> </center>
    <hr>
    <multicol> </multicol>
    <nobr> </nobr>
    <spacer> </spacer>
    <span> </span>
    <wbr>

List Tags
    <dd> </dd>
    <dir> </dir>
    <dl> </dl>
    <dt> </dt>
    <li> </li>
    <menu> </menu>
    <ol> </ol>
    <ul> </ul>

Applet / Plug-In Tags
    <applet> </applet>
    <param>
    <embed> </embed>
    <noembed> </noembed>
    <object> </noembed>

Script Tags
    <script> </script>
    <noscript> </noscript>

Each tag will be described using the following layout (unless you wish for me not to place the tag information in this layout and simply write a text based document). Tag descriptions include: category , usage, attributes, code tip, live example, supported browsers (ie, netscape, opera), related reading resources, pheaven related readings, user comments section, and user tag search.

The general layout for each tag is as follows. This is an example of the comment tag.

/////////////////////////////////////////////////////////////////////////////////////////////////////////
< br>

Document Structure Tags
Overview:

These tags define the global structure of web page documents. They specify that the document contains hypertext markup (html) and ultimately divide a document into two main sections: "head" and "body". Although these tags are not capable of producing sharp looking web content, they are a necessity when developing well structured web documents.

 Tag:    <!-- ... -->

 Usage:

Used for documentation purposes within a web document. Documentation refers to statements in HTML source code that do not affect the code itself used for describing the purpose of particular code segments.

 Attributes:

None.

 Code Tip:

Placing comments in your code is vital when working with complex code containing many different elements. It helps you and other people understand what certain code segments are accomplishing and will make updating extremely easier. It is good programming practice to use adequate comments in html code, and it is a good habit to get into if you decide to learn other computer programming languages.

 Live Example:

For a live code example illustrating this tag, click here (not implemented).

 Support:

Internet Explorer
Netscape
Opera

 Additional Tag Information and Resources

 --> Related Readings

 

--> Programmer's Heaven Related Articles

 Comments

Do you have suggestions, tips, or tricks concerning the <!-- ... --> tag? If so, here is your oppurtunity to let others learn your secret. Post your comment now!


 Tag Search

Search for a particular tag:



<-- Back to Complete Tag Reference Listing (not implemented)

/////////////////////////////////////////////////////////////////////////////////////////////////////////
< br> This completes the summary report for the HTML Reference Center tutorial. Please send me additional suggestions or comments concerning the report and let me know where I should go from here. Till then, happy coding.

Mike Ware
[warebiz] :: "The Programmer's Domain

Back to Top