Diving In

The first thing we’re going to do is dive in and create a simple webpage. We’ll explore what’s going on soon, but for now, just follow the directions as best you can.

To create your web page, you need:

A browser (you’re using one right now)
A plain text editor (you already have one on your machine)

Step 1: Open a Text Editor

A text editor is a program that edits plain text files. When authoring HTML, do not use Word, Wordpad, Pages, or any other program that does not save files as plain text.

Windows users: open Notepad ( Start | Programs | Accessories | Notepad )
Mac OS X users: open vi or TextEdit ( Applications | TextEdit )
Linux and other UNIX users: open vi or emacs

Unfortunately, Notepad and TextEdit are not very good text editors. By default, Notepad always tries to save and open files with a .txt extension. You must constantly fight with it to make it save and open webpages (files with a .htm or .html extension). Be strong, and ye shall overcome.

Likewise, TextEdit does not use plain text by default. Before using TextEdit to edit HTML, go into Preferences and set the Format for new documents to be Plain Text. For good measure, you might have to convert your existing document to plain text ( Format | Make Plain Text ).

Using Notepad to write HTML is kind of like using a butter knife to cut a birthday cake — it’s the wrong tool for the job. A better choice would be a more advanced text editor, such as:

Notepad++ (Windows, free)
TextWrangler (OS X, free)
jEdit (Windows/OS X/Linux, free)
Sublime Text (Windows/OS X/Linux, not free, but well worth the money)

All of these editors avoid the problems with file extensions and plain text described above, and have numerous extra features for advanced users. You don’t have to download one of these editors right now, but if you continue with web development, you’ll need to upgrade your tools.

Step 2: Create and Save the Web Page

Copy-and-paste the text in Example 1.1, “A Simple Webpage” into your text editor, starting with the text, "<html>".

Example 1.1. A Simple Webpage

<html>
  <head>
    <title>A Simple Webpage</title>
  </head>
  <body>
    This is a simple webpage.
  </body>
</html>

To see what this HTML code sample looks like as a web page, click the view html link above the code sample.

The words that are surrounded with angle brackets (< >) are called elements. We will talk about what a element is soon, but first let’s finish creating and displaying your webpage.

Once you have copied the text over to your text editor, save the file in your home directory or Desktop as the file simple.html.

Note

Notepad will try to append a .txt extension to your file name. Don’t let this happen. In the Save As dialog box, set File name to simple.html and change Save as type from Text Documents to All Files (*.*).

Step 3: Display the Webpage in Your Browser

Open the file simple.html by typing Ctrl-O (Cmd-O for Mac users) and selecting the file. Internet Explorer users should select Browse to find the file.

After selecting simple.html, click Open. Your webpage should appear in the browser window. Compare it to Example 1.1. Does it match? (To compare results, click the view html link above Example 1.1.)

If it does, congratulations! Let’s move on to the next section, where we’ll try to answer the question, what the heck is going on?