Word for Windows 97 comes with a set of tools that make it easy to create a Web site. If you know how to insert a graphic and type text into a Word document, then you know enough to start building a Web site.

In this step-by-step guide, I'll guide you through creating a very simple, two-page Web site using Word's in-built tools.

Your first task is to decide what you're going to put on your Web pages. If you devote time to this before you start the actual job of creation, you'll save yourself lots of time later, and make the whole process easier.

The sample site design

Your first page is going to act as a virtual 'welcome mat'. It will contain a single image and a single-colour background – much like the entrance to this geekgirltalk site. The second page will contain the meat of your (very skimpy) site. There you'll put a little information about yourself, your e-mail address and a link to another site on the Web. If you'd like to know where this is heading, you can check out how the completed site will look
by clicking here (use your browser's back button to return to this tutorial).

Creating the first page

Let's get started on the first page.

To begin with, you need to create a blank Web page:

  1. Open Word, then click the File Menu and choose New (don't simply click the New File button on the toolbar, as you need to specify the type of new file you're creating, and the toolbar button doesn't give you this option).
  2. In the New File dialog, click the Web Pages tab and then double-click the Blank Web Page icon to create a blank Web document.
What, no Web Pages tab? You may not have the HTML option for Office 97 installed. You can add it by loading up your Office 97 installation disc and running Setup. In the Office Setup, put a checkmark beside the HTML option.

Adding a graphic to your page

You're going to centre a single graphic on the page. To do that:

  1. Press the Enter key a few times to move the cursor down a few lines
  2. Click the Center icon on the toolbar.
  3. Open the Insert Menu, choose Picture and then choose From File… from the sub-menu. Word will prompt you to save the document at this time, so click Yes.
  4. When the Save As dialog appears, use the Save In: box to choose a location for your document, name your document index.html, and click Save.

Why use the name index.html? It's basically a convention. Many (but not all) Web hosting sites require that your main Web page be called index, so we may as well go along with it.

Note: You'll find it easier to upload your completed Web site to your Internet Service Provider once you've completed it if you store all the files – html documents, graphics and any other files – in the same folder. I find it easiest to create a folder called Web Sites and then store each Web site in its own separate sub-folder within that folder.

  1. After saving your document, Word will open the Insert Picture dialog box. You're going to insert the picture below. You can, of course, use any small GIF or JPG image you have, but if you have none to hand, you can use this image by right-clicking it and choosing the option to Save the picture on your hard disk (it's probably easiest if you save it to your Windows Desktop so you can get at it easily).

human01.jpg (5784 bytes)

  1. In the Insert Picture dialog locate the image you want to insert, and double-click it to insert it into your document. Word 97 will automatically copy the image file into the folder where you saved welcome.html.

Formatting text

After adding your graphic, press Enter to move the cursor down one line and type the words Click to enter. To format this text:

  1. Select the text you've just typed.
  2. Open the Format Menu and choose Font to display the Font dialog box.
  3. In the Font dialog box, select Times New Roman, 14 point size, dark blue colour, and bold effect.
  4. Click OK.

Notice how different this Font dialog box is from the usual Word font dialog: that's because it offers us only those options needed to create a Web page.

Adding a hyperlink

You're going to turn the picture on our page into a hyperlink, connecting it to another page. To do that:

  1. Right-click the image you inserted and choose Hyperlink from the pop-up menu to display the Hyperlink dialog box. (This is a shortcut – you can also select the graphic, open the Insert Menu and choose Hyperlink to do the same thing.)
  2. In the Link To File Or URL box, type main.html, make sure the Use Relative Path For Hyperlink box is checked, and click OK. It doesn't matter that this file does not yet exist; you'll create it later.

Adding a background

Finally, to add some atmosphere to the page, click the Background icon (the paintbucket) and choose the black colour.

Notice how the cursor turns into a pointing hand if you place it over the image. This indicates that the image has a hyperlink attached. Once you've created your second page, that hyperlink will become active. Right now, if you click it, all you'll get is an error message.

Make sure you click the Save icon to save your work to date.

Using a Web Wizard

The first page you created was simple because you want it to load quickly and attract surfers' attention. The second page is your main page, with actual content, so it's going to be a little more complex.

You're going to use a WinWord Wizard to build this page for you.

  1. From the File Menu choose New, click the Web Pages tab in the New dialog box, and double-click the Web Page Wizard icon to start the Wizard.
  2. Select the Centered Layout from the list, click Next, then choose one of the layout styles. If you want your site to match the tutorial example exactly, choose the Contemporary layout.
  3. Click Finish. The Wizard will create a page for you.
  4. Select the heading text and replace it with My Page (you can substitute your name or a snazzier title here if you like).
  5. Select the next paragraph and replace it by typing Welcome to My Page. Here you'll find some information about me and a link to one of my favourite sites.
  6. Delete the following line that says 'Type some text', and then select and delete the first item in the menu. You're only going to use two items in your page, so these lines are unneccesary
  7. Now might be a good time to save what you've done, so click the Save icon and save the file giving it the name main.html. Then continue working.
  8. Select the text 'Add a list item' on the next line and type About me in its place. Repeat the procedure with the next list item replacing the sample text with Visit Australian PC User's Web site. (This is the Web site of the magazine where this article originally appeared. You may wish to substitute another site. Just make sure you know the correct URL – Web address – for the site you choose, as you'll need it later on.)
  9. Select 'Type some text' on the next line and delete it.
  10. On the final line of the page, delete the words 'Related Page 3' and the vertical separator before the words.
  11. Select the words 'Related Page 1' and type Back to the entrance in its place. Select 'Related Page 2' and replace it with E-mail me.

