Planetary Image Research Laboratory PIRL User Notes
Research Missions People Resources Software
Location | FTP | Connecting | User Room | User's Guide | Web Server
Printers | CD Recorder | Film Recorder | Jukebox | System Software | Web Pages

PIRL Webpage Style Guide

This webpage details the nitty-gritty details for writing webpages that fit within the established "style" of the PIRL webpages.


Which HTML?

The main PIRL pages are written to the HTML 3.2 Reference Specification as specified by the World Wide Web Consortium, we believe that this provides the most general "common denominator" version of HTML that the most browsers will be able to understand. As such, all pages which conform to the HTML 3.2 Reference Specification should begin with the following DOCTYPE statement:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">


HTML Style

All HTML tags should be written in lower case like <html>, not like <HTML>. All tag attributes should be enclosed in double quotes like <a href="http://pirlwww.lpl.arizona.edu">, not <a href=http://pirlwww.lpl.arizona.edu>. Additionally, be wary of using tags that are not in the HTML 3.2 Reference Specification.

When referring to locations within the PIRL web hierarchy, use relative links like <a href="/research">, not absolute links like <a href="http://pirlwww.lpl.arizona.edu/research">.

When referring to files within the PIRL web hierarchy, don't use the file extension. Write links like <a href="style"> not like <a href="style.html">. There is no penalty for doing this as we have our webserver configured to automatically expand the extension from the filename. The advantage is that maybe when I write the page it's called style.html, but if I later change it to style.shtml, style.cgi, or even expand it into a directory called style, I don't have to change my HTML, because the webserver automatically maps the name to the correct extension or directory. However, if you have both a style.html and a style.cgi then you will have to specify, otherwise it's ambiguous and the webserver will either complain, or guess incorrectly.


Headers, Navigation, & Footers

We use Server Side Includes to embellish the PIRL webpages with headers, navigation bars, and footers. This mechanism allows us to create uniform decoration and propagate changes instantaneously across our pages. In order to make our lives easier, we have created template files for the beginning (/www/pirl/begin.shtml) and ending (/www/pirl/end.shtml) of a PIRL page. These two files contain some relatively standard HTML header tags, as well as the appropriate virtual file includes for the banner, navigation bar, and footer files. In order for our webserver to correctly process those Server Side Includes you will have to give your file the extension .shtml. In order to see how we have written various .shtml files, you will have to cruise around the PIRL filesystem, because if you try and just view the source, our webserver has already done all of the including and you won't be able to see how we did it. For more information on Server Side Includes and how to use them, please see the Introduction to Server Side Includes at the Apache Web Server site.

These embellishment files are meant to be used on a page with a white background color. If you would like to create a page with a different background color, contact us, and we can talk about altering the few graphic elements required to make these embellishments fit any color.


Colors

In order to specify colors, there are sixteen colors that the HTML 3.2 Reference Specification allows you to refer to by name, and for readability we suggest that when using one of those sixteen colors, refer to them by name (like bgcolor="yellow") instead of by hexadecimal number (like bgcolor="#ffff00").

The PIRL color scheme is very simple. The content pages should specify a white background color and a black text color. The default link colors should not be specified. The the colors that we are using are as follows, listed by their hexadecimal number:
     #87cefa
     #4e71ac
     #330066


Fonts

We will not specify fonts to be used on our pages, let the user decide. To highlight text use the various header tags <h1>, <h2>, etc., as well as <em>, <strong>, and <code>. Avoid using <i> and <b>. If you need to alter font sizes within your text, use <big> or <small>. If you must use the <font> tag, use relative font size tags like <font size="+1">, not absolute font size tags like <font size="6">.


Icons

The Apache webserver comes with a great set of standard icons, available at /icons/ which you can use.


Banners

There is a lot of whitespace up there in the top right corner of the PIRL pages that could be used for banner ads relevant to PIRL, things like image releases, meeting deadlines, whatever. If you have something that you'd like put up there, ask us first. If we think it's a good idea, then you can go ahead and make an image (with a maximum of 80 pixels tall and 400 pixels wide) or just a sentence or two, and a URL that the "ad" can link to and we'll put it up.


Last Modification

If you are using the standard PIRL footer (see Headers, Navigation, & Footers above), then the Server Side Include code in the PIRL footer will take care of looking at the last modified time of your file and display it in the PIRL footer box. If you are not using the standard PIRL footer for some reason, then you should make sure that you place some kind of "last modified" statement somewhere on your page. We suggest using the Server Side Include mechanism that the standard PIRL footer uses, because then you don't have to worry about it, the Server Side Include mechanism takes care of looking at the file's last modified time and displaying it.

The University of Arizona Lunar & Planetary Lab
PIRL Webmaster
  04 Feb 2002