Creating your WWW home page

You've seen all the exciting things on The Web, and you'd like to be part of it. Well, you can be! As a member of the Princeton University community, you can make your own documents available on the Princeton University World Wide Web server. You can tell about yourself, your interests, or your favorite WWW sites.

On July 10-11, 1995, the Information Access Group/CIT held workshops for departmental administrators and on January 22-23, 1996, for faculty. If you missed the workshops, you can still learn what was covered by looking at the WWW Workshop presentations for departments and WWW Workshop presentations for faculty.

[Go to Top]

Basic information

What kinds of information should I include?

Academic departments and programs can gather information such as faculty, staff, and student listings, course offerings, seminar schedules, and faculty research. A departmental home page template is a good starting point. Administrative departments can present their schedules, brochures, and other pertinent information.

Student organizations can inform others about their meeting schedules, activities, members, and newsletters. Student organizations should contact Rick Curtis, Dean of Student Life (rcurtis@princeton.edu), to establish a general Unix account for their organization's home page.

The instructions below are for creating a home page on CIT-supported Unix computers which store files on diskfarm, such as phoenix, flagstaff, and tuscon. They also cover home pages stored on campus Novell servers such as Arachne and Ariel.

When creating your WWW documents, please adhere to the Guidelines for use of campus and network computing resources.

[Go to Top]

Creating your home page

To create your home page,

  1. Write a document called index.html in the HTML formatting language. (Note that on a Novell server, the home page name is index.htm.)
  2. Write additional documents. They should also have the extension .html if stored on a Unix account or .htm if stored on a Novell server. For example, a document about organizations might be org.html (or org.htm).
(If you leave out step 1, when your home page is viewed on The Web, a list of your files will be shown instead of your HTML documents.)

[Go to Top]

Making your home page public

You can create your HTML documents on your microcomputer. Use a browser, such as Netscape, to review the documents. For example, under Netscape's File menu, use the Open File option to display an HTML file residing on your PC or Macintosh.

Once you are ready to let others view your documents, you need to move them to a place where Princeton's WWW server can access them, either a public Unix computer or a campus Novell server. If you are storing your files on a public Unix computer, first set up your Unix account and set permissions for your files and directories so that others can view them. If you are a member of the faculty or staff, and have a Novell account, you can instead store your files in your Novell directory.

If you have called your home page index.html on Unix or index.htm on Novell, then the URL of your home page is 

http://www.princeton.edu/~userid/
on Unix or 
http://webware.princeton.edu/name/
on Novell, where userid is your Unix account and name is the name associated with the pubhtm subdirectory on your Novell account.

[Go to Top]

Write or convert your documents to HTML

The index.html file and additional documents are text files which include HTML tags (HyperText Markup Language). HTML tags provide hypertext links to other documents, images, and files, as well as structure (headings and lists) and formatting such as italic and bold fonts. Consult HTML Overview for a good overview of HTML issues and a quick reference to become familiar with HTML syntax, or find more detailed coverage on writing documents using HTML. HTML Tutorial is also a good place to begin. See the Yale C/AIM WWW Style Manual for advice on home page design.

To check the correctness of your HTML syntax, use the Weblint program. Just access this site and type the URL for your document in the form. You will be provided with a report warning you about any missing or incorrect tags. Similarly, you can check the spelling in your HTML documents using The WebSter's Dictionary.

You can write your HTML documents on any computer. You can also convert documents from word-processing packages such as MS Word or WordPerfect to HTML. Choose one of these sections for details on using software on a Unix account, a Macintosh, or a PC (Intel-based computer).

[Go to Top]

Registering your home page

Once you are ready to make your home page public, the final step is to register your home page. This will make it part of the Princeton University Campus Directory. If your home page is from a University department, or if you have collected and/or organized information on a special topic, please send e-mail to www@princeton.edu so that we can include your home page under Academic departments and programs, University Administration, or another appropriate page.

[Go to Top]

Be warned!

By creating a publicly-available home page, you make it possible for the whole world to look at your documents. You are also making public your USERID, so that it is easier for anyone to find out your e-mail address. Documents in your public_html directory can be hidden if you do not make links to them in either your index.html or other documents in this directory. If you do not link the documents, only those who know such documents exist and know their filenames can see them.

To insure that documents in your home directory are not readable, even if links exist, you can change the permissions on the documents so that they are readable only by you the owner. The safest approach to hiding documents is, of course, to put them in some other directory which cannot be seen by others. It is not possible, however, to keep your USERID private.

[Go to Top]

More Advanced Information

Using fill-out forms in an HTML document

The FORM tag in HTML gives you the ability to include fill-out forms within your documents. See the Mosaic Forms document for information on how to use forms in your HTML documents.

A program to gather the submitted information and do something with it must reside on the WWW server. Since most home page owners do not run their own servers, we have created a program, which resides on Princeton's WWW server, to be used by Princeton home page developers. The program, called mailform, collects information from the fill-out form and mails it to an e-mail account specified by the home page owner.

