GEG Website

GUIDELINES FOR WRITING WEB PAGES

David J. Hark's copy

26  November 2005

File Uploads

Files can be uploaded to the GEG web site via the CGI script upload.cgi. The easiest way to goto this page is from any of the pages under the Membership List section where a button (Upload A File) can be found on every page.

Note that a when a file is uploaded to the web site, it overwrites the file of the same name. If that's not what you want, rename the file before uploading it.

A file can be deleted by pressing the Delete File button next to the filename; a dialog will ask you to confirm your action.

A file can be downloaded by pressing the Download File button next to the filename.  The selected file will be displayed at the bottom of the page (scroll down to see it):

Directory Structure

So you can test your HTML pages on your local system and then upload them to the web site with minimal changes, you should use a directory structure which mimics the one on the web site. This is very important. Without the same directory structure on the local and remote sites, you will run into cases where your page looks correct and links to other pages on your local system, but doesn't work correctly when you upload it to the website.

For example, say you are responsible for two directories on the website /private/exchange/ and /about/. Create those directories at the same level (perhaps under a main directory called GEG). Furthermore, if you save public images on your local system, also create a directory /art/ at the same level as the other two directories. Then when you reference an image in /art/, the same reference will work when you upload your HTML pages (and images) to the web site. When inserting an image into your HTML page via Netscape Composer, be sure to check the box Leave image at the original location. Note that Netscape Composer might reference the image as ../art/image.gif; that's correct, so be sure to leave in the leading ../.

To summarize, you should have a main directory which contains all of your GEG website files (say, GEG). Then you should have a complete copy of each directory under GEG for which you are responsible as well as an /art/ directory.

In the /private/exchange/ and /about/ directories, you should put the corresponding index.htm files which contain the web page for those topics along with any supporting files and/or private images. In the /art/ directory, you should put any public images (e.g., the GEG logo GEGweb2.gif). Don't save public images in your private directory; always reference them from the /art/ directory.

The full directory structure is

/GEG/about/
/GEG/art/
/GEG/deer/
/GEG/gardentips/
/GEG/local/
/GEG/pests/
/GEG/plants/
/GEG/privacy/
/GEG/private/
/GEG/private/exchange/
/GEG/private/FAQ/
/GEG/private/maps/
/GEG/private/newsletters/
/GEG/private/newsletters/photos/
/GEG/private/website/
/GEG/recipes/
/GEG/resources/
/GEG/schedule/
/GEG/seasonal/
/GEG/wildflowers/

Of course, the PC world uses the backslash as a path separator and the Mac and Unix worlds use a forward slash; adjust accordingly.; Other than with the /GEG/ part, you must use the exact same name (case sensitive, too) for your directory names as is defined in the above list.

File Names

By convention, the file name for the main web page within any directory is called index.htm, or if that file isn't present, index.html.

When uploading files from your local system to the server, the exact same name and extension of the local file is used on the server. This means that while file names and extensions on your local system might be case insensitive, file names and extensions on the server are case sensitive.

Use the normal ASCII characters in file names (a-z, A-Z, 0-9, _, and -), and only these characters.  Even if your local file system supports them, do not use spaces in a filename.

Also, be careful how you reference file names and extensions on the server in your web pages.  Feel free to use any case names you like (except for index.htm which must be all lowercase), just be sure to use the same case when referencing them.

Page References

Normally, when linking to another web page, you would produce a piece of HTML code (either directly by typing it in, or indirectly via a WYSIWYG editor such as Netscape Composer) which looks like <a href="otherpage.htm ">...</a> (the a stands for Anchor which is the old term for a Hyperlink).

When composing a page for the private section, continue to use the same form, but be sure to use the full directory path starting with /private/. Because private pages are processed by the members.cgi script, there is code which recognizes the /private/ prefix and converts it into a form which enforces the privacy restrictions of the site.

When linking to a private page from a public page, a different mechanism is needed to enforce the privacy restrictions. In particular, instead of using a straight <a href="privatepage.htm ">...</a> to link to another (private) page, you must use the following code:

<a href="javascript:link('privatepage.htm')">visible text</a>

