Site Creation

The next phase is to determine what you want to place on the web-site. Once you've determined what, then you need to determine what the best way to present it is. In determining how to present the information, you need to decide how you want to develop the web pages. The basis for all web-pages is HTML.

If you want to learn HTML code, you can write a basic web-page using a program as simple at Notepad. Most Microsoft Applications (i.e. Word, Publisher, Powerpoint) can generate HTML web-pages, although they tend to generate very code heavy pages. What this means is that they often use many times more code than necessary, which makes the pages load slower.

There are several commercial packages for generating pages. Also, most of you should be familiar with the fact that most genealogy programs can generate HTML pages to display your information.

"Repetition and patience are two key elements of good design."
Bob and Lisa, 2006

Personal Preferences

I am best at designing web-pages using Notepad, writing simple code in HTML. It is remarkably easy and I will be discussing this topic in more depth here.

There are several commercial packages (ie. Dreamweaver) that develop WYSIWYG (What You See Is What You Get) web pages. I will not be exploring these options.

Determining Content

Don't worry about the content quite yet. Let's examine some core pieces and some code that will make it easier to plan how to present the information. This might give you some ideas that could change things slightly.

Introduction to HTML Coding

HTML is a programming language; but, only in the simplest sense. If you have any experience with OLD word processors, some of you might remember having to turn Bold on and off (being able to toggle between a set of flags and an awful color coded scheme). HTML is much like this.

To make something bold we are going to use what are called Tags. In HTML, we generally have Opening and Closing Tags.

Opening Tag for Bold Text: <b>

Closing Tag for Bold Text: </b>

Note the forward slash "/" indicates a Closing Tag.

Example

<b>This is bold.</b> produces ...

This is bold.

HTML Files

.htm versus .html

Hopefully everyone has seen files with one of these two extensions. The only real difference is that one has an "L" and the other does not. Virtually all servers see them as the same type of file.

Remember, whichever one you use, be consistent because it does matter which is used when the name of the file is used in a link. If the filename is bob.htm and I enter bob.html in an address, it will not work because bob.html does not exist.

index.htm (or index.html)

Regardless of which method you use for the extension, the index file is the most important file for our purposes. This file is the default file to be opened if no other file is specified.

Example

http://bob.fornal.org/Genealogy/ actually opens ...

http://bob.fornal.org/Genealogy/index.html

If you have to enter a path over and over, the first address is the one you would want to use, simply because it is shorter.

Basic HTML Structure

Ok, here is the basic structure for almost all HTML files:

<HTML>

<HEAD>

<TITLE>SAMPLE PAGE</TITLE>

</HEAD>

<BODY>

Sample text goes here.

</BODY>

</HTML>

Notice how the Opened/Closed Tags are nested; that is, the Open/Close TITLE Tags are nested inside the Open/Close HEAD Tags, which in turn is nested inside the HTML Tags.

Also, the text inside the Tags is ALL CAPS. HTML Tags are Case Insensitive; that is, you can enter them in ALL CAPS or ALL LOWERCASE. This is preference only; select one and stick with it.

There are a few minor variations to this structure, but almost all the time this will be the basic structure for a web-page that you are creating.

PRACTICE: Index.html

Before you begin, create a folder where you will store the web-pages we are going to create and develop. I would recommend creating a folder called Internet Files on your desktop (this is what I will refer to in the future).

Now, let's copy the following and paste it into a Notepad document:

<HTML>

<HEAD>

</HEAD>

<BODY>

This is my first Index File.

</BODY>

</HTML>

Notice the new Tag in the code listed, <br>. This is a Break Tag that tells HTML to place a line-break (same as pressing the Enter Key in a word processor) at this location.

Read the following COMPLETELY before executing this process:

Once you have pasted this file into Notepad, use the following process to save the file:

Click File, then Save As ...
Change the Save As Type to All Files
Change the File Name to Index.html (YES, the filename is case sentitive)
Make sure that Encoding is ANSI
Make sure that you are saving into the correct folder
Click the Save button to finish this process.

Now that you have saved the file, close Notepad ... open the Internet Files folder ... double-click on the Index.html file to see what you have created.

Note: The Index.html file that you have created will be displayed in your browser (ie. Internet Explorer) when you double-click on it. You just created a basic web-page; it just hasn't been placed on the Internet yet.

PRACTICE: Modifying the Index.html File

