1. First, let's open the file we will use (the page source). Login to your account. (Under CSAM Lab #) The keystrokes are different on Alpha and on Pegasus, so skip to the section which is relevant to you.
Pegasus:
Alpha:
2. Now it's time to open Netscape by double clicking on its icon. (Usually found under CSAM Lab # ) 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. 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/faculty/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 key, 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)
3. Go back to Netscape Composer and see if you can make your page look spiffier using the menu choices. 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. It's time to 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. Usually this is not as pretty as you had hoped it would be. So, it's time to learn some more advanced html tags. Experiment with these in your document to see what they really do. Remember that most of them need to be turned off also. Some of the tags I have found to be useful are
Some tags work to organize text into lists or tables. <OL> </OL> an ordered list; it supplies numbers to list items <LI>. <UL> </UL> an unordered list; it supplies bullets to list items.
A table requires this before it starts:
<table BORDER=0 COLS=4 WIDTH=100% BGCOLOR=white NOSAVE>
<tr ALIGN=left VALIGN=center>
Then each table row is called using <tr> </tr>.
And each table data entry within a row is called using <td> </td>.
Close the table with
</table>
For an example see
http://www.csam.montclair.edu/~west/REUs1999.html
Some tags allow you to pass to another website (URL) using
<a href="URL"> nameappearing </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>
Note that there are two quotation marks required in this statement (after the equal sign and before the first right bracket.
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 typing chmod 644 filename.html
A tag which shows an image of a file in jpg or gif format is something like
<IMG SRC="photofilename.jpg" HEIGHT=200 WIDTH=300>.
You can play around with the height and width commands to make people in your picture look fat or skinny.
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!!
*****************************
6. To scan a picture for your webpage:
Scan it in. The easiest scanner to use is the ImageDeck in the Mathematical Sciences office, RI-270, next to Helen Roberts' office. Push the power button on front side of the machine at center bottom. Place your photo face down on the glass with its top toward the left and its side against the edge nearest you. Put a piece of white paper to back it. Close the cover. Put a PC type disk in at right front of the scanner. Push the Start button at the left side of the control panel. Note the F number on the display. This will appear on your disk as an IMGnumber. Remove your disk and remember to take your photo too.
7. To put a picture into your pegasus account
A) One way to get this to your pegasus account is:
Put the disk into a PC (Dell).
Start, Programs, MS-DOS Prompt.
Type dir A: (to see what's on your floppy disk in the A drive).
Type ftp pegasus.montclair.edu
user (pegasus.montclair.edu(none)): yourusername
331 password required : yourpassword
Type ftp> cd public_html (to change to your directory public_html).
Type bin (to tell the computer to transfer the image as a binary file).
Type put A:\IMGnumber.JPG newfilename.jpg
(example: put A:\IMG10.JPG lori.jpg )
quit
exit
Then open your pegasus account and type
cd public_html
Type chmod 644 newfilename.jpg
B) Another way to get this to your pegasus account is:
Put the PC disk into a MAC.
Open Applications, Fetch.
Host: pegasus
UserID: yourusername
Password: yourpassword
Directory: public_html
Put File: Desktop, yourdiskname Open
Look to see if Automatic is checked. OK
C) To publish this image on your webpage:
Put a link on your webpage to this image either through Netscape Composer
or by
<IMG SRC= imagename.jpg>
8. To save a picture file from the Internet
On a PC click on the picture with the right mouse button, then tell where to save it.
On a MAC click and hold, Save this image as, ... If you are in your pegasus account you can save it directly to your public_html folder. If not, you can save it to your floppy disk and then upload it by Fetch, as above.
9. Another way to publish (instead of Netscape Composer):
Type your file in MS Word, then Save as HTML. (filename.html)
Upload this file using Fetch, as in 7B above.
URL of this page is http://www.csam.montclair.edu/~west/training/webmaking.html
Send suggestions to Mary Lou West
Updated April 14, 2000.