Note that this chicanery isn't needed when referencing a public page. Continue to use the normal page reference method.

If you need to jump to another script (say, upload.cgi), use this:

<a href="javascript:jump('upload.cgi')">visible text</a>

Note that in both cases you must use the exact syntax and punctuation as shown in these examples. Don't forget the colon after "javascript" and be sure to use single (not double) quotes around the file name.

Use the existing pages as references in case you have any questions. That is, look at the HTML source code of these pages to see what works.

As always, after you have uploaded your page to the site, check all links to be sure they go where you expect and that they display correctly.

Search Functions

There is a general search function for the website accessed from a button on both the Main and Members Only pages. If you want a search capability limited to just your directory (e.g., recipes), read on.

Image References

If you reference a graphic image in your web page, handle it differently depending upon whether or not the image is meant to be public or private.

Public images referenced from a public page can be stored in the same directory as the web page and are referenced normally (e.g., <IMG src="image.gif ">).

Public images referenced from a private page must be stored in a public directory (/art/ will do) and can be referenced as in <IMG src="/art/image.gif">. For example, to get the GEG logo to appear on your page, insert the image whose location is /art/GEGweb2.gif. In Netscape Composer, be sure to check the box labeled "Leave image at the original location". If you don't, Composer will copy the image to the directory with your HTML source and reference it there on your web page; however, that's not where the image is on the website. Thus, it'll look like things are working correctly on your local machine, but when you try the same pages on the website, it won't work. Also, note that Composer might prepend one or more of ../ to the image location. You can safely ignore this.

Private images referenced from a private page can be stored in the same directory as the web page, and can be referenced as in <IMG src="image.gif">.

Private images in another directory referenced from a private page can be referenced as in <IMG src="/maps/image.gif">.

Private images cannot be referenced from a public page.

Note that this mechanism handles files with extensions .gif, .jpg, .jpeg, and .png only. If you have other graphic file types to load as an image, just so they can be added to the list of known filetypes.

Images can be resized by the browser by specifying different width= and height= parameters to the <IMG> tag. To do this with Netscape Composer, bring up the Image Properties dialog for the image (typically by double-clicking on the image), and changing the Height and/or Width values. If you the check the Constrain box, a change to one value (say the Height) changes the other dimension value to scale.

E-mail References

You are strongly encouraged to place an e-mail address on your page to which readers can send comments about your work as well as suggestions on what else they would like to see. So we can keep the web site generic and allow for smooth transitions when people move on to other areas, please don't use your private e-mail address for this purpose. Instead, use a virtual e-mail address which reflects the topic you are working on (exchange, seasonal, membership, etc.) @g-e-g.org. The format in which this email address is written depends upon whether it is on a private or public page.

For private pages only, simply enclose the e-mail address in braces. For example, if your private page contains the text {webmaster@g-e-g.org}, it will be displayed to the user as the link . Be sure not to include any spaces or extraneous characters between the braces — just the email address.

Because the email addresses on public pages are exposed to the world (and there are some unpleasant people out there), a more complicated form is needed in order to avoid exposing our email addresses to programs run by those who sell lists of email addresses to spammers.

To avoid exposing an email address on public pages, instead of entering it using the normal hypertext linked form of

<a href="mailto:yourtopic@domain">yourtopic@domain</a>

enter it using the following HTML code:

<script type="text/javascript" src="/email.cgi?n=yourtopic&amp;d=domain"></script>

where yourtopic is replaced by the email address name (the part to the left of the at-sign), and domain is replaced by the email address domain (the part to the right of the at-sign). For example, for the email address guidelines@g-e-g.org, use

<script type="text/javascript" src="/email.cgi?n=guidelines&amp;d=g-e-g.org"></script>

If (as in the above example), the email address is @g-e-g.org, the domain part can be omitted, e.g.

<script type="text/javascript" src="/email.cgi?n=guidelines"></script>.

Note that the user sees exactly the same clickable email address link as before; the spammer sees no email address at all.

While you might not be receiving spam at any of the @g-e-g.org addresses as yet, I strongly recommend that you adopt this guideline immediately to reduce the chance it'll happen in the future. Don't wait until you start receiving spam to put this guideline into effect.

