Step-by-Step: Build Your First Web Site

So you want to set up your own Web page, but HTML and hyperlinks leave you at sea? Start here.

Stan Miastkowski

Sometimes, simplicity is good, especially when you're building your first Web page. Apart from being easier to design, a basic page loads quickly in any browser. Here we show you how to build a simple page. When you're ready to take the next step, turn to "Easy Steps to a Great Site" for tips on designing your site and adding interactive elements like rollovers, shopping carts, and polls.

HTML (Hypertext Markup Language) is the language of the Web, the code that governs every Web site. But while learning HTML is valuable for getting under the hood, using a basic WYSIWYG (What You See Is What You Get) HTML editor is a far easier way to create a simple Web site. You enter text just as you would with a word processor, drop in images, and add links--the software creates all the HTML automatically in the background.

Web editors are available in all levels of complexity, and they can be expensive. But a basic WYSIWYG editor like Microsoft FrontPage Express or Netscape Composer is all you need to get off the ground. And you may already have one on your PC. If you use Windows 98 and Microsoft Internet Explorer 5 or later, FrontPage Express may be preinstalled; Netscape users probably have a version of Composer.

In the example outlined here, we used just a few of FrontPage Express's features to create a custom page for our basic Step-by-Step Web site. The directions are quite similar for WYSIWYG editors like Composer. To learn more about HTML, just go to any search engine and enter HTML tutorial. Or invest in a book on page design fundamentals such as Learning Web Design by Jennifer Niederst (O'Reilly, 2001).

Once you've learned the basics, you can use a full-fledged Web design tool (such as FrontPage 2001 or one of its competitors) to jazz up your site. See "Your Web Toolbox" for some of our favorites. But please, keep it simple.

Stan Miastkowski is a contributing editor for PC World.

What You'll Need

A Web page editor like Microsoft FrontPage or Netscape Composer

A host for your Web site (steps 1 and 8)

A basic FTP client (step 7)

Eight Steps to Creating a Basic Web Page

1. Plan Out Your Site and Get a Host

Before you sit down at your PC, design your site on paper. Make a list of the elements--site name, headings, data, graphics, links, and so on--that you want on your site.

You'll also need a host for your Web site. Most Internet service providers make limited space for a Web page available to every registered user (contact your ISP for details). Or you can opt for one of the many free Web hosts such as GeoCities.

2. Start With the Basics

Open your HTML editor. You'll first want to enter your site's title (what surfers see on the top line of their browsers). Right-click anywhere on the page and choose Page Properties to bring up its dialog box. Under Title, type the name of your Web site. (Don't worry about any of the other entries on the screen.)

Then select the Background tab and (if you desire) choose a background image, background and text colors, and the colors for various types of hyperlinks. (For our example, we used the default settings.)

3. Enter Your Text and Headlines

Entering text into your Web page is just like using a word processor. Once the text is entered, you can select it and choose its typeface and point size with the Font and Font Size drop-down boxes on the Formatting toolbar. Just as in Word, the Formatting toolbar lets you set the selected text's style (bold, underline, italic, or a combination), alignment (centered or left- or right-justified), color, and so on.

Web pages have levels of headings. To select a level, right-click a line of text, choose Paragraph Properties, and then pick the heading level you want.

4. Add Graphics

Images add interest to your Web site. In general, images in.gif format are used for logos, cartoons, and similar graphics that have sharp lines and large areas of solid colors. JPEG images are used for photographs and detailed pictures.

To add an image to your Web page, place the cursor at the point in the document where you want the image to appear, select Insert, Image, enter the path to the image file (you can use Browse to find it), and select OK.

To change the image's position, drag it to a new spot. To wrap text around the image, use the alignment function of the Image Properties dialog box: Right-click the image and select Image Properties, select the Appearance tab, and choose an alignment option. You can adjust the space around the image with the Border, 'Horizontal spacing', and 'Vertical spacing' options.

5. Use Tables to Organize Information

Tables allow you to present lists of information in a well-organized, formatted way. We used one to present links to a year's worth of PC World's Upgrade Guide.

To create a table, select Table, Insert, enter the number of rows and columns you want, and click OK. (You can ignore the other fields.)

Then enter information or images into the cells of the table. You can use the font attribute tools to change the font style and size.

6. Link It Up

Links to external Web sites and to other parts of your Web site (assuming it has multiple pages) make your site's design truly useful. You can also add links that start e-mail messages to specific addresses.

To add a link to text, highlight it and click the Hyperlink icon on FrontPage Express's standard toolbar. Type the complete URL (including http://) and click OK. The link will appear in color and underlined on your Web page.

Continue until you've entered all the links.

To add an e-mail link, highlight the text that will contain the link, click the Hyperlink icon, select Hyperlink Type, mailto, and then enter the e-mail address directly after the 'mailto' entry. Click OK.

When you're done, save your Web page. Most hosts require that your site's start page (the page that appears at the URL http://www.yoursitename.com) be saved with the file name index.html. Others use default.html.

7. Load Your Web Site Onto Your Host

You'll need a File Transfer Protocol utility to transfer your Web site to your host. You can find a number of shareware choices on PCWorld.com's Downloads page. For our example site, we used WS_FTP Pro, a popular shareware utility with a modest price of $40.

To upload your site, you'll need the following information (provided by your host):

• Host name
• Log-in name and password
• Directory for your Web pages

Once you've connected to your host and moved to the correct directory, it's time to upload your index.html file (the procedure depends on your FTP utility), plus any graphic images. Disconnect from the Web site, close your FTP utility, open your browser, and do a final check to make sure your site looks right. If everything works correctly, you're open for business.

8. Stake Your Domain Name Claim

Though Web hosting space provided by your ISP is fine, the URL to access it can be long. And of course, it's not as sexy as having your own domain name.

If you want to go that route, you'll first have to check whether the name of your dreams is available. Many Internet service providers register domain names and have a page where you can find out whether you can get the name you want. Or check Network Solutions or Register.com.

But have a list of alternative name choices handy--chances are your favorite is already taken. Basic registration for a domain name costs $35 a year.

Hosting charges for a custom domain start at about $10 per month. Numerous companies offer hosting for a basic Web site, but many local and national ISPs offer all-in-one services that both register your domain name and provide hosting services, starting at about $15 per month.