Having Students Make Webpages
Mary Lou West and Matt Gorring, March, 2001

This page is http://www.csam.montclair.edu/~west/studentweb.html

GENERAL INSTRUCTIONS TO STUDENTS:

Making a webpage requires several types of knowledge. You need to know what you want to say, what audience you are aiming at, how you want the layout to look, and how to tell the computer to do that for you.

First make an outline of what you want to say on your webpage. This should include

       Title of the page (the topic)
       Your name, course name and number, date
        Introduction to the topic
       What experiment or observations you did on this topic
       A picture or two with captions
       What other people say about this topic (annotated links)
       Summary of the information (Be sure to document your sources!)
       Address mailto

Bring this information with you on a floppy disk, please.

SPECIFIC INSTRUCTIONS TO STUDENTS:

1. Getting Started:


First, let's open the file we will use (the page source). Login to your account. The keystrokes are different on Alpha and on Pegasus, so skip to the section which is relevant to you.

Pegasus:
Make a directory called public_html by typing
     mkdir public_html
Change the permissions on your public_html directory by
     chmod 711  public_html

Change to that directory by
     cd public_html
Open a text editor of your choice, type your name, and save the file as index.html in the directory public_html
Change the protections on this file to allow others to access it
     chmod 655 index.html
Your webpage URL will be
    http://www.csam.montclair.edu/~username

Alpha:
$ FAQ
Choose "how to make a webpage" and follow directions.
Make a subdirectory called WWW.DIR by typing
     @MSU$COM:SETUP_WEB
This will also make a file in this subdirectory called index.html with the proper protections
Open a text editor of your choice and type your name in this new file. For example,
     EDIT index.html
Save the file (<control> z)
Your webpage URL will be
    http://alpha.montclair.edu/~yourusername

2. Creating the content of the page in Netscape Composer:


Now it's time to open Netscape by double clicking on its icon. Pull down Communicator, Composer. A blank page should appear.
 If you have brought a file with you on a disk, put the disk into the computer now. We need to shrink the Netscape window a little, so click on the tiny box-within-a-box in the upper right corner of its window. Now you should be able to see your disk's icon, so open it by double clicking on it (or open it under My Computer, :A floppy drive). Double click on the file you chose, and so open it (in Word, probably). Pull down Edit, Select All. Then pull down Edit, Copy.
 Now click somewhere on the Netscape Composer blank page to bring it to the foreground. Pull down Edit, Paste.
 For pegasus click on the Publish button in the menu bar. (It looks like a tiny rhombus with three little diagonal lines below it.) Fill in the boxes with

ftp://pegasus.montclair.edu/home/students/yourusername/public_html/index.html

yourusername
yourpassword

Click publish.

For alpha you need to copy and paste into the file index.html. You can't publish by the button because the path name changes.
Save the file by typing
     (<control> z)

