Running Times Guide to Getting on the Web

By Rich Pollner M.S.E and Dr. Debra Bergman, PHD for Lexabean Consulting, LLC

Visit www.lexabean.com for a full line of software for Runners, Coaches & Triathletes, including a Running/Triathletic diary, strength training, remote training, laminated wristbands (for Runners & Triathletes), PDA/Handheld based pace calculators & more.

 

 

Step 1: Creating the HTML pages with Microsoft Frontpage

 

A Web site is made of a collection of files written in a language called HyperText Markup Language, or HTML for short. This language allows web developers to describe the data to be displayed in a browser along with formatting rules (color, font, etc.); links to other pages and positioning information. Files written in this language usually end with the “.html” extension.

 

 

Creating a Frontpage project: To get started in MS Frontpage, you need to create a project. TO do this – bring up MS Frontpage. From the File Menu Item, choose New and then the Web option. You will be presented with a number of different Icons. Each Icon represents a different web site style with a different set of HTML pages to start with. For this example, we chose Personal Web. There is a dialog box on the right that lists the default directory to create your web site in. Make sure this is correct. Choose OK when you are ready and Frontpage will create an initial set of HTML files for you in this directory. These include favorite.htm, index.htm, interest.htm, myfav3.htm and photo.htm. These should all be in a list going down the left hand side of your Frontpage window. Double clicking on any of these files will load them into the WYSIWYG (What You See is What You Get) editor in the center of Frontpage.

 

 

Setting up the First Page – index.html:  So lets start by building the first page visitors will see when they enter your site. The name of this file will always be called index.html

File Names: Note that Frontpage called this file index.htm instead of index.html. Some ISPs have may have a problem  with this. So, lets make our first task renaming this file.

The Title: We want to rename the title at the top of the web page. Right now it is called “Home Page”. We would prefer this to be “Rich On the Go”.   There are 2 places we need to change:

 

The Body: Now its time to enter some text into the center of the page. Remember, this is the first thing people will see when they first enter your site. What you enter here should  introduce visitors to your site as well as your interests and goals.

 

The Table of Contents: In the HTML world – each item in a Table of Contents is called a link. These links are highlighted in the browser and when clicked on, the browser will replace the current web page by the web page referenced in the link. Frontpage will create an initial Table of Contents on the left hand side of this page. Currently, it contains “Interests”, “Photo Album” and “Favorites”. We’re not going to change this now. Instead, lets take advantage of another feature of FrontPage  - the Preview tab. This is located on the bottom row of the screen. Selecting this, Frontpage will now act like a browser and will display the page as if you were viewing it from Netscape or Internet Explorer. The following will demonstrate this concept well:

  1. Select the Preview tab.

  2. Select the Photo Album link. A new page will now be displayed.

  3.  Now double click on Photo.htm in the Frontpage file list. See that these are the same as what was displayed when you clicked on the link?

 

Setting a Site Theme: Now is a good time to establish a theme for the entire web site. Sincethe ISP we have chosen supports Frontpage extensions, this is something we can take advantage of. A theme allows you to set a common page layout to all of the pages in your site. This includes existing ones as well as new ones (as you create them). Microsoft provides a number of default themes to choose from. Viewing these can be done from the Theme… menu item. This is under the Format menu item at the top of Frontpage.  Selecting this option, a new dialog will come up. In the dialog is a \list of available themes. You can scroll down the list and single click on the themes you are interested in. Frontpage will display an example of the theme next to it. For the web site discussed here, we’ve chosen In Motion.

 

Adding a new page with an HTML Table for your PRs: This is a good time to introduce two new concepts – how to add a new page to your site and how to take advantage of an HTML table. For this, we will add a page that will list your Personal Records at various distances. This is not something that really fits any of the example pages generated by Frontpage when you first created the site. It is also something that a table will represent very nicely. Since HTML does not allow you to position data and images very easily, HTML tables actually become a great tool to use and will be something that we will take advantage of in  several of the other pages we create here. In order to accomplish this, follow these steps:

1.     From the Frontpage File menu item, choose the New menu item followed by the Page… menu item.

2.      You will be presented with a Dialog box listing a number of different web page formats. Select the Normal Page icon. You can experiment with some of the other pages if you would like,  but for this page – a normal layout will work well.

3.      In order to set this pages title, we will now need to repeat a step from earlier. Right click anywhere in the page. You will be presented with a pull down menu. Choose the “Page Properties” option.  In the dialog that comes up, you will see a field for the title. Replace the value that is currently in this field with “Personal Records”.

