HTML From the Ground Up

by L. Downs

Your First Web Page

As the World Wide Web expands into every imaginable area of activity, a new industry is springing up almost overnight, selling millions of dollars worth of software with one basic premise: HTML IS HARD TO WRITE.

You may remember when a few years ago the Internet was pretty much reserved for those willing to learn such arcane skills as UNIX commands, file transfer protocols, and telecommunications settings. Today you can pop a CD-ROM into your PC, double-click an icon, and fifteen minutes later be 'surfing the Web.' But actually creating your own Web pages is supposedly a complex, error-prone process that requires expensive "authoring" software to do properly.

Everything you know is wrong.

HTML, the "language" of the Web, is probably the easiest computer language ever written. In fact, it's usually easier to write your own HTML than to use the "Export HTML" capability that many word processors have, simply because you don't have to go back and clean up the messes the programs create (IMHO ^_^ ). You will need two software tools, though: a Web browser (such as Netscape Navigator or Microsoft Internet Explorer) and a text editor, such as Windows Notepad. You probably already have the browser (otherwise why are you trying to write Web pages!?), and most operating systems come with a free text editor (such as Notepad). Later, we'll look at some additional programs you might want when you start adding graphics to your pages.

Let's get started. Start up your browser and Notepad (or the equivalent). Type the following into Notepad:

<HTML> <HEAD> <TITLE> My first page </TITLE> </HEAD> <BODY> Hello, World! </BODY> </HTML>
Be sure to hit the <Enter> key a few times after you finish, then save the file as "first.html" (and keep track of what directory you saved it into).

Now you need to open the file in your browser; how you do this depends on the browser you're using. If you're using Netscape Navigator, click Open Page from the File menu and click the Choose File button. If you're using Internet Explorer, click Open from the File menu and click the Browse button (happily you only have to figure this out once). Make sure you're looking in the same directory (folder) that you saved your file into, and double-click your file.

You should see a page with the words "Hello, world!" on a blank background. If you look up at the title bar of your browser (the colored bar along the top), you should also see the words "My first page" there.

Congratulations! You've just written your first Web page. This is the minimum "legal" HTML for a Web page.

Obviously, you want to do a bit more than this, though. Switch back to Notepad, and type in a few separate paragraphs of text after "Hello, world!" Be sure that all your text appears between the <BODY> and </BODY> codes (called "tags" in HTML). Save the file from Notepad again, and go back to your browser. This time, instead of going through all the File->Open hoopla, just click the "Reload" button (or "Refresh" if you're using Internet Explorer).

Good news and bad news. The good news is that your additional text should appear. The bad news is that it's all run together, without any breaks between paragraphs. That's because HTML requires you to insert special codes wherever you want a blank line to appear. Go back into Notepad and add <BR><BR> after each paragraph. Save your file, and click your browser's Reload (or Refresh) button again.

Why a "text editor"? Why not a word processor? And what's a "text editor?"

A text editor is a program that saves only the text you type in, plus very basic formatting information (such as line feeds and tabs). A word processor, on the other hand, also saves information about margins, typefaces, spacing, etc., and does so in the form of special control codes that aren't visible to you when you're working on a document. These control codes will at best show up as "garbage" characters when you view your page in a Web browser, and at worst may hopelessly confuse the browser. Avoid using word processors, even one as simple as Windows Wordpad, when writing Web pages.

The author recommends EditPad Lite, a text editor much more powerful than Notepad, and free to noncommercial users.

In the next lesson we'll start learning the codes ("tags") for making your text make sense, as well as taking a look at how it all actually works. In the meantime, if you're having problems you can view working versions of the examples above, complete with HTML code. If you're going to work your way through these articles as they appear, you might want to add that bookmark to your browser.

Terms to know from this lesson

Tag: A tag is the basic unit of a markup language. In HTML, tags consist of a tag name and one or more attributes, enclosed in angle brackets. Most tags have both a beginning tag and an end tag. The end tag consists of the tag name preceded by a backward slash enclosed in angle brackets. Since HTML is not case-sensitive, tag names can be upper or lower case or any combination.

Markup Language: A system used to tag or mark the parts of a document so that they can be processed and understood by a computer. HTML is a markup language used to make documents that can be read and understood by a Web browser.

Portions of this tutorial originally appeared in Technotes, a publication of the UNLV Libraries, and are copyright by the University of Nevada, Las Vegas; used by permission. All remaining material © 2003 Lamont Downs.