Let's re-open the file with Notepad and make some modifications. Right-Click on the file and select Open With, then Notepad. This should open the file and you should now see the code you entered previously.

Locate the <BODY> Tag and change the next few lines to read ...

This is my first Index File.

</FONT>

</BODY>

OK, here we've added a few parts. Within the <BODY> Tag, there is a modifier that changes the background color. (BGCOLOR) to light grey.

Also, notice the <FONT> Tag and the modifier that sets the Font Face to Arial (Tahoma, if Arial does not exist on the system) and the Font Color to blue.

Now, click File, then Save to save the changes you just made (notice that it is MUCH easier to save after doing the Save As process the first time).

Finally, double-click the file to see what these changes did to the Index.html file.

PRACTICE: Adding Images

Placing images on a web-page is easy, but keep a couple of things in mind. Often, it is the images that make pages load slowly - smaller is better, but maintain a good balance of size and clarity - smaller is better until you can't tell what the picture was when you started.

There are three basic types of images allowed (there are others, but these are the most common):

BMP - Windows Bitmap, very clear and often VERY LARGE.
JPG - JPEG, often clear and good size with complex images, but can pixelize (odd fuzzy effect) at times.
GIF - Compuserve GIF, excellent small file sizes and allows for simple animation types, but often drops clarity because it uses a maximum of 256 colors, which is VERY limited.

The best thing that you can do until you get more familiar is to use a graphics program like Paint Shop Pro (PSP) to save an image that you want to use in all three formats, then look at the file sizes and view the images on your local page to see how clear they are and choose what fits the situation best (size or clarity).

Select any image and place it into the Internet Files folder.

Change this line ...

This is my first Index File.

... to the following ...

This is my first Index File. <br><br>

OK, now let's take a look at what you just added.

This statement reads, Image Source equals {filename}, Alternate Description equals {description}, Border Size=1.

The alternate description is handy if the image does not load for some reason and also for the vision-impaired.

Border=0 turns the border off.

Image Locations

Before you move on to learn about linking web-pages, you need to understand that the image file does not have to reside in the same folder as the web-page that uses it.

Often, you will want to create a folder specifically for storing images. This helps to keep the clutter down and makes locating files simpler.

