PRIMER:
Overview
Netiquette
E-mail/Chat
Mailing Lists
Newsgroups
FTP File Transfer
Telnet
Gopher
Websites/Web Search
Cite Sources
Make A Bookmark Page
Create A Home Page
Home GSWC Site Map Feedback

 Genealogical Society of Washtenaw County, Michigan, Inc.
 The Genealogist's Internet Primer, by Sharon L. Brevoort
Finishing Touches
Add a few finishing touches, if you like them. Unordered and ordered lists can be nested. You can use a different font typeface, resize it larger or smaller, or change it to a different color. You can organize your information in two or more columns using a table. Here's how:

1. In addition to ordered and unordered lists, you can nest lists to form an indented outline. Remember to match each <UL> with </UL> and each <OL> with </OL>. (Your browser automatically adds the circles and squares.)

<UL>
<LI>First link or text, first level
    <UL>
    <LI>First link or text, second level
        <UL>
        <LI>First link or text, third level
        <LI>Second link or text, third level
        </UL>
    <LI>Second link or text, second level
    </UL>
<LI>Second link or text, first level
<LI>Third link or text, first level
</UL>
  • First link or text, first level
    • First link or text, second level
      • First link or text, third level
      • Second link or text, third level
    • Second link or text, second level
  • Second link or text, first level
  • Third link or text, first level


2. Center text using the <CENTER> and </CENTER> tags.

<CENTER>
Copyright &copy; 1998-99 Jerry F. Smith. All rights reserved.<BR>
Last updated 1/1/99.<BR>
</CENTER>

Copyright © 1998-99 Jerry F. Smith. All rights reserved.
Last updated 1/1/99.

3. Change the font size. The default font on an IBM-compatible PC is Times Roman displayed as SIZE="3". You can make your text larger (to 4 or 5) or smaller (to 2 or 1) by changing the size parameter.
  • Use the default, SIZE="3".

    <B>Links:</B> <A HREF="http://www.xxx.com/">Text</A><BR>
    Links: Text
  • Make the font smaller with SIZE="2".

    <FONT SIZE="2">
    <B>Links:</B> <A HREF="http://www.xxx.com/">Text</A><BR>
    </FONT>

    Links: Text
  • Make the font smaller still with SIZE="1".

    <FONT SIZE="1">
    <B>Links:</B> <A HREF="http://www.xxx.com/">Text</A><BR>
    </FONT>

    Links: Text


4. Change the font style to Arial or Helvetica from the default, Times New Roman.
  • The browser looks for Arial first. If not found on your PC, it looks for Helvetica. If not found, it uses the default, Times New Roman.

    <FONT FACE="Arial, Helvetica">
    <B>Links:</B> <A HREF="http://www.xxx.com/">Text</A><BR>
    </FONT>

    Links: Text


5. Change the color. A color number is made up of six characters preceded by a pound sign. The easiest colors to work with are combinations of 00, 33, 66, 99, CC, and FF.

  • Change the color to navy blue using the Arial typeface. The color of the link is determined by the LINK parameter in the BODY tag; the default is blue; here we are using teal, <BODY LINK="#006666">.

    <FONT FACE="Arial" COLOR="#000066">
    <B>Links:</B> <A HREF="http://www.xxx.com/">Text</A><BR>
    </FONT>

    Links: Text

SAMPLE COLORS IN SIZE="3":
Color #
#000000
#990033
#CC0000
#CC6699
#669999
#006633
#FFCC00
#996633
#000066
#3399FF
 		Default font
BLACK
DARK RED
BRIGHT RED
PINK
TEAL
GREEN
YELLOW
BROWN
NAVY BLUE
LIGHT BLUE
 Default bold
BLACK
DARK RED
BRIGHT RED
PINK
TEAL
GREEN
YELLOW
BROWN
NAVY BLUE
LIGHT BLUE
 Arial bold
BLACK
DARK RED
BRIGHT RED
PINK
TEAL
GREEN
YELLOW
BROWN
NAVY BLUE
LIGHT BLUE

6. To organize your information in two columns, use a simple table. The <TR> marks the beginning of a row; the <TD> marks the beginning of a column. Indenting each row and column is not necessary but makes it more readable; your browser ignores it. If you want to see an outline around the table, change the BORDER parameter to BORDER="1" or more.

<TABLE BORDER="0" CELLSPACING="1" CELLPADDING="5">
  <TR>
     <TD WIDTH="50%" VALIGN="TOP">
     ...add categories and links here...
     <B>Favorite Sites</B><BR>
     <B>Societies</B><BR>
     <B>Libraries</B><BR>
     </TD>
     <TD WIDTH="50%" VALIGN="TOP">
     ...add categories and links here...
     <B>Link Pages</B><BR>
     <B>Query Pages</B><BR>
     <B>GenWeb</B><BR>
     </TD>
  </TR>
</TABLE>

Here's an example with the BORDER set to 1. Your browser calculates the width of the columns based on the width of the browser window and the length of the text lines each contains. Long lines may be wrapped to the next line. Notice that the width of each column may also be adjusted to fit the screen, even though you have set the width to 50%.

Favorite Sites
Genealogy Helplist

Societies
Genealogical Society of Washtenaw County, MI

Libraries
Library of Congress

Link Pages
Cyndi's List

 Query Pages
Genealogy Toolbox: Query Central

GenWeb Commercial Sites
Family Tree Maker


7. Add graphics. To download an image, right click on the image, select Save Image As, navigate to your image subdirectory, then click on the Save box. Add the following HTML, giving the filename and type (.gif or .jpg) and an alternate text to be displayed if your visitor is browsing without images. The width and height are optional: if not included, the browser will compute the size, but it will take a little longer for your page to load. This is not a problem if your page does not have too many images.

<IMG SRC="image.gif" ALT="text"></a>
<IMG SRC="image.gif" WIDTH="99" HEIGHT="99" ALT="text"></a>

To use the image as a link to another page, surround the image <IMG> tag with an anchor tag.

<A HREF="URL"><IMG SRC="image.gif" WIDTH="99" HEIGHT="99" ALT="title"></a>

To make the image appear smaller on your page, change the width and height proportionally. The image looks better the closer it is to the original size. Because the size can be changed this way, you can also guess at the width and height of the image, giving the approximate proportions. To find the actual dimensions, use an image viewing program such as Paint Shop Pro.

See Link To Us for several examples of how to work with images in HTML using the GSWC logo button.

Some good sources for genealogically-oriented graphics are:

Top Home GSWC Site Map Feedback

The Genealogist's Internet Primer:
Overview | Netiquette | E-mail/Chat | Mailing Lists | Newsgroups FTP | Telnet
Gopher | Websites | Cite Sources | Bookmark Page | Create Home Page

Copyright © 1998-2007, Sharon L. Brevoort. Used by permission. All rights reserved.
Permission to print a single copy for personal use is granted.
http://www.hvcn.org/info/gswc/primer/finishing.htm
Revised 15 October 2007. Send comments or changes to Sharon at wwwgswc@aol.com.
Images © Corel Corporation.