his area is pretty straightforward. We take you through the key steps needed for creating a basic HTML page.

Aren’t familiar with a term? If it is highlighted, click on it and a definiton appears in the box at the top of the page.

The most important thing to remember? This is fun! Don’t let anyone scare you away or psyche you out by telling you how difficult it is or what you can do wrong. You can’t break anything! And as long as you like your pages, that’s what counts.

Step One: Gather Your Tools
You need four things to build a Web page:

1. A computer with a Web browser to see your work in progress.Of course, if you’re reading this, you already have access to a computer with a Web browser.
2. A text editor to create and save the HTML files.Any program that saves a file as ascii text is fine. Both PCs and Macs come with basic text editors—Notepad on the PC and Simple Text on the Mac. You can also use your favorite word processor, as long as you save the file in text format. Programs like BBEdit on the Mac and Allaire’s Homesite on the PC are reasonably-priced text editors designed specifically to make Web pages.
3. A place on a Web server to store your pages so that other people can come and look at them. You probably have this as part of an account from your Internet access provider (ISP) or Internet presence provider (IPP). Check with your ISP or IPP for details about your storage area.
4. Software for moving your pages from your computer’s hard drive to your storage space on a Web server. This software is called File Transfer Protocal (FTP) software. Fetch is a common Mac FTP program. CuteFTP or WSFTP are common PC FTP programs. You can download them through your ISP’s or IPP’s support pages or through a software repository like Shareware.com.

Step Two: Make a File
The first thing you need to do is use your text editing program to create a file that will hold your Web page.

You can name the file anything you want as long as it ends with the extension .htm or .html. The .htm or.html extension tells the browser that this is a Web page and should be viewed as one.

For example, any of these names would be fine:

• mypage.html
• lizards.htm
• vacation.html

Step 3: Understand Tags
HTML pages are easy to build—all you need to understand is a few tags. A tag is a way of indentifing the different pieces of your page, like headlines and paragraphs.

Tags are easy to spot. They all begin with the the “less than” sign: < and end with the "greater than" sign: >. Between the greater and less than signs is the tag name. For exaple, this tag is the paragraph tag:

You can use either upper or lower case letters for tag names. The browser doesn’t care.

The tag is usually followed by text. For example, this is the text of a short paragraph:

Once upon a time there lived a green frog in a blue pool.

At the end of the text is another tag, called a closing tag. It looks just like the opening tag except it has a slash in front of it. It tells the broswer that this is the end of this particular page element:

Once upon a time there lived a green frog in a blue pool.

Step Four: Start the Page
The very first thing you need to put into your HTML file is a tag that identifies the entire file as an HTML file.

The tag looks like this:

It tells the browser that this file contains HTML-tagged data.

You can use either upper or lower case letters. The browser doesn’t care.

Step Five: Make a Head
Now you have an open file with one html tag in it. The next thing you’ll do is create a header section. The head is the first part of the page and contains information about the page, like its title.

In a basic HTML file, the head has two kinds of tags. First, is a tag that identifies the section as a head. Then, inside the head, is one that identifes some text as a title. This is how you type the head tags:

Did you notice that the last two tags you typed were the same as the first two, except they began with a slash ( / )? This is something you will see frequently in HTML. The slash is the way you end a “container” tag. You start the header and then you end the header. You start a title and then you end the title. It’s pretty straightforward.

Step Six: Start the Body
Now that you’ve created the header, you are ready to create the body. The body is the second part of a Web page. It contains all the information you see in a Web browser window.

You start the body with the body tag:

Now you’re ready to start adding your page content.

Step Seven: Add a Headline
Now you’re ready to create some content. Why not start with a headline? Headlines come in six sizes: h1, h2, h3, h4, h5, and h6.

(You can click on the headline examples below to see how they will look in a Web browser—the text will appear in the box at the top of this page.)

Here’s how you create headlines:

This is a Level One Headline. It is the largest.

This is a Level Two Headline

This is a Level Six Headline. It is the smallest.

Step Eight: Add Text
You have a headline. Now you need to add some text. Start a block of text with a paragraph. Make sure you remember to end the paragraph too:

(You can click on the examples below to see how they will look in a Web browser.)

The Winner

He is very, very happy. He just won $1 million in the lottery.

You can make text bold by adding bold tags, like this:

He is very, very happy. He just won $1 million in the lottery.

And you can make text italic by adding italic tags, like this:

He is very, very happy. He just won $1 million in the lottery.

Step Nine: Add a Link
are one of the strengths of the Web. They are a way of connecting together two locations. When your readers click on a link, they jump to another Web page.

The tag you use to identify a link is called the anchor tag, Within the tag you also include the URL or the page to which you are linking.

