Quick and Easy Webpage
Creation for Genealogists

Page 9

Seminar presentation: 2006 FGS Conference, Boston MA

(c) Linda Haas Davenport

Dividing Line

Finishing Your Main Page

If you used graphics from an artist who requested a link back to their sites you should add their graphic (if they offered one and most do) at the bottom of your page and turn the graphic into a hyperlink back to their site. Place the graphic in the 2nd cell on the row and then center it.

Adding Search Engines & Guestbooks

If you want to add a guest book to your site there are several out there to chose from. Find one you like and follow the directions on the site for installing the code. Most sites give you the HTML code and you simply copy/paste it in your own code.

One of the best enhancements for your site is to add a site specific search engine. There are many free ones. I personally like and use Free Find. These search sites furnish you the graphic for a counter and the HTML (or mainly Java) code to copy/paste into your own HTML code.

When you're adding code for a guest book and counter be sure you paste the code ABOVE the </HTML> </BODY> commands, otherwise they won't show up on your web page or even worse will be deleted when you hit the Exit HTML Source button.

If you are using a bordered background the graphics for a guest book or some search engine graphics needs to be in the 2nd cell on a row. If you find the code balks at being placed in a cell, place it below the table and then center it. To do this be sure you place the code directly above the </HTML> code and below any other code. That will place the code below the table. Copy/pasting code into your own page is something you will have to play around with until you figure out how to get it to work where and how you want it to on your own page.

Final Tweaks

Once you have finished your main page you have to do some tweaking to the HTML code.

Save you page and go view the HTML source (Click on View, Click on HTML Source).

Pointer to Your Image Folder

You need to add a description for any graphics you used on your main page and also change the pointer to you images folder.

Scroll down through the HTML code and look for <IMG SRC= the full command looks something like this:

<IMG SRC="sepblugrn.gif" WIDTH=488 HEIGHT=25>

When you inserted your graphics Word made a copy and placed it in your main folder. You want the graphic pointer to go to your images folder. You also need to add a description that will be displayed for anyone who has a text browser or if, for any reason, the graphic isn't loading.

Being careful not to delete the " marks add the pointer to your images folder. It should end up looking like this, except "sepblugrn.gif" will be the name of your own graphic.

<IMG SRC="images/sepblugrn.gif" WIDTH=488 HEIGHT=25>

Once you have changed the pointers delete the graphics out of your main folder. Close and reopen your web page. If you are missing a graphic you know you missed changed a pointer.

Adding a Description for Your Graphics

To add the description you use the ALT= command. Unless your graphic is large, like a welcome banner or bar, keep the description short. The ALT= command goes after the Height command. Here's an example of how it should look. Remember that the quote marks (" ") are a part of the command.

<IMG SRC="images/sepblugrn.gif" WIDTH=488 HEIGHT=25 ALT="Dividing Line">

On my Learning Center page I have a graphic of the perfect town for a family historian. It looks old and it has a library, museum, courthouse, etc., all next to each other. My ALT description is "My Dream Town."

Getting Rid of Blank Lines

I'm sure you noticed that every time you hit the Enter key a blank line appeared. If you want items to not be separated by a blank line you need to delete the <P> at the beginning of a line and replace the </P> with a <BR>.

The index page for this presentation doesn't have the extra lines. Here's what the before and after code looks like:

<P>Page 9:</P>
<P>Final Tweaks</P>
<P>Pointer to Your Image Folder</P>
<P>Adding a Description for Your Graphics</P>


Page 9:<BR>
Final Tweaks<BR>
Pointer to Your Image Folder<BR>
Adding a Description for Your Graphics</P>


We're all used to hitting the Tab key when we want to indent something. But HTML, for the most part, ignores the Tab command and your text will end up all the way to the left. To be sure your data lines up the way you want it add the command for a space - &nbsp; Add as many &nbsp; commands as you need.

Here's how the above ends up looking using the &nbsp; command:

Page 9:
Final Tweaks
     Pointer to Your Image Folder
     Adding a Description for Your Graphics

The code looks like this:

Page 9:<BR>
Final Tweaks<BR>
&nbsp; &nbsp; &nbsp;Pointer to Your Image Folder<BR>
&nbsp; &nbsp; &nbsp;Adding a Description for Your Graphics<BR>

Getting Rid of the "Size" Commands

If you use the "A" or "A" buttons to increase or decrease the size of your font or if you copy/paste something from somewhere else that uses a font size different from your webpage, Word generates an HTML fixed size command. Other than increasing the size of a heading you should not assign the size of your text. Once a size is assigned in the HTML code it cannot be made larger or smaller by using a browser's View Text command. I'm sure all of us have, at one time or another, encountered a web page that the text was so small it was hard to read or so huge you wondered what the web master was thinking. To make matters worse not all computers display text the same size. (For example what looks good and is easy to read on my monitor at home, ends up being tiny on my monitor at work and large on my laptop.) If you tried to change the viewing size of a page in your browser and it didn't work it was because the font size was assigned.

Genealogy has a disproportionate number of older hobbyist. This means a higher number of visitors with eye sight problems. I can speak from experience when I say, that one of the most frustrating things in the world is to visit a site where I hope to find information about my family and find the text so small, (and it can't be changed) that I can't read it without using a magnifying glass.

You'll find the size command buried in the Font Face Command:

<FONT FACE="Comic Sans MS" SIZE=4 COLOR="#0000ff"><P ALIGN="CENTER">Quick and Easy Webpage <BR>

Use the Search & Replace function to remove this command. In the Search Box either type in the size command or copy/paste it. Leave the Replace With box empty. Start below your heading by placing your cursor on the first line of code below your heading and then selecting "replace all." When the search reaches the end of the code it will ask you if you want to search the top of the page, Click No and exit.

Dividing Line


Return to Easy Webpage Index

Return to Learning Center Index

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