View an example of an HTML file which uses mailform. Save the HTML source by choosing Save As from the File menu. Use the Source option and modify the saved file for your own needs.

Programs mailform and testform

Before you use mailform, you can test your form submission with the program testform. Setting a form's action to URL 

http://www.princeton.edu/cgi-bin/Princeton/testform
will display form values on your screen once the text is submitted through the form. Once you are happy with these results, set the form's action to 
http://www.princeton.edu/cgi-bin/Princeton/mailform?address_list
This will mail the data submitted through the form to addresss_list, which can be one or more e-mail addresses such as 
michelxz@princeton
To have the form data sent to more than one address, join the addresses by the plus sign (addr1+addr2+addr3)--no spaces are allowed. For example, 
michelxz@princeton+gladysxz@princeton

Once the data are received as e-mail from the form, you can then process them in any way you wish.

[Go to Top]

Including imagemaps in an HTML document

Imagemaps are pictures within HTML documents which include hot spots. When a hot spot (region) is clicked, a process such as the display of an HTML document or of another image is initiated. For more information about the process, see the instructions from NCSA (note that you do not have to compile the imagemap script - that is already done on Princeton's server). For a simple example, check out Oval with Points.

In order to include an imagemap in your HTML document, you need to do three things:

  1. Create or find an image file in GIF format.

  2. Identify the hot spots on the image and create a map file with the region coordinates and associated URLs for action. Try to keep the individual regions in the map discreet so that users will clearly know what to click.

    There are several programs to help you to create the map file. On Unix, you can use xv to identify the coordinates. On a Mac, use WebMap. On a PC, use mapedit. For each region, the map file includes a line with the method (default, circle, point, poly, rect), action URL, and region coordinates. Put the map and image file in the same directory as the HTML document which uses them. The map file for Oval with Points was created with WebMap and is shown below: 

    default http://www.princeton.edu/~prismtst/ovaldef.html
rect http://www.princeton.edu/~prismtst/ovaltop.html 38,80 279,184
rect http://www.princeton.edu/~prismtst/ovalmid.html 22,186 286,282
rect http://www.princeton.edu/~prismtst/ovalbot.html 19,283 285,415
    At Princeton, use the NCSA format, not CERN. If the region of the image in which the user clicks does not correspond to anything then the default action is invoked. If the clicked region is within the coordinates for a rectangle, circle, polygon, or point, then that action is invoked.

  3. Write an HTML document which names the map file and specifies the location of the image map program. For example, to use a map file oval.map and an image oval.gif, on account prismtst, use the following specification: 
     <a href="http://web.archive.org/web/199603/http://www.princeton.edu/cgi-bin/imagemap/~prismtst/oval.map">
 <img src="/view-pcpress_n/http://www.princeton.edu/~prismtst/oval.gif" ISMAP>
 </a>
    Note that if you have created your gif file on a Macintosh and want to transfer it to your Unix account with the fetch program, transfer the file as raw data.

    If the map file resides on a Novell account rather than a Unix account, substitute "webware" for "www" in the above specification.

[Go to Top]

Restricting access to Princeton

All of your documents will be accessible from all WWW sites unless you restrict access. To allow access to one or more documents from Princeton only, do the following: If your files are stored on a Novell account, see Restricting access to Princeton on Novell. If your files are stored on a Unix account:

  1. Create a subdirectory under the public_html directory for the documents to be restricted. For example, to restrict class notes to access at Princeton only, create a subdirectory classnotes. 
    cd public_html
mkdir classnotes
chmod 755 classnotes
cd classnotes
  2. Besides the restricted access html documents, include a file called .htaccess with the following contents. (Note: This writeup assumes you are storing your files on a Unix computer (such as phoenix) running an httpd server. If you are using a different server, consult the documentation for how to restrict access.) 
    <Limit GET>
order deny,allow  
deny from all
allow from princeton.edu
</Limit>
    There must be no blank space after the comma.

  3. Change permissions with 
    chmod 644 .htaccess
  4. All files must include the new subdirectory in the path name. For example, if you have created an html document called notesdec.html in the classnotes subdirectory, and your userid is abxyz, the URL is 
    http://www.princeton.edu/~abxyz/classnotes/notesdec.html
    All html documents stored in the classnotes subdirectory will have the same restricted access. If you want your entire home page restricted, then include the .htaccess file in your public_html directory. For more information about restricting access, read more about the Limit directive.

[Go to Top]

Server-side includes

Server-side includes are enabled on the www.princeton.edu server. However, the EXEC command is disabled, restricting use of includes to several preset commands. For included commands to be parsed, files must have a file suffix of *.shtml. For more information and instructions on employing server-side includes, please see the NCSA httpd server side includes tutorial.

[Go to Top]

Usage statistics

You can find out how often your Web pages are accessed using Princeton's Web page statistical reports.

[Go to Top]

Further Reading

Once you have the mastered the skills to create a home page, you can explore additional tools to enhance your pages. We have collected a list of resources to help you find what you need.

Last updated March 7, 1996

Contact www@princeton.edu with any questions or suggestions you may have.