542_web_proj

ESCI 442/542: Introduction to Remote Sensing

Graduate Student Projects: Web Page Authoring For Your Final Project

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 J:\saldata\esci442\web. 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 (~5 years ago) 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 MS Internet Explorer (or some other web browser if you prefer). To do this, start Internet Explorer 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 Internet Explorer to check, once again, to insure that all of your links work properly.

Going Public: On your U: drive, create a subdirectory called myweb. Move all of your .html files into this subdirectory. Believe it or not, that’s it. After your files are transferred, you should now be on line! Confirm this by pointing your web browser to:

http:\\myweb.students.wwu.edu/yourusername

You can modify your web page at any time. You are responsible for keeping your web page up to date and accurate.

Last Modified 1/3/2011

Return to ESCI 442/542 Lab Page

Return to ESCI 442/542 Syllabus

Return to David Wallin's Home Page