GeoCities.us GeoCities.us » SiliconValley » Horizon Get your FREE home page!
Lesson 1: Your First Page
Start Here  |  Lesson 1  |  Lesson 2  |  Lesson 3

Step 1: What a tag is

A Web page is nothing but a plain text file with some instructions mixed in. The instructions are called tags, and every tag sits between two angle brackets, the less-than and greater-than signs on your keyboard (hold Shift and press the comma or period key). Here is a tag that means "start making words bold":

<b>

And here is the tag that means "stop making words bold." It's the same, with a slash in front:

</b>

Most tags come in pairs like that, an opening tag and a closing tag, and whatever you put between them is what they work on. So <b>Hello</b> comes out as Hello. The browser reads the tags, follows them, and doesn't show them to your visitors. That's really the whole idea. Everything else is learning which tags there are.

Step 2: Open Notepad

Click the Start button, then Programs, then Accessories, then Notepad. On a Macintosh, open SimpleText. Please don't use Word or WordPerfect for this; they add invisible formatting of their own, and the browser chokes on it.

Step 3: Type the skeleton

Every Web page has the same six tags holding it up. Type this in, exactly, line for line:

<html>
<head>
<title>My First Page</title>
</head>
<body>
Hello! This is my very first home page.
</body>
</html>

Here's what each part does:

  • <html> and </html> go around everything. They tell the browser, "this is a Web page."
  • <head> holds information about the page. Nothing in the head shows up in the window itself.
  • <title> is the name of your page. It shows in the colored bar at the very top of the browser window, and it's what people see in their bookmarks.
  • <body> holds everything your visitors actually see. Everything. From now on, almost all your work goes between <body> and </body>.

Capital or small letters in tags doesn't matter; <BODY> works just the same. I use small letters because they're easier to type.

Step 4: Save it the right way

This is the step where half my class gets tripped up the first night, so go slowly.

  1. In Notepad, click File, then Save As.
  2. Make a new folder for your Web pages, so they're all in one place. I call mine webpage.
  3. At the bottom, where it says Save as type, change "Text Documents" to All Files.
  4. For the file name, type index.html and click Save.

Why step 3? If you leave it on Text Documents, Notepad helpfully sticks .txt on the end, and you end up with index.html.txt, which is a text file and not a Web page. Worse, Windows usually hides the last part of file names, so it looks right and isn't. Another way around it is to type the name with quote marks around it, "index.html", which tells Notepad to leave it alone.

Why index.html? Because on GeoCities.us, the page named index.html is the one people see first when they type your address. It's your front door. Name it anything else and people who type your address won't find it.

Step 5: Look at it

Now open your browser. You don't have to be connected to the Internet for this.

  • Netscape: click File, then Open Page, then Choose File. Find your webpage folder and pick index.html.
  • Internet Explorer: click File, then Open, then Browse, and find it the same way.

You should see this:

WHAT YOU'LL SEE
Hello! This is my very first home page.

And "My First Page" in the bar across the top of the window. Congratulations. You have written a Web page. My students usually clap at this point, and so should you.

Step 6: Change it and reload

Leave both windows open. Go back to Notepad, change the words between the body tags to anything you like, and click File, Save. (Just Save now, not Save As.) Then go to the browser and click Reload in Netscape or Refresh in Internet Explorer. Your change appears.

Type, save, reload. Type, save, reload. That's the rhythm of making Web pages, and you'll do it a thousand times. Leah, who is seventy-one, says it's like knitting: once your hands know the stitch, you stop thinking about it.

Homework for Lesson 1
1. Make your page say your name and one sentence about you.
2. Change the title to your name too. Look for it at the top of the browser window.
3. Leave out the </body> tag on purpose, save and reload. See? Nothing broke. (Browsers are forgiving. Put it back anyway. Good habits.)

On to Lesson 2: Dressing Up Your Words »

Start Here  |  Lesson 1  |  Lesson 2  |  Lesson 3
Stuck? [email protected] · Last updated: September 21, 1999