ElectricType:Teaching Tool

The HTML Basics
- - - - - - - -

HTML is the lingua franca of the Net. It's a simple, universal mark-up language that allows Web publishers to create complex pages of text and images that can be viewed by anyone else on the Web, regardless of what kind of computer or browser is being used.
Despite what you might have heard, you don't need any special software to create an HTML page; all you need is a word processor (such as SimpleText, BBEdit, or Microsoft Word) and a working knowledge of HTML. And lucky for all of us, basic HTML is dead easy.
HTML is just a series of tags that are integrated into a text document. They're a lot like stage directions - silently telling the browser what to do, and what props to use.
HTML tags are usually English words (such as blockquote) or abbreviations (such as "p" for paragraph), but they are distinguished from the regular text because they are placed in small angle brackets. So the paragraph tag is <p>, and the blockquote tag is <blockquote>. Some tags dictate how the page will be formatted (for instance, <p> begins a new paragraph), and others dictate how the words appear (<b> makes text bold). Still others provide information - such as the title - that doesn't appear on the page itself.
The first thing to remember about tags is that they travel in pairs. Every time you use a tag - say <blockquote> - you must also close it off with another tag - in this case, </blockquote>. Note the slash - / - before the word "blockquote"; that's what distinguishes a closing tag from an opening tag.
The basic HTML page begins with the tag <html> and ends with </html>. In between, the file has two sections - the header and the body.
The header - enclosed by the <head> and </head> tags - contains information about a page that won't appear on the page itself, such as the title. The body - enclosed by <body> and </body> - is where the action is. Every thing that appears on the page is contained within these tags.
So let's create a simple sample page, shall we? The first step, of course, is to create a new text document (remember, it should be saved as "Text Only" or "Plain Text" if you're using a word processor that's fancier than, say, SimpleText) and name it "anything.html" where "anything" is, uh, anything.
Your basic document will look something like this:
<html> <head> <title>Summer</title> </head> <body> <h1>Summer Vacation</h1> <p>My summer vacation was sunny, silly, and far too short. <p>How many days till Christmas? </body> </html>

So within the <head> tags, we have the title - "Summer" - which will appear in the bar across the top of your browser (the title of this page, as you can see, is "HTML - HTML").
Within the body tags, we have everything that will appear on the page. In this case it would look something like this:

Summer Vacation

My summer vacation was sunny, silly, and far too short.
How many days till Christmas?

As you might have guessed, <h1> is the tag for a headline (the largest headline, in fact) and <p>, of course, marks the beginning of a new paragraph. A <p> tag is one of the few tags that doesn't need to be closed off by a corresponding </p>, because the paragraph's end is implied with the next formatting tag.
Seems simple, huh? Well, it is.
Especially since you can see what HTML people have used to build any Web page you find by simply viewing source. Oh, and don't go thinking you need your own homepage to practice, either. You can save HTML documents on your local drive and then open them up using the Open option under the File menu on your browser.
So basically, you have no excuse not to learn more...

Tutorials