Writing web pages using Word 97

• Creating a folder for your web pages and associated graphics
• Inserting pictures
• Inserting hyperlinks
• Controlling the background to your page
• Previewing the page
• Some rules for writing project web pages

Things to do: Create a folder on your f: drive called project. All your webpages, and the images they refer to, should go in there. When it is finished this can be easily copied to me, and I will place it on the HIS104 website, to be viewable locally. How your hearts will swell with pride!

Open two documents in Word 97, and save each document using the File Save As HTML command from the main menu. Save each document to your new project folder. At the end of this you should have two files in your project folder called something.htm. All web pages end with the file extension .htm or .html.

Word 97 basically acts as a web editor when you have loaded any file ending in .htm. You can alter your web pages just as you would any normal word document. When you have finished, just remember to save the document as an HTML file.

HTML is just a plain text file full of tags which tell the web browser, like Internet Explorer, what how to display the page. If you want to know what a web page looks like, choose View HTML source from the main menu. Since only a mad person would want to type all that out in a text editor like Notepad, I advise you to write your web pages using Word 97. Alternatively you can use the more powerful Frontpage (Start, Programs, Communications and Internet, Web editors) although this is quite demanding of computing resources and is not recommended.

Guide 130 tells you all you need to know about the basics of HTML and is freely available from the UCS shop, and from their web site, You can use the View HTML source option to add extra HTML code manually.

When you have an .htm file loaded, Word 97 displays the following buttons on the top toolbar. Here is what they do. Try them out on one of your .htm documents...

  inserts a horizontal line in your web page

  inserts a picture in your web page. When you click on this, you get a dialogue box. Just choose a graphics file from your local f: drive in the project folder. Note that web graphics have to be either .gif files or .jpg files to display properly. If you have .bmp files you can convert them to .gif files using a graphics package such as Paintshop Pro. Once you have inserted a picture, you can select it with the mouse and add borders or change its alignment on the page with the word toolbar. You can also use the Format Picture command from the main menu to further manipulate it.

Try adding a picture to one of your .htm documents. Remember to select a .gif file in your projects folder.

 inserts a hyperlink to another document. You add links either from the directory your document is in, ie. project, in which you just have to choose a file in the project folder. It is recommended that you do that at first. You can also add full URLs of the sort http://www.ncl.ac.uk/history/his104index.htm/ which is known as an absolute web address, ie. it works wherever the document is located. A relative address usually refers only to documents in the same folder or directory, or one close by.

Try adding a hyperlink by using insert hyperlink, and choosing the other .htm file in your project folder. Try it out by clicking on it. Have a look at the HTML code using View HTML source.

 lets you control the background to your document. It enables you to choose different coloured backgrounds, and to choose graphics files to act as a background. If you choose a file (this page has a graphics file as a background) your web browser simply tiles it (duplicates it) across the page.

 lets you see the current page as it would appear in a web browser. Note that this is no substitute for previewing the page in a proper web browser like Internet Explorer.

Rules for writing project web pages

All files, ie. text and pictures should be in one separate folder on your f; drive

Filenames should not contain gaps

Filenames should be only 8 letters long

When you link to pictures or graphics, check that the HTML code refers only to a single file name and does not contain a path name, ie.

<IMG SRC="filename.gif">

Not

<IMG SRC="f:\foldername\filename.gif">

The latter makes it difficult to 'upload' documents, if that proves necessary.