If you¡¯re interested in web design, then you¡¯ve undoubtedly encountered the acronym ¡°HTML.¡± Learning HTML can be a daunting task, with so many tutorials all over the web that have many different approaches and are filled with many different opinions about where you should start.

In this tutorial, I¡¯m going to start at the very beginning¡ªwhat makes a web page different from any other document? From there, we¡¯ll move on to the basics of HTML, how HTML works differently from other types of documents, and how to begin learning it. I¡¯ll also submit my recommendation for what software to use when you write HTML code, as it is my personal favorite and the one that I use in my work at Firefly Interactive (and it¡¯s free).

Web Pages vs. Word Processor Documents

Most documents that you create on a computer contain hidden elements of machine code in them that control how the document is displayed. This code controls everything about the document¡¯s appearance: background color, margins, paragraph alignment, line spacing, font family, text size, text style (bold, italic, underline, etc.), text color, line breaks, placement of images, tables, borders, rules, page breaks, white spaces, etc. This formatting code is binary, and can only be read by the word processing application (MS Word, Corel WordPerfect, etc.), not by humans.

These types of documents are binary, meaning that they contain a lot more data than just the presentable content. Documents in these binary formats can generally only be displayed in the word processing application that was used to create them, or in another application if it is designed to be able to read that particular format. For example, let¡¯s say you created a Microsoft Word Document in MS Word. You can only open that document either with MS Word, or with another application that can handle the .doc format, such as Corel WordPerfect. If you tried to open that document in a web browser, it would either not open at all or it would display as a huge mess of gibberish characters.

Just the same as with a web browser, if you were to try to open a Word document in a plain text editor such as Notepad, the screen would be covered with those same kinds of nonsense characters. These characters are Notepad¡¯s attempt to make sense of the binary formatting code in that document.

The Language of the Web: HTML and CSS

Web pages also have formatting code¡ªbut with one key difference. The formatting code used in web pages is designed so that it can be easily read and written by humans, not just by machines. This web page formatting code comes in the form of two primary languages: HyperText Markup Language (HTML), and Cascading Style Sheets (CSS).

A common mantra in web site design is the separation of content from presentation. Hence the two different languages: HTML is used for building the web page content, and CSS is used for styling the presentation of that content.

The HTML language itself is an application of IBM¡¯s Standard Generalized Markup Language (SGML), which is a powerful¡ªbut extremely complex¡ªlanguage that was originally devised for some very industrious purposes. HTML has been revised several times over the years, and the latest version of it as specified by the World Wide Web Consortium (W3C)¡ªHTML 4.01¡ªwas put into use in August of 1999.

There is also a related markup language called XHTML, which stands for eXtensible HyperText Markup Language. The XHTML language is an application of eXtensible Markup Language (XML) as opposed to SGML. Most modern web browsers support XHTML to some degree, but there is generally a fundamental flaw in most XHTML documents on the web¡ªa certain line of code in the document tells the browser that the document is HTML, and so the browser renders it as an HTML document with hundreds of markup errors.

For this reason and several others, in this tutorial series I¡¯m going to focus on teaching HTML 4.01. This incarnation of HTML is supported by all web browsers, it always works in the way that the W3C intended for it to work (when the markup is written correctly), and it has all the same features and capabilities as the newer XHTML anyway (that is, in the context of creating static web pages). Even in the year 2007, good old HTML is still the way to go when writing static web pages.

The only reason that I even mention XHTML is because a large percentage of commercial website templates on the market today are written in XHTML. It really isn¡¯t much different from HTML, and I will point out some key differences between the two throughout this HTML tutorial series.

HTML and CSS Files: Plain Text Documents

For now, let¡¯s focus on the basics. An HTML document is what is called a plain text document, meaning that is contains no hidden formatting code. The only information contained in the file is the actual text that appears when you open it. Plain text documents can be created in any plain text editor, such as Notepad. To save the file as a web page rather than a text document, all you have to do is save it with a .html file extension rather than a .txt file extension.

For example, let¡¯s say you¡¯ve created a document in Notepad that is all about your favorite cars, and you want it to be a web page. Instead of the saving the file as favorite_cars.txt, save it as favorite_cars.html. Once you¡¯ve done this, double-clicking on that file will open it in your web browser instead of in Notepad.

CSS stylesheet documents are also plain text documents, and need to be saved with a .css file extension.

The Learning Approach

So far so good, right? Learning HTML is like learning any other language. Before we memorize a bunch of vocabulary words, we need to understand the grammar. In computer parlance, the ¡®grammar¡¯ of a language is called its syntax. The first goal is to figure out the syntax of HTML, and just get a feel for it and how it flows.

After that, it¡¯s just a matter of building up your HTML vocabulary. In this series of tutorials, we are going to use an approach that is based on taking specific document creation tasks, such as creating a heading or a list, and showing how to use HTML to perform those tasks in the creation of a web page.

Software Recommendation

When you edit HTML documents, it is absolutely essential that you use a plain text editor¡ªnot a word processor! Please do not edit web pages with Microsoft Word, Corel WordPerfect, WordPad, Star Office Word Processor, or any other word processing software that lets you change the fonts, colors, background, page layout options, etc.

Luckily for us web designer/developer types, some of the best things in life really are free. The best plain text editor that I¡¯ve ever used¡ªand I mean by far the best¡ªis a freeware application called Notepad++. It has all the features you need:

• allows you to have multiple files open at once
• displays code and content in different colors for easy document readability
• built-in menu options and buttons to give you a fast preview of your page in whichever web browser you choose

discuss this topic to forum