HTML Lesson 1

HTML Structure

NOTE: These lessons can be found at http://www.cherryfield.net/resources/html101/

The Hypertext Markup Language (HTML) is a simple markup language used to create hypertext documents that are platform independent. (Hypertext is just a fancy word for the phrases in one document that are links to other documents.)

HTML is based on SGML (Standard Generalized Markup Language) which was developed for the US government in the 1970's and for which the current international standard was accepted in 1986. To meet these standards, documents must follow a certain structure. When a document is coded (marked up) this structure is specified using tags. These tags almost always come in pairs.

Here's a sample document:

<HTML>
  <HEAD>
    <TITLE>HTML Example</TITLE>
  </HEAD>
  <BODY>
    <P>A paragraph of text, some of which might be <B>bold</B>,
<I>italic</I>, or <B><I>bold italic</I></B></P>
  </BODY>
</HTML>

If you look at the overall structure of the document (page), you will see the entire document is enclosed in HTML tags. Every document is broken into two major components, the HEAD and the BODY. The HEAD contains the TITLE and other information about the document itself. The BODY contains the text of the document (page). In this simple page you see the BODY only contains a single paragraph (enclosed in P tags). Inside the paragraph, you see a little character formatting (the bold and/or italic text.)

The tags must be properly nested, i.e. you can't end the <B><I> section with </B></I>, you've got to end the italic tag first, and you have to end both before ending the paragraph, etc.

All you need to create HTML documents is a text editor. Even something as simple as Notepad will work. There are LOTS of editors designed to creating HTML pages. Personally I don't like most of them (I'll explain why soon), what I use is NoteTab, my favorite text editor (as opposed to a word processing program like Word or Word Perfect.)

If you view the document above in NoteTab, the tags are shown in blue (other colors are used to represent additional markup elements.)

If you don't have NoteTab Pro, I recommend you install the trial version at this point. You can get if from www.NoteTab.com. Once you have installed it, download this "Tidy" add-on -- you need to extract it into the same directory where you installed NotePro.exe ("c:\Program Files\NoteTab\NotePro" (?) by default.)

The tags provide information and suggestions about how the page is to be displayed, but the actual display format depends on the device doing the displaying. For example, this document would look very different if displayed on your web-phone. Just to get a sense of this, change the width of your browser window, you will see text paragraph reformatted, to fit the available space. Also notice that the sample document is defined as being pre-formatted and does NOT change, instead a scroll bar probably appears at the bottom allowing one to get the text that doesn't fit on the page.

This gets me to my objection with most HTML editors. The early editors worked nicely, and produced nice simple HTML pages. However, their users complained that the pages didn't always look like the page they deigned. Instead things moved around on the page. They were missing the point, this was what was suppose to happen. However, the marketing people listened to the complaints and had the programmers build editors that always produced the same page. The result is a page that might look good if you had a big monitor, running at a fairly high resolution; however, it might be a real pain for user who needs big type for easy reading and ends up having to scroll back and forth to read each line.


NOTES: (Unless you're really interested, I recommend skipping this paragraph.) There have been many versions of the HTML "standard" (but any formalized standard has lagged way behind the generally accepted standards which have been implemented in successive versions of the major browsers.) The next standard, currently being finalized, is called XML (Extensible Markup Language). I think any of the coding talked about in lessons 1 and 2 is part of the HTML 2.0 standard. One of the major additions in the HTML 3.2 standard (the next generally accepted standard) was tables. Along with HTML 4.0 came frames and style sheets. The current (2001) HTML standard is 4.01 (however, browsers started implementing HTML 4.0 features by 1998.) To find any of these formal standards, go to http://www.w3.org/TR (but they probably contain more technical detail than you want to know.)


Copyright 2001 by Wren McMains

Cherryfield.net Resources

Go on to Lesson 2

Back to the HTML Basics Index