Create your own home pages

Set up your own World Wide Web pages! We will show you how.

Step 1 Design a template
Step 2 Add the words, pictures, and links
Other Web Page Tools
Great Example Sites

Writing your own home pages will give you 15 minutes of fame and stardom -- and a healthy respect for the annoying problems that can crop up when you create them. We'll walk you through the basics of how to create a text file that will turn into an HTML file when viewed using a browser.

Step 1: Design a template

There are certain tags that you must include in your Web page. It's easiest to put these in first in your template. Add the following text.

<HTML>
The very first tag. This tells the browser that a hypertext page is coming up. If the tag's not there, some browsers will display anything that follows as plain text, including all other tags.

<HEAD>
The head of a hypertext page contains information about it: its title and any version/ownership info, as well as metadata.

<TITLE>
The title of your page as browsers will see it. The TITLE element always sits between the <HEAD> and </HEAD> tags and must be plain text only.

</TITLE>
Closes the title part of the page.


Comment tags. Put the date here, for example. Comments aren't shown on screen.

</HEAD>
Closes the head part of your page. Now you can go on to the fun part!

<BODY>
The start tag of the area where you put text, pictures, sound files, and pointers to other interesting parts of the Web. Be bold, be smart, be creative! Presentation is crucial, so make your pages a pleasure for others to read.

<HR>
This optional tag displays a horizontal rule across the page. Use it as a visual cue that this is the end of the page. Put your e-mail address under the rule.

</BODY>
Closes the body area.

</HTML>
The very last tag. It closes your hypertext page.

Step 2: Add the words, pictures and links

Words-- Namely, Headings
It's considered good hypertext practice to make the first element after the opening <BODY> tag a heading, announcing what your page is about.

There are six levels of heading, the first of which produces large, bold lettering, with space above and below. Experiment with your HTML editor and various browsers to see what they look like. The tag for a level one heading looks like this:

<H1>

This is a first level heading

</H1>

I've tagged the sentence "This is a first level heading" so you can see what a level one heading looks like on your browser.

Text
Any text that is not enclosed within tags is shown on screen as plain text. Browsers generally won't see the line and paragraph breaks generated by your word processor. You must specify exactly where you want each paragraph to break. Note: Line width changes according to the size of the window your reader has chosen on his/her browser.

Be kind to your readers and keep paragraphs short!

To break a line, type <BR>
The next line starts immediately below.

For a paragraph break, type <P>

This inserts a space between the lines.

You may want to emphasize a line or a word. There are two basic attribute tags. The first is

<STRONG>
Usually makes your text look bold.
</STRONG>

And the other is

<EM>
Short for "emphasized". Usually makes your text look italic.
</EM>

Pictures

Pictures should be in GIF or JPEG formats. There are programs available for downloading which will convert PC graphics into whichever of these two you prefer. JPEGs tend to compress smaller than GIFs (especially with large images), but use a "lossy" algorithm that degrades image quality. Best thing to do is experiment and see how your graphics look in your browser.

The HTML tag for inserting a picture is:

<IMG SRC="yourpic.gif" ALT="Picture of a whatever">

Replace "yourpic.gif" with the actual name of your graphics file. The ALT tag displays text that describes your picture. It is a courtesy for the benefit of text-only browser users or those who have turned their graphics off.

Linking to other Web pages

If your home page is all about "Star Trek," for example, you'll want to tell other fans where more ST goodies can be found. You do this with what HTML calls an "anchor"--it's the blue underlined text that you click on to do something or go somewhere. Graphics can be anchors too. This is the tag you use:

<A HREF="http://www.startrek.com">
Click here for a great Star Trek site!
</A>

The text between the double quotes is the URL of the Web page you want people to visit. You can also link to FTP sites and newsgroups. Because URLs are case-sensitive, be careful to type them correctly--some use all lower-case letters, some include capital letters. You can also use them to link to additional pages that you create, giving your home page more depth.

Step 3: Publishing Your Page

When you have finished your files, contact your Internet provider for information on how to upload them. It varies from company to company, but many providers are offering free space as part of their sign up offers. There are also MANY websites with free space for websites… go to freewebspace.net for details!

Step 4: You want more!?

If you want more hints and tips, you can of course find these on the Web itself. Here are a few places to start you off:

The Virtual Library's HTML index is where you can obtain other information about HTML editing.

Some nice people at Rutgers University have a collection of public domain graphics to use in your documents.

If you want other advanced information, please go to HTML Goodies. There are many different types of information that can be used in html styles, such as cascading stylesheets (CSS), Javascript, and PHP styles. For more information on these, check out your local bookstores.

Great Examples

Here are some excellent looking sites done by basic HTML: