HTML Made Really Easy

HTML is very easy to use; it was designed that way. You don't have to be a programmer to use it. If you can edit a text file, then you can write HTML (and if you can write email, you can edit a text file). If you tried to learn before and couldn't, then someone wasn't telling you the right things.

This tutorial will explain the structure of HTML quickly and clearly, and show you through examples the practical things you need to know, so you can be making your own pages soon (like, this afternoon). The whole tutorial is about 14 printed pages, but you only need the first four or so to be off and running.

In this tutorial, you'll create small pages and view them. There aren't really any "required" exercises, but you should play with new concepts until you're comfortable with them. If your browser supports frames, fire ups this HTML Test Bed (non-frames version), where you can type HTML in one frames and sees the resulting page in another. Resize the input and output frames/windows for best viewing.

If your browser doesn't support frames, or when you're making real pages, you'll want a real text editor. Start up Teach Text on the Mac, pico in UNIX, or Notepad in Windows, or a better one if you have it (here's a directory of text editors at Yahoo). Give your HTML files names ending in ".html" (or ".htm"). Use your browser to view the HTML files you create, with the menu command "File/Open File" or something similar; use the "Reload" function after each change.

OK, Ready?

What is HTML?

Although HTML stands for Hypertext Markup Language, it's not really a programming language like Java, Perl, C, or BASIC-- it's much simpler. It's a way of describing how a set of text and images should be displayed to the viewer, similar in concept to a newspaper editor's markup symbols.

Anatomy of a Web Page

A Web page consists of an HTML file, plus any image (picture) files used on the page. The HTML file (a normal text file) contains all the text to display, and also acts as the "glue" to hold the text and images together in the right places, and display them in the right style.

Writing an HTML file means composing the text you want to display, and then inserting any tags you want in the right places. Tags begin with a <> character, and tell a browser to do something special, like show text in italic or bold, or in a larger font, or to show an image, or to make a link to another Web page. Although HTML has many tags you can use, you don't need to know them all to use HTML-- you can get by with just a handful.

One great thing about learning HTML is that you can see how everyone else has done it, by looking at their source code. You can see the HTML source of any page you're viewing. Try it now: In Netscape, use the menu command "View/Document Source". Other graphical browsers have a similar menu item, maybe under "File/" or "Edit/". In Lynx, the backslash key toggles the source code view on and off.

View lots of source code. View the source code of any page that makes you wonder how they did something. Everyone who uses HTML has learned it by reading other people's HTML code-- the Internet is a big, mutual-learning community thing.

You don't need an "HTML editor" program to write HTML. Some people like to use them, and that's fine, but many pros and beginners prefer to use a plain text editor and insert the tags themselves, as we're doing here. To each their own.

Anatomy of an HTML Tag

Tags have a simple structure. They begin with a <> character. Between the <> characters are the tag name, and maybe some attributes, depending on the tag. Most attributes take a value too. Some attributes are required, and some are optional. The general form of a tag is

Tag names and attribute names are not case-sensitive, but some attribute values are. The tag name must come first, but the order of the attributes doesn't matter. So you could also write this tag as:

Different people write them different ways; do whatever you're most comfortable with.

There are many different tags to do many different things. For example, use the tag to show an image on your Web page:

Is rendered as

This means "show the picture blueribbon.gif at this place on the page." Note that the src attribute gives the URL of the image file, either a relative or absolute URL. The above example using an absolute URL would be: