HTML tutorial
This tutorial will teach you how to write modern, clean HTML by hand. There are several WYSIWYG tools out there that write it for you. I strongly recommend learning to write by hand at first—you will get a better understanding of what is actually happening.
The technique being used in this entire web authoring section is to keep content and presentation (styling) separate. By the end of this tutorial, you will be able to write complex HTML files, but they will still look plain. Don’t worry—the CSS tutorial will fix that, but we need to build the foundations first.
Any recent graphical web browser will do to see the examples in this tutorial. Text browsers like Lynx are fine except for the table and image sections.
Specifications
Throughout this tutorial, I have sprinkled [spec] links that take you to the relevant section of the HTML-4.01 specification at the W3C site.
These specs can be daunting technical for a beginner. Don’t worry if they look frightening: the links are only included for interest. Often, the referred section of the spec includes more information than the tutorial is discussing. By all means read extra stuff, but don’t get out of your depth.
Definitions
There’s a bit of jargon to learn first. It will all make sense, I promise!
The ML of HTML stands for mark-up language. HTML consists of text only— there is no bold, no italics, no fancy fonts, just letters, numbers, symbols and spaces. HTML is a “code” that describes the structure of the content. Rules in the user’s browser tell it how to display the structure in the HTML, which can be overridden by CSS styling rules (see the separate tutorial when finished.
Let’s look at an example. In the old days of writing a book, the author would write the manuscript on a mechanical typewriter, and send it off to a print shop for printing. If the author wanted to emphasize a word by using italics, he couldn’t do so directly, because the typewriter would not do italics. Instead, he would underline the word, and the printer would convert that to italics.
In HTML, you are the author, and the browser is the print shop. To emphasize a word, you surround it with tags, forming an emphasized element:
In this example, determined is the
emphasized element, which is started with the <em>
opening tag, and ended with the </em>
closing tag.
<em> is a defined part of the HTML specification. This tutorial
will teach you all of the most important tags and what they do. Now let’s
move on…