4.      From the File menu item, chose the Save As.. option.

5.     To get the title displayed in the banner at the top of the page, you will need to temporarily switch to Navigation mode so that you can position this page as a child of your first page (index.html). To do this:

a.       Click on the Navigation icon in the left hand column of Frontpage. A tree of your web pages will be displayed.

b.      Using your mouse, drag the personal_records.htm file name from the list of files on the left and drop it under the Richonthego page.

 

 

6.      Click on the Page icon in the far left Views column to return to your Personal Records page.

7.      We now want to insert a table on this page. The table we will end up looking like:

Distance

Time

Pace Per Mile

Date

Note

1 Mile

 

 

 

 

5 K

 

 

 

 

5 Mile

 

 

 

 

10 K

 

 

 

 

15 K

 

 

 

 

˝ Marathon

 

 

 

 

Marathon

 

 

 

 

 

8.      To do this, from the top row of menu items, select Table->Insert->Table.

9.      A Dialog will pop up. Enter 5 for the number of columns and 8 for the number of rows.

10.  When the table is created, you can fill it in with the column headers, row headers and actual data simply by clicking on each cell and typing the text.

11.  To make the top row of column headers darker then the rest of the text, simply highlight the text and select the Bold icon at the top of

 

 

Adding pictures to your Photo Page: Once you have pictures scanned into your computer, including them in your site is easy. We will again make use of another HTML table to help organize the pictures. The table we will create will have a separate row for each picture. Each row will consist of 2 columns – one column with the picture, and the other column with some text describing the picture. Here are a few quick steps:

1.      Double click on the photo.htm page in the Frontpage Folder list column.

2.      Delete the text and pictures that Frontpage initially put on this page.

3.      From the top row of Frontpage’s menu items, select Table->Insert->Table.

4.      A Dialog will pop up. Enter 2 for the number of columns. The number of rows should correspond to the number of photos you have.

 

Adding your favorite links to your web site:  Frontpage will create for you a page called favorite.html. This is a good place to put links to all of your favorite web sites. This is also yet another good application of an HTML table. To set this up:

  1. Double click on favorite.htm in the Folder List.

  2.  Highlight and delete the default text that Frontpage initializes the page with.

  3. From the top row of Frontpage’s menu items, select Table->Insert->Table.

  4. A Dialog will pop up. Enter 3 for the number of columns. and 2 for the number of rows. You may need to play around with these numbers a bit, but this is a good start.

  5.  Now organize your links based on common categories. Example charities include:

  1.   Fill the columns with the links you are interested in.

  2. To illustrate a new feature with tables, we can hide the table borders by:

 

 

The final product: Now that you are familiar with how to use Frontpage and how to create HTML tables, the rest of this site becomes a simple exercise of repeating the same steps while filling in the content you are interested in. The final version of this web site can be viewed on http://www.geocities.com/richonthego. Another good site to look at is http://dougcross.tripod.com/. It has a fantastic example of how to use an HTML table to organize the information for a training log. It is detailed, well organized and easy to follow. Dougs race results section goes into a lot of detail on each of his races including his splits at every mile (I’m not sure which is more impressive – his times - around 5:15/mi - or the fact that he can remember every split for an entire marathon).

 

Step 2 Registering with an ISP

 

It doesn’t really make sense to worry about this step until you have some HTML pages to initialize the site with. This is especially true if you are paying for an ISP (since you would be paying for something with nothing to display).

 

We will be using Geocities.com for our ISP.  Signing up with them is easy. Simply follow these steps:

1.      goto www.geocities.com

2.      Select the “Sign up for a free web site” link.

3.      Select the “Sign up now” link.

4.      The web page that comes up is largely self-explanatory. The only thing to note is that whatever you enter in the Yahoo! ID: field will become added to geocities.com to become your web address (URL) in the form: http://www.geocities.com/<yahooid>  In our case, we choose richonthego. So, our web address becomes www.geocities.com/richonthego. We also get an e-mail address: richonthego@yahoo.com

5.      Fill in all the other fields and hit the “submit this form” button.

Step 3: Uploading the web pages

Geocities.com offers a number of  mechanisms to upload the html, gif and jpg files you’ve created in frontpage. This includes a File Manager and a Easy Upload utility, both accessible by logging into the geocities.com web site (using the login and password you just created). 

One difference between free ISPs (such as Geocities) and ones that provide space for a fee is support for Microsoft Frontpage extensions. One convenient feature of MS Frontpage is its easy upload mechanism. Simply pick the Publish option and it will automatically upload all HTML files that have changed.