HTML Tutorial

Version 0.8.2, Sept 21, 2001

This HTML tutorial is written to give the reader the ability to write HTML documents and get a web site up and running. This tutorial should enable the reader to understand HTML quickly and also be useful as reference material. This HTML tutorial is written for the beginner. After learning information in this tutorial, the reader will be ready for more advanced subjects such as DHTML, XML, SGML, and client and server side script writing.

HTML Versions

You should be aware that there are historically many versions of the HTML specification. You will read most about the HTML 3.0, 3.2, and 4.0 specification. I have tried to display HTML tags and attributes that are supported by the 3.2 and 4.0 specification, but cannot guarantee that all tags and attributes contained herein will work in all versions of HTML. There are several HTML common document types when refering to HTML 4.0 which are:

  • Strict - HTML 4.0 without frame or HTML 3.2 depreciated feature support.
  • Frame - HTML 4.0/3.2 with frame support.
  • Transitional or loose - Supports features of HTML 3.2 that are being depreciated in HTML 4.0. This DTD does not support framesets. Some depreciated tags/elements not supported by strict HTML 4.0 are CENTER, FRAME, FRAMESET, NOFRAMES, IFRAME, ISINDEX, DIR, MENU, APPLET, BASEFONT, FONT, S, STRIKE, and U.

This tutorial covers most commonly used HTML elements and attributes, but not all. For an excellent source of information regarding available HTML 4.0 elements and attributes, refer to the Web Design Group's web page, HTML 4.0 Reference section. Used in combination with information from the Web Design Group and the World Wide Web Consortium web pages (See the links section or "Recommended Reading" section of this document for URL) this document should provide a thorough introduction to HTML.

HTML Support

You should also know that many of the element tags are being depreciated in favor of cascading style sheets. This means that some of the attributes with regard to text fonts and color are being depreciated and these values are to be controlled using the style sheets. This makes it easier to control the attributes of multiple HTML documents such as the HTML in this document from one cascading file sheet file. You should learn at least minimal control of attributes using style sheets before writing great quanties of documents and thereby being forced to go back and change your files. Some examples in this document demonstrate the use of style sheet and inline style commands. Many of the elements not supported by the strict HTML 4.0 document type definition (DTD) will be noted with the word "depreciated" where they are presented.

One other consideration to be aware of is that various client web browsers have various support for various methods of setting attributes and displaying information that is contained in web pages. For instance, not all older web browsers support frames, but most clients should have web browsers today that support frames. Also some style sheet properties may be supported by some browsers but not by others. The best way to determine what will work is to read referenced documentation and experiment.

Getting ready to create a website

You can create your web site off line using a standard text editor, an HTML text editor, or a HTML graphics editor. I recommend using an HTML text editor which lets you see the HTML tags in a different color than the surrounding text which makes them easier to see. The free ware editor, Arachnophillia, is a good choice to begin with. There are also some editors which perform validation dynamically. One of these may be an even better choice if you can obtain one.

Directory Structure

You will want to create your web pages in a separate directory on your computer and as you link deeper into your web pages you will want to create more sub-directories. Normally, I use the following structure:

  • mainpage - The main folder for your web page, name it an appropriate name for your web site. Your HTML files for your home page will go here.
  • gifs - Where I put all gif files to be used in common with the mainpage and other pages such as buttons used to provide links to other parts of my web page. I usually place all backgrounds here. I do not put pictures for specific sections here. For example, all pictures that are used in "The CTDP Networking Guide" are placed with the HTML files in that folder.
  • subject1 - In the case of the CTDP, this may be "Linux". Your html and graphics files for a particular web page subsection will go here.
    • Subject1/sub1 - Sub subjects of subject 1.
    • subect1/sub2
  • subject2 - This may be "networking".
  • subject2.

Starting with a Template

To begin your first web page, you will want to create a template from which you can start all your pages which has the basic structure of an HTML document as shown in the "HTML document Structure" section of this document. You can copy the example file shown there into your editor's file or make your own. You will want to follow the standard HTML structure of HTML, HEAD, and BODY elements. If you want to set your HTML page with multiple frames, for example with an HTML index on the left side for easier document viewing, you will need to become familiar with the section on FRAMES before you begin. If working with frames is initially too complicated, stick with the standard HEAD, BODY structure until you gain familiarity.