Also, you can reference images from other sites. For example, my picture located to the left here is actually on my domain (http://bob.fornal.org) in an images folder. This can be good for organization, but many sites do not allow this (called hot linking) because it affects the download of the site that hosts the image.

Linking Web-Pages

Linking Basics

There is one way to code a link; but conceptually, there are several types. For the moment, there are the two simple types - linking to local pages and linking to external pages.

Let's take a quick look at the HTML code before we get into the details. Here is what it looks like:

On the page you get something like this:

My Site

This is a link that takes you to bob.fornal.org; remember, you are actually seeing bob.fornal.org/index.html (index.html is the default file that the system will display if it is not specified).

PRACTICE: Linking to Local Pages

OK, now let's set up an example that will allow us to explore this in a little more depth.

Inside your Internet Files folder, create another folder called, Genealogy (remember that once these files are on the web, they WILL BE case sensitive).

Copy the Index.html file, that you created previously, into the new folder.

Edit this new file and change a few things:

Remove the <img ... > Tag.
Change the background and font colors.
Change the header and text.

Save your changes.

(basically, we are doing this so that we can see that the pages are different)

Now, edit your original Index.html file and add the following code:

<a href="Genealogy/Index.html">Genealogy</a>

HREF is a Hypertext Reference; simply, something that refers to a web-page address. This HTML Tag places a link to the new Index.html file.

Now, in the Genealogy/Index.htm file add the following code:

This HTML tag places a link on the Genealogy page that goes back to the original Index.html file that you created.

Notice the ../ in the HREF address. This tells you that we need to go up one (1) level in the tree structure.

PRACTICE: Linking to Exernal Pages/Sites

OK, we've talked about placing images onto a page. You should now understand that an image can be referenced from the same folder that the web-page is in, or from another location (either in the same domain or on another web-site all together).

The true strength of the Internet is the ability to reference other pages ... the work that other people have done. This is done with Links.

As we saw with images, there are basically two types of links - internal and external.

Internal Links: Connections to pages on your site; minimal or no path information is required.

External Links: As you've probably figured out, these are connections to web-pages on other sites. In this case, you need to include full path information.

In both cases, we use the same HTML tag. Here is a simple example of an external link for you to place on either of your practice pages:

Remember: Use the <br> to place Line Breaks.

<a href="http://bob.fornal.org/Recipes/">Bob's Recipes</a>

... which becomes ...

Bob's Recipes

Tables

Now for a slightly more difficult topic. Tables are important when you are first beginning to develop web-pages. Much later, you will most likely learn about Style Sheets (not difficult to do, but a lot added onto what you are already getting). Until then, tables are one of the easiest methods to tweak/adjust alignment (left, center, right).

Before we talk about the tags, here's the simple part; with most software, when we talk about a table, it has rows (across) and columns (down). For our purposes, we will have Table Rows (across) and Table Data (cells on a row). The number of cells in the first row determines how many columns there are for the rest of the table.

Here are the three Tags that we will use:

<TABLE> </TABLE> - Table Open/Close
<TR> </TR> - Table Row Open/Close
<TD> </TD> - Table Data Open/Close

What we need to do now is discuss each of these and some of the options individually to provide some depth of understanding when we get to some examples.

TABLE Tag

This is the <TABLE ... > Tag that we discussed previously.

Think of this as setting up or configuring the outer box and background of the entire table.

Here are three of the settings that you will use most frequently:

width="#" - where # is in either pixels or percent.

border=# - where # is the thickness of the border in pixels.

bgcolor=COLOR - where COLOR is the color of the background (same as we used on the BODY Tag).

So, you might enter something like (this is an example ... do not enter it into your pages):

TR Tag

Here is the most BORING of the three Tags ... Table Row.

There are a few options available, but generally we will not be using them.

So, you will most often enter something like this:

<TR>

TD Tag

OK, now that you've seen the BORING one, let's see the one that will keep you busy ...

This is the Table Data Tag ... all of your information (Data) will go inside these Open/Close Tags. By information, we are talking about anything that you can display ... at this point, you know how to enter text and images (you can link from within here, too).

There are four options that you will frequently see (the first two you've had already:

WIDTH - same as TABLE Tag
BGCOLOR - same as TABLE Tag
align=NNN - NNN is the horizontal alignment, options are (Left, Center, Right)
valign=NNN - NNN is the vertical alignment, options are (Top, Center, Bottom)

PRACTICE: Create a Table

Let's start with a simple example, here's information from a 1930 US Federal Census Record:

Name: John Fornal

Home in 1930: Glastonbury, Hartford, Connecticut

Age: 42

Estimated Birth Year: abt 1888

BirthPlace: Poland

Relation to Head of House: Head

Spouses's Name: Victoria

Household Members:

Name Age

John Fornal 42

Victoria Fornal 40

Joseph Fornal 15

Stella Fornal 13

Annie Fornal 10

William Fornal 5

As you can see, each line breaks down into two items ... easy to convert to a table.

Paste the following code into one of your pages ...

<TD>Name:</TD><TD>John Fornal</TD>

</TR><TR>

<TD>Home in 1930:</TD><TD>Glastonbury, Hartford, Connecticut</TD>

</TR><TR>

</TR><TR>

<TD>Estimated Birth Year:</TD><TD>abt 1888</TD>

</TR><TR>

<TD>BirthPlace:</TD><TD>Poland</TD>

</TR><TR>

<TD>Relation to Head of House:</TD><TD>Head</TD>

</TR><TR>

<TD>Spouses's Name:</TD><TD>Victoria</TD>

</TR></TABLE>

Can you see how this information fits together, how it is nested?

Copy the code you just entered and make another copy just below it using Notepad. Take the Household Members information provided above and see if you can create a table with the information on your own ...

Headers

Try these Tags as headers (or titles) in the code you have created previously ...

<h1>This is a Large Header</h1>
<h2>This is the Next Smaller Header</h2>
<h3>This is the Next Smaller Header</h3>
<h4>This is the Next Smaller Header</h4>
<h5>This is the Next Smaller Header</h5>
<h6>This is the Next Smaller Header</h6>
<h7>This is the Smallest Header</h7>

There are seven headers available, generally only five are necessary most times ...

Bold, Italics, Underline

Here, you will not see the Underline Tag (<u>) used; it has been deprecated (removed) from standard HTML code, although it is supported by most browsers still, because it often gets confused with linked items.

<b>This is the BOLD Tag</b>
<i>This is the ITALIC Tag</i>
<b><i>This is the BOLD, ITALIC Tag</i></b>