Rated by Schoolzone's panel of expert teachers Key Resource StudyWeb
Create Your Own Web Page

Creating pages for the Internet takes a little practice, but once you get the hang of it, it's a lot of fun. The first step is to decide what you want to publish on your Web page. Maybe you want to publish an original story you've written, share reviews of books you've read, or create an electronic magazine related to one of your hobbies. Whatever you want to put on your Web page, the directions in this step-by-step guide will show you how to do it.


7 Steps Overview

Step 1: Create a Text Document

Step 2: Learn Basic HTML Tags

Step 3: View a Sample Web Page

Step 4: Get Electronic Images

Step 5: Insert HTML Tags

Step 6: View and Edit Your Page

Step 7: Go Public!

Web Author's Idea Bank

Step 1: Create a Text Document

First you need to create a text document containing the words that you want to appear on your Web page. Most word processing programs will work fine, as long as you give your document a name ending in .html (or .htm if you're working on a PC) and save the document as "Text Only." Type out your story, book review, fascinating facts about Jupiter, or whatever it is you want to publish. Here are some tips for organizing your text:

[Return to 7 Steps Overview]

Step 2: Learn Basic HTML Tags

Now you need to insert some formatting tags in your document that will tell an Internet browser (such as Safari, Firefox, or Internet Explorer) how to arrange your words and pictures on the screen. These tags make up a language called HyperText Markup Language, or HTML. The basic skeleton for an HTML document looks like this:

<html>

   <head>

       <title>Title of Page</title>

   </head>

   <body>

       <p>Text of page...</p>

   </body>

</html>

Notice that (1) each formatting tag appears between "less than" (<) and "greater than" (>) signs, and (2) the tags often appear in pairs, with the second tag in the pair beginning with a "slash" (/).

Here's a list of some of the basic formatting tags in HTML:

<h1>...</h1>

header, level 1 (the largest size type for a header, usually used at the beginning of a page or the start of a new section). Smaller headers are tagged with <h2>...</h2>, <h3>...</h3>, etc.

<strong>...</strong>

boldface text

<em>...</em>

italic text

<center>...</center>

centered text

<p>...</p>

holds each paragraph

Note: Any paragraph returns that you insert in your document by simply hitting the Return key on your keyboard will be ignored by a Web browser. You must enclose each paragraph in between the <p>...</p> tags to create paragraph breaks on the screen.

<br/>

line break (no extra space)

<hr/>

horizontal rule (a line running left-to-right across the page, to separate one section from the next)

<ol>...</ol>

ordered, or numbered, list. Each list item begins with the tag <li> and falls somewhere between the <ol>...</ol> tags.

<ul>...</ul>

unordered, or bulleted, list. Again, each list item begins with the tag <li>.

<a href="filename.html">...</a>

a hotlink to another file in the same folder

<a href="http://URL">...</a>

a hotlink to another site. You will have to know the Uniform Resource Locator (URL), or Web address, of any site to which you want to link your page.

<img src="image.gif">

This tag would insert an image with the filename "image.gif" on the far left side of your page.

(Note: Don't worry if this information seems confusing or overwhelming right now. It will make more sense as you apply it in the next few steps.)

[Return to 7 Steps Overview]

Step 3: View a Sample Web Page

You may feel somewhat baffled after reading that long list of formatting tags in Step #2. It's easier just to look at a real HTML document and then see how it gets translated into a Web page. You can view the "source document" behind any Web page by going to the "View" menu (in Safari—other browsers may be slightly different) and selecting "View Source." When you do this, you'll see the document with HTML tags that creates the page currently in the window of your browser.

We've created a Sample Web Page for you to study. Using the link below, go to the Sample Web Page and look at how the text and image appear on your screen. Then use "View Source" to call up the document we used to create the sample page. If possible, print this document. Compare it line-by-line with the page in your browser window. Do you see how all the formatting tags work?

Sample Web Page

[Return to 7 Steps Overview]

Step 4: Get Electronic Images

If you don't already have image files for your page, you can download some from other Web pages. Use your common sense to decide which images you're allowed to use and which ones you shouldn't. Images provided by NASA, for example, are for the public's use. A corporate logo is private property. If you're looking for some astronomical images, you might try NASA’s list of Astronomy Pictures of the Day.

Depending on what kind of computer and browser you're using, you'll have to use a slightly different procedure to download an image onto your hard drive. Here's how you would do it on a Macintosh computer, using a Safari browser:

  1. Use your mouse to position the pointer over the image.
  2. Hold down the button on the mouse and drag the image to your computer’s desktop.
  3. Let go of the button, and you'll see a small icon. The image has now been downloaded onto your hard drive. If you decide to change the name of the file, make sure your new name ends in .gif or .jpg (This will be important if you use the image in your own Web page).
  4. Click on the icon to view the image as it would appear on your Web page.

While you're searching for images, don't download every one you see. You'll take up a lot of space on your hard drive if you grab dozens of images. Select just a few—perhaps your own "Top Five" list—that you think are the best for your page.

[Return to 7 Steps Overview]

Step 5: Insert HTML Tags

Now you're ready to insert the formatting tags in your own document. Remember to start your document with <html> and end it with </html>. The "title" that you type between the tags <title>...</title> will appear at the very top of the browser window when your page is being viewed. This title might be, but doesn't have to be, the same as the header at the top of your page.

[Return to 7 Steps Overview]

Step 6: View and Edit Your Page

Now it's time to see how well your formatting has worked. Save your text document (Remember: "Text Only," and the file name should end in .html or .htm) and go back to the browser. Under the File menu, select "Open File..." or "Open Local...". From there you should be able to find your document's name and click on "Open". Your document will appear in your window, looking like a real live Web page!

Don't be discouraged if there are some problems at first. HTML formatting requires a lot of attention to tiny details. If something doesn't look the way you expected, make a note of it and go back to your text document to adjust it. Then save the document again, go back to the browser, and click on "Reload". You'll probably have to go back and forth like this many times before your page looks perfect to you.

[Return to 7 Steps Overview]

Step 7: Go Public!

Your school may or may not have an account with an Internet provider that allows you to put your Web page on a server so that other people can read it. If not, you can just keep practicing with documents on your computer's hard drive. Or, you might look into getting some free Web space for yourself or your school. Some sites that provide this service are listed in the Idea Bank at the bottom of this page.

If you are able to put your page up on a server, how will anyone find it? Unless they know about your page already—and know the exact URL!—they won't be able to visit it. Here are three ways you can give people a roadmap to your location on the information superhighway:

[Return to 7 Steps Overview]

Web Author's Idea Bank

A great place to get ideas for your own Web page is from the pages that are already out there. We've made a list of some interesting Web pages that you might want to check out. Click here to visit our Links for Kids page.

There are also many Websites that can help you improve your own Web page. Here are just a few of them:

Need to find a home for your home page? Try the following sites, which offer free Web space for schools and individuals.


Small Planet Communications, Inc.   Return to top of page