Again, for e-mail links on private pages, use the shortcut {yourtopic@domain}. For public pages, use the <script ...></script> method.

To validate your code, view your page with a browser and move the mouse to the e-mail reference link. The browser should display the text mailto:yourtopic@g-e-g.org (and only this text) in its status line at the bottom of the window.

After you decide what e-mail address you would like to use (i.e., what replaces yourtopic), send the virtual e-mail address to and the Webmaster will enter it into the Virtual Mapping file. For each virtual e-mail address, be sure to include the corresponding private e-mail address to which mail sent to the virtual e-mail address should be forwarded. That way, you get the mail about yourtopic, and when the coordinator for yourtopic changes, we simply change one file. Also, if multiple people are managing yourtopic, just say so as it's easy to enter several private e-mail addresses each of which receives e-mail for yourtopic.

Page Properties

Using Netscape Composer, if you create a new page, the page's properties are taken from the settings specified in Edit | Preferences | Composer. In particular, that's where you can specify yourself as the page's author.

If you edit an existing page, the page's properties are already specified by the original author. To change those settings, open the page in Netscape Composer, and choose the menu item Format | Page Colors and Properties. In the General tab, you can specify yourself as the new author as well as change the page's title, description, and keywords.

In either case, use the following as suggestions for those properties. The properties for this page are as follows:

Replace the text in italics with something appropriate to yourself and your topic. Feel free to add to this list. Note that all of this text is read by the Search function, so put keywords here which might not appear in the page text, but which might be used by someone searching for your page.

Footer

In order to produce consistent pages as well as implement some of the page linking and loading for private pages, a special piece of HTML code is needed which invokes a Server Side Include.  This means that the last element in every one of your web pages must be

<!--#include virtual="/footer.htm" -->

Note the exact syntax, case, and spacing of this text is important. Please don't type it in directly; instead, copy and paste it into your document exactly as written. In Netscape Composer, this is accomplished by placing the text cursor at the end of your web page and clicking on Insert and HTML Tag..., then paste in the above text.

Changing An Existing Page

When changing an existing page, please follow these guidelines:

Page Source Ending

Looking at the page source for your page, it should always end with

  1. The last text and/or image you see on the page above the footer
  2. <!--#include virtual="/footer.htm" -->
  3. </body></html>

There should be no additional HTML code between 1 and 2, or between 2 and 3; if there is, delete it.

Testing Links For Private Pages

The necessity of using Javascript code to transfer control from one private page to another is counterintuituve, so it's easy to forget that you must use it. One way to test that your private page follows that rule is to tell the website not to save your password on your local computer, then load your page and follow all of the links from you page to other pages. If this succeeds without you having to login each time (other than the first time you load your page), then you have properly place all of your links to other private pages inside javascript:link('...').

To tell the website not to save your password on your local computer, go to the member database, and uncheck the box next to "Remember me?", and then click on the "Change Password and/or Flags" button. After this, you should need to login only once each time you first visit the Members Only area. If you have to login again during the same session (and you have visited private pages only), then there's a broken link. If you find such a problem, please tell the contact point for that page.

FAQ

1. Why does my page display with two footers?

The footer is a common file which is expanded by the web server from a short reference to a file to the contents of the file. If you view the Page Source as displayed by your browser, it will show the expanded text. If you use this source as the basis for your page and then insert the #include for the footer, you will see two footers. To see just one footer, delete all of the expanded text and use just the #include form to reference the footer. To delete the expanded text using Netscape Composer, delete everything that looks like it belongs in the footer leaving only a small marker which contains the #include reference. That is, when editing your page in Netscape Composer, you should not see the horizontal rule, the links to other pages, the line of flowers, etc.

 

David J. Hark's copy

26  November 2005

 


GEG Home Page
© 2000-2005, Gardeners' Exchange Group
P.O. Box 3415
Shepherdstown, WV 25443-3415
Comments or suggestions? Send them to
Please review our Privacy Policy.
You are visitor number 
134
 to this page
since 6 April 2001.