Woods Hole Oceanographic Institution
Web-page Developer's Guide
Table of Contents
Using This Guide
This guide attempts to support developers of new Web pages on the Woods
Hole Oceanographic Institution's Web site (www.whoi.edu). The guide
is not intended to be a tutorial, nor is it a comprehensive reference work.
It presumes you know the basics of Web-page construction and HyperText
Mark-up Language (HTML), the coding ("tagging") system that controls the
structure and presentation of information on the Web. (If you are not familiar
with those processes, you will want to pursue the resources provided in
the next section.) This guide's
goals are:
-
to get WHOI information providers started in Web publishing
-
to identify sources of help for Web publishing
-
to suggest elements that contribute to cohesive sets of WHOI Web pages
-
to aid the overall development of WHOI's Web resource collection
Learning HTML and Web-page Construction
Many self-help resources are published in print and on line to get information
providers started with Web publishing. The following on-line resources
may help beginner and experienced Web-page developers.
At WHOI:
At Other Web Sites:
Another good way to learn about Web publishing is to browse existing Web
pages. When you find a page you admire, choose your Web browser's option
to view the source code. For example, with the Macintosh version of Netscape
Navigator, open the "View" menu and choose "Document Source"; the program
will download to your own Macintosh a copy of the text document - complete
with HTML tags - that generated the Web page you were browsing. Similarly,
with the PC version of Netscape Navigator, open the "File" menu
and choose "Save As" to download a copy to your own PC.
Getting Help at WHOI
Formal sources of help for Web publishing at WHOI include:
Informal sources of help can often be found in your own department. Many
of your peers and colleagues at WHOI have ventured into Web publishing
and can offer tips for approaching this work. Most WHOI Web-page developers
have included their "signatures" or contact information somewhere on their
pages.
Planning Your Web Pages
Before you put even one HTML tag on your page, think ahead about:
-
what message you're trying to deliver
-
who your intended audience is (scientists or colleagues, funding agencies,
administrators, WHOI staff, trustees, teachers, students, and others)
-
who your real audience likely will be (all of the above - remember that
the first "W" in "WWW" stands for the WORLD)
-
how extensive or complex the scope and nature of your content is
-
how you might organize your page(s) to best deliver that content
-
what combination of content, functionality, and pizzazz you need, want,
and can incorporate into your page(s)
-
how - and how often - you will maintain your page(s)
Remember that all audiences expect accuracy, veracity, and up-to-date content
for Web pages. Plan to create pages that you can maintain easily. Start
with a simple structure and layout and apply it consistently. Build in
new features or improve aesthetics as your Web skills increase and as time
allows.
Remember also that the Web allows and encourages changes to be made
quickly and easily. You can build your page(s) over time and present your
information incrementally. Don't overwhelm yourself - or hold yourself
back - by planning a large, extensive set of pages and waiting to make
them public until you have them completely and finally finished. Web pages
are never "finished"! Some portions of your planned work may lend themselves
to Web publication earlier than other portions; go ahead and make them
available, adding the other portions later.
Building Your Web Pages
If you are new to Web publishing, you may want to start with one of the
templates created for new WHOI Web-page developers. Three types are available:
a science department template,
an administrative department template,
and a professional (individual page)
template. If you wish, you may use these as a quick start to your Web
publishing. Follow these steps:
-
If you are using Netscape Navigator on a Macintosh computer, open
the template, go to the "View" menu, and choose "Page Source." A copy of
the HTML source for the document will open, which you can drag-copy and
paste into a new text document on your own Macintosh.
-
If you are using Netscape Navigator on a PC-compatible computer,
open the "File" menu and choose "Save As" to save a copy of the source
file on your PC. The file-name extension will automatically be changed
from .html to .htm.
-
Edit the copy; change the text and leave the HTML tags in place, if appropriate.
NOTE: At this point, you are working with a copy on your local
computer only. You are not editing or changing anything on line on the
Web - yet - so don't worry about making mistakes.
-
Preview your new page locally with a Web browser on your own computer (for
example, with Netscape Navigator, choose "Open Page in Navigator"
from the "File" menu).
-
Make any necessary corrections, and re-save your file as a text file. Double-check
your changes by viewing the file again, as described in Step #2.
-
Contact the Webmaster (e-mail webmaster@whoi.edu,
or phone 289-2357) to learn how to load your page and link it to the WHOI
Web server for public access or, if you prefer, for access restricted to
those on WHOInet.
Including Common Elements in Your Web Pages
Whether you are a new or an experienced Web-page developer, consistent
use of graphical elements, language associated with links, and some standard
text elements can help present WHOI's collection in a cohesive way. These
tips may help as you develop your pages:
-
Make your <TITLE> </TITLE> tag work for you! The information you
enter between these tags (which are always placed between the <HEAD>
</HEAD> tags) helps search engines find your pages. The text in the
<TITLE> tag also becomes the name of the "Bookmark" one makes to your
page. Choose brief, clear language in the <TITLE> tag that everyone
visiting your site would understand; minimize your use of abbreviations
and acronyms.
-
Use the words Woods Hole Oceanographic Institution (WHOI) somewhere
in your page.
-
Provide at least one link back to the WHOI Home Page (http://www.whoi.edu/)
from your page. The link may be simply included as part of the above reference,
or you may place it at the bottom of the page, with the explicit words
"Return to WHOI Home Page." Many WHOI pages use this button as well:
Its source is http://www.whoi.edu/icons/RETURN.gif.
-
Include the WHOI logo somewhere in your page. This version represents
the colors well, uses minimal on-screen "real estate," and loads fairly
quickly:
Its source is http://www.whoi.edu/icons/whoi-logo-small.gif.
NOTE: If you intend to offer access to your page(s)
through your own or your department's Web server rather than through WHOI's
main server (www.whoi.edu), you will want to store a copy of commonly used
images (such as the WHOI logo) locally on your own server and then refer
to that source, rather than referring to the image source on WHOI's main
server.
-
White or light-colored solid backgrounds generally allow graphics
to look their best and provide better legibility for text that overprints
on the background. "Busy" backgrounds can drastically interfere with readability.
This set of tags defining the body of your HTML file will produce a white
background, as you see on this page:
<BODY BGCOLOR="#ffffff"> your content here </BODY>
-
Horizontal rules (lines) help organize the content of your page.
The <HR> tag produces simple rules:
Many WHOI Web pages use a graphics (.gif) file that presents a blue-gradient
line to delineate major sections:
Its source is http://www.whoi.edu/icons/blue-line.gif.
-
Include contact information for your audience to turn for help or
to provide feedback. At WHOI, the information provider or page developer
is responsible and accountable for the data presented. Generally, contact
information is provided at the bottom of Web pages; it is often included
in the <ADDRESS> </ADDRESS> tags. Alternatively, an e-mail
address may be sufficient. If you include one, use the MAILTO:
protocol but also include the text of the e-mail address; for example:
<ADDRESS>Contact the WHOI Information Office by sending e-mail
to <A HREF="MAILTO:information@whoi.edu">information@whoi.edu</A>.</ADDRESS>
which translates to:
Contact the WHOI Information Office by sending e-mail to information@whoi.edu.
If your material is dated, include the date of last activity somewhere
on the page. Use this or similar language:
Last updated 19 February 1998
and remember to keep the content up to date!
Include copyright notices where appropriate. Current copyright law
automatically protects intellectual works - original creations in all media,
including the Web. You gain increased protection and compliance, however,
by including explicit copyright notices on your Web pages. A minimal notice
reads:
Copyright © Woods Hole Oceanographic Institution
The text of WHOI's full copyright statement is available at http://www.whoi.edu/copyright-whoi.html.
Likewise, you must assume that all other work you find on the
Web is copyrighted as well. Seek and obtain permission before you copy
and use text, images, and artwork from someone else's Web page in your
own page(s).
Keeping Your Audience in Mind
As you build your Web page(s), consider these additional points, which
can help your audience use and navigate through your information:
-
If the presentation of your contents requires more than one or two 13-inch
screenfuls (that is, it requires extensive scrolling to navigate through
it), consider breaking it up into a set of pages. The base page serves
as an index to, or jumping-off point for, linked pages representing subsets
of the original content.
If you prefer to present only one page, at least include - as
this document does - a quick way for your audience to jump from the top
of the document to the various subsection starting-points within the document.
Include links internal to the base page. For example, these tags:
<A HREF="index.html#keeping">Keeping Your Audience in Mind</A>
and
<A NAME="keeping">Keeping Your Audience in Mind</A>
enable a link between the table of contents at the top of this
page and the beginning of the subsection you are reading now.
-
Remember that your audience can arrive at your page through many means.
Don't assume that they all will come through the "front door," or will
navigate through your pages in the sequence that you want them to! Each
page you create should be able to stand on its own to some degree; a page
should not be entirely dependent on another to provide context. Using the
common elements described in the previous section of this guide will subtly
help your audience know where they are (at WHOI's Web site, at least!)
at all times.
-
Remember also that many in your audience will choose to print your Web
page, especially if it's a long document or is filled with complex
data. As a courtesy, put the URL (Uniform Resource Locator) - the Web page
address - in plain text at the bottom of your page. When the page
is printed, the URL will appear with the page contents and will serve as
a reminder of the source of the printed document.
-
Use simple, small artwork, graphics, and photographic images to
allow faster loading and presentation. If you wish to present a large or
complex image, consider putting a small version (a "thumbnail" view) of
it on your page and making that thumbnail a link to the full-size view.
-
Once you've created your Web page(s), go back regularly and check links,
review text and graphics, and keep the content current. Your audience
will want to return again and again if they see that your pages evolve
and the content stays fresh.
Last updated 24 March 1998.
Send comments about this guide to webmaster@whoi.edu
or information@whoi.edu.
Copyright © Woods Hole Oceanographic Institution.
Return to WHOI Home Page