Adding content

You've now rid yourself of all unnecessary items on the page. You're going to add some biographical details which you'll link to the About Me list item, add three other links, and then you'll be done.

You don't want your biographical info messing up the look of your page, so let's put it far enough down the page that it's out of view. A neater alternative, of course, is to put it on a separate page entirely and link to that page. As we're trying to keep this as simple as possible we won't do that now, but you might like to do it later when you feel more comfortable.

So, press the Enter key enough times to move the cursor a number of lines below the original screen. Click the Align Left button, and type a heading About me. Use the font formatting tools to format this as a heading.

Now, press enter and type some information about yourself. Interests, family history, employment background, whatever you feel like. Select the text you type and format it in a smaller point size than the heading you created.

Adding a bookmark

When someone clicks the About Me item in your list, you want them to jump straight down to the About Me heading and text further down the page. To do that, you need to insert a 'bookmark' beside the About Me heading. A bookmark is just another type of link: the normal hyperlink, when clicked, transports the surfer to another page or site on the Web; a bookmark, when clicked, transports the user to another place on the current page.

Once you insert a bookmark into a Web page, you can then link to that bookmark in the same way you link to entirely separate pages.

To insert the bookmark:

  1. Click beside the About Me heading down near the bottom of your page. Open the Insert Menu and choose Bookmark to display the Bookmark dialog.
  2. Type AboutMe (no spaces) in the Bookmark Name: box and click Add.

Graphic and text hyperlinks

All that's left to do is create our hyperlinks: one to connect the About Me link to the About Me bookmark you just created; one to connect the Australian PC User link to the Australian PC User site on the Web; one to create a link back to the index page; and one to enable people to send you e-mail.

Scroll back to the top of the page. You want people to be able to click either the words or the little graphic 'bullets' in the list for the hyperlink to work, so you're going to add each hyperlink twice: once to each list item and its corresponding graphic.

  1. Right-click the first graphic bullet in the list, and choose Hyperlink from the pop-up menu.
  2. In the Insert Hyperlink dialog, click the browse button beside the Named Location In File box. You'll see a list of bookmarks in this page. There's only one, of course, called AboutMe. Select it and click OK.
  3. Now do the same thing with the 'About me' text in the list. Select it, right-click it, insert a Hyperlink and point the hyperlink to the AboutMe bookmark. You'll see that the text changes colour and is underlined, indicating it's a hyperlink.

You've done these two hyperlinks separately because, if you select the graphic and text all at once, you'll end up with ugly looking underlines between the two.

Linking to another site

Go through a similar process to add a hyperlink to PC User's web site. This time the hyperlink is not a bookmark or to a file on your hard drive; instead, it's a hyperlink to an address on the World Wide Web.

  1. Right-click the second graphic bullet in the list and choose Hyperlink from the menu.
  2. In the Link To File Or URL: box type http://www.pcuser.com.au.This is the universal resource locator (or URL or, more simply, address) of the Australian PC User site on the Web.
  3. Select the 'Visit the Australian PC User Web site' text, right-click and choose Hyperlink, type http://www.pcuser.com.au in the URL box and click OK.

Finalising your links

Two more links and you're done.

  1. For the first one, select 'Back to the Entrance' and insert a hyperlink for it. This link goes to the URL welcome.html (the first page you created).
  2. The final hyperlink isn't to a page or bookmark. This one, when clicked, will open the user's e-mail program, create a new message with your e-mail address automatically inserted in the To: box, and let them create an e-mail message. The process is almost the same as creating a Web hyperlink: select the text, right-click and choose Hyperlink. This time, click the down arrow beside the Link To File Or URL: box and select mailto: from the list. Then type your e-mail address immediately after the mailto: in the URL box, so the full URL reads mailto:rvines@geekgirls.com (substituting your e-mail address for this example, of course!).

You'll find if you rest the mouse pointer over any of the hyperlinks, the destination will appear in a pop-up box.

The final test

That's it. Your two-page site is complete. You can test it immediately by clicking the Web Page Preview button in your toolbar. This will load your Web browser and let you try out your site. Alternatively, you can have a
look at the completed pages by clicking here (you'll need to click your browser's back button to return to this page after viewing the sample site).

If anything doesn't work, return to Word and work on your html documents. Remember when you want to open either the Welcome page or the Main page in Word that these documents are in HTML format. In the File Open dialog box you'll need to make sure you choose HTML Document in the Files Of Type box to display these files (Word normally just shows files with the .DOC extension).

Improving the site

There's plenty you can do to improve this sample site. You've used two very different backgrounds: you might like to make a more consistent look between the two screens

You might also want to select the 'My Page' heading on main.html, turn it into a bookmark called PageTop, then insert a text or graphic hyperlink at the very bottom of the page called 'Back to the top' and link it to the PageTop bookmark.

Play around with these pages. I'm sure you'll think of other improvements. And make sure you have a look at the HTML source code that Word has created automatically for you. You've created your Web pages by pointing, clicking, typing and inserting, but in the background, Word has created the HTML code needed by the Web. You can see this code by choosing HTML Source from the View Menu in Word.

© 1997  Rose Vines

Support geekgirl's

Do you find the tutorials on this site useful? If so, please show your support by kicking in a few bucks to help buy computers for the wonderful orphanages run by the Afghan organisation, afceco.org. For a small amount, it is possible to make a difference in an area of the world which is hurting badly.

Want to know more? Read this post on my blog.
top home net guide archives menu