Graduate Student Projects: Web Page Authoring For Your Final Project

 

(PROCEED WITH CAUTION; THIS SECTION UNDER DEVELOPMENT; 4/1/99)

 

Introduction: Each of you are now working on your final project. As you know, these projects are to be presented both in poster format and as a web page. This document is intended to provide you with the basics of web page authoring. There are a number of good web page authoring tools available. Feel free to use whatever you are comfortable with, but I will assume that each of you will use MS Word for creating your web pages. I have created three files that can serve as templates to get you started. These three files are currently available for download from z:\dwallin\envr442\web (see me if you have difficulty locating these files). The files are:

index.html
542_project_index.html
542_proj_abstract.html

I would suggest that you download these files now and place them in a dedicated subdirectory on your zip disk or on your own subdirectory on the z:\ drive. Name this subdirectory "html." Ultimately, you will move all of the files you create for your project onto your titan account. All these files must be placed in a subdirectory on your titan account that is named "html." For now, you can develop your web pages by working from your zip drive or z:\ drive.

Your Home Page: The gateway into your project, and any other web pages you may choose to develop, will be your own personal web page. This will be your Home Page. Your home page must be named index.html! All web pages are written using a special computer language called "Hypertext Mark-up Language (html). Back in the olden days (last year) you actually had to know a bit about the arcane details of this language if you wanted to write this stuff. I'm not sure if this is a good thing or a bad thing, but you don't really need to know this stuff anymore if you just want to create a few fairly simple pages. You can create your web page using MS Word without knowing anything at all about html.

To begin creating your own web page, start MS Word and use File-Open to take a look at the index.html file I have given you. With the file open, you can begin to edit this just as you would any other Word document. Edit your name, address, email, etc.. When you have time, you can come back into this file and add some text describing your background and add or delete some of the categories I have included.

Creating a Hot Link: You already know about the use of links to move from one web page to another. You will notice that I have already included a few links in your index.html file. I have one that will return you to the Huxley Home Page and the WWU Home page. I also have one that will take you to the "table of contents" for your 542 project. If you move the cursor to this link (don't click either of the mouse buttons yet!) you will see that the cursor transforms into a sort of cartoon of a pointing hand. Above this, a box appears that tells you the file name that this link points to. You should see something like z:\html\542_project_index.html. The beginning of this file name may be different depending on where you are working but the "542_project_index.html" part should be there. This is the name of the html file that will contain the "front page" for your project. If you click on this link now (with the left mouse button), MS Word will open the 542_project_index.html file for you.

OK, now go back to your index.html file and let's create a link to a file that will contain your resume. You should already be thinking that this is going to be a cool way to impress potential employers when you start applying for jobs. Move the cursor to the beginning of the ruler line above the word "Projects". Now push and hold the left mouse button and move this down to the end of the word "Projects." Let go of the button and go up to the top and push the copy button. Now click once at the end of the line that says "sea kayaking." Then hit return, then hit the paste button. You should have just duplicated the ruler line and the word "Project." Now delete the first occurrence of the word "Project" but don't delete this line. Your cursor should be at the beginning of this now empty line. Push the right mouse button. On the menu that pops up, go to Hyperlink. In the next window that pops up, go to the box for "link to file or URL." In this box, enter the name of the file that will contain your resume; something like "resume.html" might be a good choice. Click on OK. You will now see that the filename you just entered appears as a link in your index.html file. You might want to edit this so move your cursor over this link and push the right mouse button. On the menu that pops up, go to "Update Field." You can now edit the label for this link; something like "Click here for a copy of my Resume" or perhaps simply "Resume." If you decide you want to edit the address of the file that a link points to, you simply move the cursor over this link again and push the right mouse button and go to Hyperlink-Edit Hyperlink. You now know how to create a hot link in a web page. You will now need to create a new html file called "resume.html." To do this, you can go to File-New and instead of selecting "General-Blank document," click on the tab for Web Pages and select Blank Web Page. If you already have a resume, you can simply copy-paste it into this file and then save it to resume.html. You will probably need to spend some time fiddling with formatting.

Project Index Page: Open the Project Index page and edit it as needed. You will note that I have already set up hot links to pages for the Abstract, Introduction, Methods and Materials, Results, Discussion and Literature Cited pages. Note the addresses for each of these pages. You may modify this page a bit if you would like but I'd prefer that you keep this page rather simple. This page should serve as and index or table of contents for your project.

Abstract Page: Open the Abstract Page. You can duplicate this file and use this as the (very) basic template for the other sections. Each section should have a heading (Abstract, Introduction, Methods and Materials, Results, Discussion or Literature Cited) at the top and a "Return to Project Index" link at the bottom. The abstract will be a rather short block of text but the other sections might include links to figures or perhaps to other web page references (e.g. the NOAA POD Guide).

Viewing Your Web Page: You can edit and view your web pages and check to see that your web pages link properly using MS Word. When you think it all works, you will want to check it one final time by viewing it all using Netscape Communicator (or MS Internet Explorer if you prefer). To do this, start Netscape and at the top of the page where you normally enter a URL address (e.g. http:\\www.wwu.edu), you should enter the filename and full path to your index.html file (e.g. z:\dwallin\envr442\web\index.html). When you do this, your index.html file should appear (if you entered the filename and path properly). You may see a few formatting glitches that you will need to edit in MS Word. You will probably find that you need to close and restart Netscape to get any changes to appear. Use Netscape to check, once again, to insure that all of your links work properly.

Going Public: You are now ready to move all of these files to your titan account so they can be viewed by me and by the rest of the world. FTP to your titan account (host: titan.cc.wwu.edu). Log on and create a subdirectory called "html." FTP all of the files you created to this subdirectory. You now need to change the "permissions" on all these files. This allows anyone to look at (but not modify) this file. To do this, you will need to telnet to your titan account. Change directories to your html subdirectory. To do this, Enter:

cd html

Then enter:

chmod o+rx *.html

You also need to change the permissions on the html subdirectory. First go up one level in the directory structure. Enter:

cd ..

Now enter:

chmod o+rx html

 

You should now be on line! Confirm this by pointing your web browser to:

http:\\www.wwu.edu\~yourusername

You can modify your web page at any time. To do this, you can FTP a copy of index.html (or any of your files) to your PC, make changes and then FTP it back to your UNIX account. Alternatively, you can use one of the UNIX text editors to modify your file on titan without having to FTP it back and forth to your PC. The editors on UNIX include PICO, EMACS or VI. For most changes, I find it easier to do the editing on my PC using MS Word. You are responsible for keeping your web page up to date and accurate.

Created by D. Wallin, 11/23/98



Return to ENVR 407 Term Project Page

Return to ENVR 407 Syllabus

Return to David Wallin's Home Page