Here’s how you add a link:

(You can click on the examples below to see how they will look in a Web browser.)

Click HERE to jump to my cousin Bob’s home page.

• The word “HERE” is surrounded by the link tags. In a Web browser, it will appear underlined or highlighted, showing that it is a link.
• The letter a in the tag stands for anchor, as in “anchor this link here.”
• The phrase href stands for “hypertext reference.”
• The equal sign ( = ) says that the following URL is the location the reader will jump to.
• The URL inside the quotation marks is the place you want the link to take your readers. Be sure that the URL is surrounded by quotes.
• The tag ends the linked area.

Step Ten: Let People E-mail You
It’s easy to let people send an e-mail to you. It’s almost like making a link, except that you tell the browser to create an e-mail message instead of jumping to another Web page. Here’s how you do it:

(You can click on the examples below to see how they will look in a Web browser.)

Click HERE to send me an email.

• The word “HERE” is surrouned by the anchor tags. In a Web browser it will appea underlined or highlighted, showing people that it is a link. In this case the link is really a “send e-mail command.”
• The letter a in the tag stands for anchor, as in “anchor this link here.”
• The phrase href stands for “hypertext reference.”
• The equal sign ( = ) says that the following item is the reference.
• The phrase mailto: tells the browser to open an e-mail screen.
• Your e-mail address goes next: [email protected], for example.
• The tag ends the linked area.

Step Eleven: End and Save the File
That’s the basics of a very simple Web page—you created a file, added a headline and text, added links and email. Now all you need to do is end and save your file.

Remember how we started with a body tag at the beginning of the body? Well, now we end to end the body tag at the end of the body, like this:

The Winner

He is very, very happy. He has just won $1 million dollars!

Read About It Here

Email me and tell me what you think about the winner.

And remember how we started the entire file with an html tag? Now, end the entire file with a closing html tag, like this:

Finally, save the file in the normal way you save text files in your text editor. Remember, you are saving it as plain ascii text in a file with the extension .htm or .html.

Step Twelve: Proof Your Page
So now you’ve created a page and saved it in a file. But how does it look in a Web browser? There’s a simple way to find out!

1. Start your Web browser. You don’t have to go online—you’ll be using it to view the file on your local hard disk.
2. Drag your text file icon into the browser window. The browser opens and displays your page.

If you’re happy with your page, then you’re ready to publish it to the Web. But if you’re like most people, you’ll want to make some changes. To make changes:

1. Open your text file, the file that contains your HTML page.
2. Make the changes you want
3. Save the file. Remember, if you don’t save the file you won’t see your changes.
4. Go to your Web browser, which is still open to your page, and click on the Reload button. The browser displays the page again, with the changes you’ve made.
5. Repeat this process of editing your HTML text file and viewing it in your browser until you are happy with the results. Then, you’re ready to publish it!

Step Thirteen: Publish Your Page
You’ve created a page and saved it and tested it. Now you want the world to see it. To do this, you have to place the file on a public Web server, where other people can visit it.

The exact process for doing this will depend upon your ISP or IPP. Typically, you’ll receive the name of a directory on your ISP’s server. Then, you’ll use an FTP program to put the file in place. FTP stands for File Transfer Protocal and is the way you move files to or from a Web server. Your ISP/IPP can tell you which program is best for you to use.

Once you’ve placed the file on the public Web server, anyone, anywhere, can type in your URL and read your words. Which is, well, pretty cool.

Step Fourteen: Keep Learning!
Creating Web pages is a continual learning process. Getting up a first version of your site is just the beginning!

• Look at other sites. If you want to be a great novelist you read great novels. If you want to be a great screenwriter you watch great movies. By the same token, if you want to design a great Web site you need to look at other Web sites. Project Cool’s Sightingsis a good place to see examples of great sites. As you look at sites, notice what does and doesn’t seems to work. You can even sign up to get Sightings delivered to you every day.
• View the source. When you see something you like, use your view sourcefunction in your browser to see how the effect was done. It’s amazing what you can learn by looking behind the scenes.
• Read and study. Learn all you can about both design and technology. Project Cool’s other QuickStart topics are always a good place to start.

Step 15: Build a Sample Page
This is the HTML code for a sample page. This page creates a headline, some text, one link, and one email link. Click anywhere in the example to open a new window displaying the page. You can compare the code to the actual page.

I love Goldfish!

I breed and raise goldfish and it’s a wonderful hobby. I have put together a collection of pictures of my prize-winning fish. And I’ll you how I’ve done it.

Everyone should have at least one goldfish in their life!

If you have any questions about goldfish, I’d love to hear from you.