Go back to the Netscape Navigator page and type in for the URL
http://www.csam.montclair.edu/~yourusername
(or http://alpha.montclair.edu/~yourusername)

Cool! You have a webpage.

3. Improving the page:


Go back to Netscape Composer and see if you can make your page look spiffier using the menu choices. Try all of the choices you have time for. If you are in Netscape Communicator you can go to Composer by pulling down File, Edit page. You will recognize Composer by the little "pen" in the upper left corner of the window. It is useful to have both windows open at the same time.
Position the Netscape Navigator (browser) window so that you can see some of the editing window at the same time. Whenever you want to see what effect your editing changes have, save the file, then press Reload or Refresh in the browser window.

4. A fresh start (without Netscape Composer):


For most of your purposes the information above is enough to know. However, if you revise your page often it is often easier and also quicker to load if you learn some basic hypertext markup language (html). This language consists of  tags  which are placed before and after the items you want acted on. First you turn on some functionality, then later you turn it off. The tags are always enclosed in these brackets < >, with the turn off tag having a slash in it  </  >
 For a completely blank file you are typing from scratch yourself (without Netscape Composer) the first functionality you want to turn on is html itself, so edit the file whatever.html so that the very top line says
 <html>
Make some blank lines, then at the bottom of the file type
 </html>
Now we have to give the page a title, so edit around your name to say
 <head> <title> Name's Page  </title> </head>

The body of your file will contain the real content you wish to publish, so after the title line put
 <body>
and then near the end of the file (but before the last line which turns off html) put
 </body>

Now you can add some real content to your document. Go back up the file and after <body> type your first paragraph and save the file. Open a window for Netscape and position it so that you can see some of the editing window at the same time. Type your URL in the Netscape address box. Voila! Whenever you want to see what effect your changes have, save the file, then press Reload or Refresh in the browser window.

5. HTML tags:


Usually this is not as pretty as you had hoped it would be. So, it is time to learn some more advanced html tags. In Netscape Composer you can edit the actual html code by pulling down Tools, HTML tools, Edit HTML source. Experiment with these tags in your document to see what they really do. Remember that most of them need to be turned off also. In order to see them take effect you need to  publish  your edited document.
Some of the tags we have found to be useful are
<p> new paragraph
<br> break (another white line)
<hr> horizontal ruled line
<b> </b> bold
<em></em> emphasis (usually italics)
<u></u> underlined
<center> </center> centered
<h1> </h1> big font
<h3> </h3> smaller font
<blink> </blink> annoying blinking

Some tags work to organize text into lists.
<OL> </OL> an ordered list, it supplies numbers to list items
<LI> a list item
<UL> </UL> an unordered list, it supplies bullets to list items

Some tags allow you to pass to another website (URL)
<a href="URL">  nameappearingunderlined  </a>
For example, to go to Mary Lou West's page with the words "favorite astronomer" appearing as the underlined link, type
<a href="http://www.csam.montclair.edu/~west"> favorite astronomer </a>
To go to Matt Gorring's page type
<a href="http://www.csam.montclair.edu/earth/eesweb/gorring.html"> cool geologist </a>

A webpage should not be longer than one or two pages when printed. Further information should be a new file linked to your main page. In pegasus accounts save your further webpages as filename.html in the directory public_html. You must change the protections on each file to allow others to access it by
     chmod 644  filename.html

6. Advanced techniques (tricks)


Making Tables in Netscape Composer for Webpages:
      This is useful for

To make a table:
1. Go to File menu and open a blank page in Netscape Composer.
2. Place the cursor where you want to place a table.  Go to Insert menu, choose Table.
3. A window will pop-up for you to input data to format the table you are inserting.  At the top, type in the appropriate number of columns and rows you want.  If you simply want to split the screen in half, use the default values (1 row, 2 columns).
4. The rest of the menu is for formatting purposes. You will have to experiment with these options until you get something you like!
5. Pick the parameters you want and click the OK button.
6. To edit an existing table, place the cursor in one of the cells of the table and go to the Format menu, scroll down and click Table Properties.
7. To add rows, columns, or cells in an existing table, place the cursor in one of the cells of the table and go to the Insert menu, scroll down to Table and follow the menu options.
8. To delete rows, columns, or cells in an existing table, place the cursor in one of the cells of the table and go to the Edit menu, scroll down to Delete Table and follow the menu options.

Other Table "Tricks"
1. Inserting pictures into tables.
  Go to Insert menu, scroll down to Image.  You will get a pop-up menu that assists you with importing and formatting.  First, click on the Choose File button to find your image that you want to insert.  Second, click on the desired text alignment and wrapping options.  Click the OK button.
  To edit the picture, double-click on the desired picture.  The pop-up menu for editing the picture properties will come up.  Make sure the Constrain button is checked to ensure that you don t deform the image.  Change the number of pixels in either the width or height box to re-size the image.

2. Embedding tables within tables.
  You can format individual cells within a table by inserting (embedding) another table within it.  Just place the cursor in the desired table cell and go to Insert menu, choose Table.

3. HTML code for tables.
<TABLE BORDER=0 WIDTH=100%> </TABLE> make a table
<tr> </tr> a table row
<td> </td> a table data item

Adding Pictures:
An html tag which shows an image of a file in jpg or gif format is something like
<IMG SRC="photofilename.jpg" HEIGHT=200 WIDTH=300>

Photos can be from digital cameras or from scanned images.
Interesting clip-art and background patterns can be found at
 www.yahoo.com
  WWW (under Computers and Internet)
  Page Creation
  Design and Layout@
  Graphics
  Cool Archive
To save one of these images to your floppy disk or computer, click with the right mouse button on the image, then select Save Image As, and save it to A: or your computer. Keep the extension the same (.jpg or .gif).

A Mail-to:
A tag which allows someone reading your page to send you an e-mail message is
<a href="mailto:yourusername@alpha.montclair.edu"> your name </a>

It is considered good manners to put this mailto tag at the bottom of your page, as well as a statement as to when the page was most recently updated.

Sometimes you can get good ideas from other people's webpages. When you see a feature you like pull down View, Page Source, then scroll down to see how that person made it happen.

Enjoy!!
 

Useful content resources:

  1. Mary Lou West on astronomy and space science links
    www.csam.montclair.edu/~west/astrolnk.html
  2. NASA s astronomy picture of the day
    antwrp.gsfc.nasa.gov/apod/astropix.html
  3. The Internet Pilot to Physics (especially the java virtual laboratory)
     Physicsweb.org/TIPTOP
  4. United States Geological Survey
     usgs.gov
  5. Virtual Geosciences Professor
     www.uh.edu/~jbutler/anon/anonfield.html
  6. Periodic table of the elements
     www.webelements.com

Good examples of student webpages:

  1. Lori Kiefer on asteroids, comets, and meteorites
    www.geocities.com/lmk122
  2. Todd Estelle on plate tectonics
    www.geocities.com/docketst
  3. T. Nguyen's journal of natural disasters
    www.csam.montclair.edu/earth/eesweb/gorring/tnguyenJOURNAL.htm
Comments and suggestions may be sent to Mary Lou West