Quick and Easy Webpage
Creation for Genealogists

Page 6

Seminar presentation: 2006 FGS Conference, Boston MA

(c) Linda Haas Davenport

Dividing Line

Understanding Word 97's Code Generator

As you type a document Word 97 generates HTML code in the background. Think of it as a page hiding behind the document you are typing. By and large Word 97 does an excellent job, but there are a few things it can't do and a couple of things it doesn't do well. For those few things you will have to tweak the code.

At first glance it's pretty scary looking and your first instinct may be to say "I can't do that" or "I don't want to do that", but it's really very simple and it won't take long before you will be flying through the tweaks you need to make. Trust me, it beats the heck out of writing the whole page from scratch.

Word 97's Tool Bar

There are a few things on the tool bar you will use all the time. Take a minute and become familiar with them.

Click on the View button. The bottom selection is HTML Source. Clicking on this option moves you from your document to the HTML code page.

Click on the Insert button. All graphics are installed using the Picture option. The last option, Hyperlink, is used to turn a word, phrase or graphic into a hyperlink.

You will be using tables at one time or another. You will use most of the option on the Table menu.

If the formatting tool bar is not displayed (this is the one showing the font in use, a button with a big A and a little A, etc.) click on View, click on Toolbars and then click on Formatting. It is this bar you will use to select colors, fonts, text size, etc.

The First Few Tweaks

Every time you set up a new page there are a few things you have to do first.

Change the Title: Word 97 has no way of knowing what you want to name your page. The default title is the name of the file and isn't what you want a visitor to see. You must fix the title.

Assign the Background: Word97 also can't set up your background for you. Figure out which background you want to use and move the .jpg or .gif (along with whatever welcome banner, bullets, buttons, bars, etc. you intend to use on your main page) from your extra_images folder to your images folder.

Choose Font Colors: Word's defaults are black text on a white background and blue underlined hyperlinks. You may want to change the color of the text to complement the background or match a color in the border and change the color of the hyperlink to complement your colors. Word's selection of colors is extremely limited. Here's my website of choice for additional colors and the hex code for the color. Although some web browsers recognize color names (Black, White, Red, Blue) not all do. You need to assign the hex code for a color.

For standard Word colors, Word will give you the hex code on the fly. Here's how. You can type a color name: Red Blue Black Green, etc. and by using the formatting bar, change the color of the word to match its color. When you are finished it will look like this. Red Blue Black Green. When you view the source the color will include the hex code.

COLOR="#ff0000">Red COLOR="#0000ff">Blue COLOR="#000000">Black COLOR="#008000">Green

 Time to Tweak - Take a Deep Breath - Here We Go.

Move to the HTML source page (remember click on View, click on HTML source)

This is what you will see:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<META NAME="Generator" CONTENT="Microsoft Word 97">
<META NAME="Version" CONTENT="8.0.3410">
<META NAME="Date" CONTENT="10/11/96">
<META NAME="Template" CONTENT="C:\Program Files\Microsoft Office\Office\HTML.DOT">
<BODY TEXT="#000000" BGCOLOR="#ffffff">

Any thing enclosed in < > are HTML commands. For every command (< >) there must be a turn off command. The turn off command is the same as the command except it has a slash (/) in front of it. (</ >)

For our purposes we are interested in the <TITLE> and the line <BODY TEXT...>

Change the title. When you are changing HTML code be careful not to delete the < > symbols. Delete the file name and type the name of the page you want your visitors to see.

Example: <TITLE>index</TITLE> changed to <TITLE>Marion Co AR</TITLE>

In the above example in the <BODY TEXT ...> line the numbers following the # are called hex codes and are the names for colors a browser understands. The 6 zeros stand for black and the 6 fs stand for white. You will always have to use hex codes to define your colors in this section.

Let's say we want our text to be black, our hyperlinks (LINK) to be blue and a visited link (VLINK) to be red and we want to set up our background. Here's how the line will look.

<BODY TEXT="#000000" LINK="#0000ff" VLINK="#ff0000" BACKGROUND="your_background.jpg">

 Where "your_background.jpg" is shown above you will need to type in the name of the background jpg or gif you want to use for your background. Remember to enclose your background name with quote marks (" "). You can't copy/paste the name of the background here, you have to type it.

Save the page.

Click on Exit HTML Source

You're back at your document page and the background is there and page name is displayed. Now wasn't that simple?

Here's an example of what a page will look like with a bordered background displayed.

Sample page showing background


Dividing Line


Return to Easy Webpage Index

Return to Learning Center Index

Return to Home Page[an error occurred while processing this directive]