Begin with a title and an attention-grabbing greeting or introduction, so people will know immediately what your page is about and will want to read more.
Think about logical places to insert breaks in your text. No one wants to scroll down a long, uninterrupted block of text. Your page will be a lot more readable if you put in frequent paragraph breaks and horizontal rules (more about these later).
Think about where you might want to insert pictures, if you have them in electronic files. (More about downloading images in Step #4.) A lot of pages start off with an eye-catching image right at the top, next to the title.
If your word processing program has an option for "smart" or "curly" quotes, turn it off! Curly quotes will show up on a browser as strange little icons rather than quotation marks. The straight quotes may not look as nice, but they're the ones you have to use for Web authoring.
Text of page...
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:
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
paragraph return (inserts an extra line space between paragraphs)
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 use the tag
to create a paragraph break on the screen.
line break (no extra space)
horizontal rule (a line running left-to-right across the page, to separate one section from the next)
ordered, or numbered, list. Each list item begins with the tag
unordered, or bulleted, list. Again, each list item begins with the tag
a hotlink to another file in the same folder
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.
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.)
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?
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.
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.
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:
Find some other Web sites that are related to your page in some way. They might be sites that deal with the same topic or are published by students your age. Write to the people who maintain these pages and ask them to check out your site. If they like it, they might add a link to your page on theirs.
Register your site with a search engine such as Google or Yahoo. Once you've added your URL to one of these databases, people who are interested in the general topic of your page will get a listing of your site when they do a search. For example, in Yahoo, navigate through their categories until you get to the one that best suits your page, and then click on "Add URL." You'll be asked to provide the title of your page, its URL, and a comment or short sentence that describes what's on the page. In your comment, try to include words that you think an interested person might type in as key words when doing a Yahoo search. "Jupiter facts and images" or "Book reviews by middle school students" are examples of good comments.