Beginners guide to HTML: making your first web page.

Introduction to HTML

Part 4 of 4

Have you got Notepad or another text editor open? Are all goo-goo eyed and ready to create a web page? Does your pet elephant meow like a fish?

Great, let's make a web page -- but first, if you're using Notepad, go to the Edit 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.

Finished so soon? My, you're a good student! 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 right now, 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.

You'll also use your first cancel command.

</title>

The cancel command, or close command, means you are cancelling a previously opened HTML command. In this case, it's telling the browser that the TITLE of the page is complete, or cancelled. The forward slash before an HTML command tells the browser that command has been canceled. 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 goo-goo monkey at typing HTML commands, go ahead and type the </head> command under your title line to cancel the HEAD command.

Your code should look like this so far:

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

Next is the...

<body>

...tag. The body tag is where you set the background color or image and the text and link colors. For now we'll keep it simple and just add the bare body tag. When this lesson is over you can go to the individual tutorials and add whatever elements you wish. So for now, just enter the <body> tag under your </head> tag.

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. For now, just type a brief message for demonstration purposes. Anything will do, such as, "This site owner is so kind for providing these tutorials I think I'll make his next mortgage payment for him."

Done? Great! You can get my address from my contact page later to send the mortgage payment to me, or even better, join the members site so we both get something great out of the deal, but for now, we're almost done...

The last thing to do is to cancel the BODY and HTML commands. Always cancel the last command issued first if you're cancelling more than one command at a time, so type...

</body>
</html>

...under your pledge to pay my mortgage payment. Your complete 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 think I'll make his next mortgage payment for him. I might even name my next baby Boogie Jack!

</body>
</html>

Okay, so I might have ad-libbed a little in the content section, but naming your baby Boogie Jack is much better than naming him or her Wubbyknuckles!

The last thing to do is to save it. 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.

Some people name their documents with a .htm extension instead of .html, but not all servers look for .htm 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" -- include the quotation marks around the name. Either that, or type the name without quotation marks but select "All files" from the Save as type: selection box.

Be sure to choose a place to save the file where you'll remember where you put it. I'm surprised at how many people write to me asking where to find the file they just made. Sorry, but I can't see your computer. Go ahead and save the file now.

Now that you've saved it, go open it up in your browser and see what you've made! To do that press Ctrl + O (Control and the letter O) on your keyboard then click the Browse button (IE) or Choose File button (Netscape) 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 first read through the short section on Site Planning.

Back | Site Planning Step 1 | HTML Tutorials Index

Web Design

Site Information

More Boogie Jack Sites

Introduction to HTML