HTML Tutorial: Create a Web Page

Are you ready to make your first web page? You need Notepad or another text editor open—a crash helmet is optional. Just kidding! HTML is not dangerous.

If you're using Notepad, first go to the Format menu and put a check mark by Word Wrap. This keeps your text from appearing as one long line that you'd have to scroll sideways to see.

As noted earlier, an HTML document starts off with:

<html>

This tells the browser it's an HTML document. Clever, huh? Go ahead and type <html> into Notepad now. Next is the:

<head>

...tag. Now that you're a an old hand at typing HTML commands, type the <head> tag under your <html> tag.

Note: Technically, you don't actually have to type the head tag under the html tag, but it will help you to visualize the structure. I often start code on new lines because it breaks up the source code with white space, making it much easier to locate the places you want to edit later on. As your page complexity grows with your skill level, this habit can be a valuable time-saver.

There are several items that can go in between the opening head tag and closing head tag, but for a simple page like the one we're creating, we're only concerned with one, and that is the:

<title>

...tag. The title tag, as you might guess, contains the title of your web page. The title shows up in the title bar at the top of the browser window, as the text when someone bookmarks your page, and as the link text of a search engine query on many search engines. If you look at the top of your browser you should see the words, "Making Your First Web Page" in the title bar because that's the title I gave this page.

You'll also use your first cancel command.

</title>

The cancel command, also called the close command, means you are canceling a previously opened HTML element (tag). In this case, it's telling the browser that the TITLE of the page is complete, or canceled. The forward slash before an HTML element tells the browser that element has been canceled. Note that an element and command are the same thing. Go ahead and add:

<title>My First Web Page</title>

...to your HTML document under the HEAD tag now.

Since that is the only element we're adding to the head section, and because you've become such a whiz-bang ding-dang student at typing HTML commands, go ahead and type the </head> command under your title line to cancel the HEAD element.

Next is the:

<body>

...tag. The area between the opening and closing body tags is where you put the content you want to show up on the web page when viewed with a browser. Other HTML elements are used within this area as well, which allow you to add images, create paragraph spaces, and to code other display instructions. These other formatting tags do not show up on the web page, but merely tell the browser how to display the information you want to present. When you've completed this tutorial you can go to the individual tutorials and add whatever elements you wish to play around with to your first web page.

As I said, after the BODY tag is where you put the content you want to show on a web page. Your pictures, jokes, links and all else goes here. So for now, just enter the <body> tag under the </head> tag and type a brief message for demonstration purposes. Anything will do, such as "Boogie Jack is so kind for providing these tutorials I think I'll make his next mortgage payment for him." Yeah, that works for me.

Done? Great! You can get my address from my contact page later to send the mortgage payment to me, but for now, we're almost done. The last thing to do is to cancel the BODY and HTML elements. In HTML we always cancel tags in the reverse order they were opened, so type:

</body>
</html>

...under your pledge to make my mortgage payment.

Your test page should now look like this:

<html>
<head>
<title>My First Web Page</title>
</head>
<body>

Boogie Jack is so kind for providing these tutorials I'm going to make his next mortgage payment for him. I might even name my next son Boogie Jack, or Boogie Jill if it's a girl!

</body>
</html>

Okay, so I might have ad-libbed a little in the content section, but naming your baby Boogie Jack or Boogie Jill is better than naming him or her Wubbyknuckles! I mean, come on, let's get real.

The last thing to do is to save the page you just made. You can call this test page anything, but when you build a web site for real, your home page should always be called index.html. You might as well save this one under that name.

It should be noted that some people name their documents with a .htm extension instead of .html, but not all servers look for the .htm extension when it can't find .html, so it's wise to get in the habit of saving them as .html right now.

Note: When saving your document, enclose it in quotation marks to prevent your system from adding .txt (for text file) to the end. In the box where you type the name you want to save the file under, type it as:

"index.html"

...and be sure to include the quotation marks around the name and file extension.

Now that you've saved it, open it in your browser and see what you've made! To do that just hit Control and (the letter) O on your keyboard then hit the Browse (IE) or Choose File (Netscape) button to navigate your computer. Find the trial index page you just made and click it, then click OK. Then just hit the back button to return here.

Now you're ready to move beyond the basics, but I'd highly recommend you read through the short section on Site Planning first.

Back | On to Site Planning | Web Design Tutorials Index

This was part four of a 4-part HTML Tutorial titled

HTML Tutorial: Create a Web Page

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]