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

Creating Web pages 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 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.

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 and save the document as "Text Only." (Tip: It's best to use all lowercase letters in your file name, and to avoid any special characters or punctuation marks except for hyphens.) Better yet, use a text editor application such as TextEdit, Notepad, or Brackets. 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:

Step 2: Learn Basic HTML Tags

Formatting tags tell an Internet browser (such as Firefox, Chrome, Safari, 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:

<!DOCTYPE html>

<html>

   <head>

       <meta charset="utf-8">

       <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" (/). Tags that appear in pairs must be "nested," or correctly ordered, within other pairs. For example:

    Incorrect order: <head> <title> </head> </title>

    Correct order: <head> <title> </title> </head>

A text editor, such as Brackets, will give you a heads-up if something is out of order. It might display problematic tags in red type, for example, so you know that you need to track down an error.

This chart shows some of the basic formatting tags in HTML.

HTML Tags What They Create
<h1>...</h1> heading, level 1 (the largest size type for a heading, usually used at the beginning of a page or the start of a new section)

Smaller headings are tagged with <h2>...</h2>, <h3>...</h3>, etc., down to level h6.
<em>...</em> italic (emphasized) text
<strong>...</strong> boldface (strongly emphasized) text
<p>...</p> text set off in a paragraph, with space before and after

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.
<p align="center">...</p> centered paragraph text
<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 hyperlink to another file in the same folder
<a href="http://URL" target="_blank">...</a> a hyperlink to another site

You'll need to know the Uniform Resource Locator (URL), or Web address, of any site to which you want to link your page. The attribute target="_blank" tells the browser to open the linked page in a new tab.

<img src="image.gif"> This tag would insert an image with the filename "image.gif" on the far left side of your page.

These are just the basics. For more comprehensive glossaries of HTML tags, check out these sites:

Step 3: View a Sample Web Page

You may feel somewhat baffled after reading through all the 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. Browsers allow you to view the "source document" behind any Web page. In Chrome, for example, follow the menu path View > Developer > View Source. In Firefox, it's Tools > Web Developer > Page Source. When you do this, you'll see the document with HTML tags that creates the page currently displayed in 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 view the source document. 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? If there are any you don't recognize, look them up.

Sample Web Page

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—see the usage guidelines here. A corporate logo is private property. It's always a good idea to cite the sources of the images you use, whether they are public domain or not.

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 is one typical method:

  1. Use your mouse to position the pointer over the image.

  2. Hold down the mouse button 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 to preserve the extension at the end, such as .gif or .jpg.

  4. Double-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 create a lot of clutter 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.

Step 5: Insert HTML Tags

Once you have a solid draft of your text and some images to go with it, you're ready to insert the formatting tags in your document. Remember to start your document with <!DOCTYPE html> <html> and end it with </html>. The "title" that you type between the tags <title>...</title> will appear in the browser tab 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.

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 the "Reload" button (). You'll probably have to go back and forth like this many times before your page looks perfect to you.

Step 7: Go Public!

Your school may or may not have a website where you can post your page 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 publish your page online, 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 two ways you can give people a roadmap to your location on the information superhighway:

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 gathered some interesting Web pages that you might want to check out on our Links for Kids page.

There are also many sites that can help you design and 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.

Small Planet Communications, Inc.   Return to top of page