CSC 101 CompLit, Fall 1996
Merrie Bergmann
Ileana Streinu
Dominique Thiébaut

1. UNIX File Directories	6. Links to local files
2. Word with Internet Assistant	7. Links to remote documents
3.Ftp to transfer	8. Bookmarks
4. Telnet to sophia	9. Formatting
5. Netscape	10. View the source

Today we will learn to how to make a very simple Web homepage. For this we will need to learn the structure of the UNIX file directories and some basic Unix commands, learn how to use Word for Windows 95 with the Internet Assistant to turn a Word file into an HTML file, then use the network utility ftp to transfer the file to sophia and set the appropriate read-permissions to your file, so that it becomes public. Next week we will also learn the basics of HTML, the hypertext markup language - the language "understood" by a Web browser such as Netscape and which underlies the structure of any web page. Today we will just have a first glimpse at HTML by looking at a document source and learning how to get from there information about the location of pictures, web pages, email addresses, etc.

To create a home page:

• use Word to create a file
• save it as an html file
• ftp it to sophia
• telnet to sophia to rename it home.html and change the permissions to make the file readable.
• launch netscape to look at it.
• use the RELOAD button on Netscape to get a fresh new copy of the home page after modifying it.

1. UNIX File Directories

Folders (Mac, Windows 95) are called directories under Unix (and MS-DOS).

Files are either in the current directory or elsewhere, in which case they have to be referred to by a whole path name.

Examples:

• in your sophia account, the public_html directory.
  • to refer to a file in the current directory, just name it as it is.
  • to move to a different directory, do cd (change directory), e.g. cd public_html
• to refer to a directory/file in another account: ~accountname/directory/file

e.g. ~cs101a00 takes you into the class account.

To look at files in the current directory:

% ls -lF

To remove files:

%rm filename

To rename files:

%mv oldfilename newfilename

2. Word with Internet Assistant to create HTML files

Example:

Amy Smith's home page

Hello, world! This is my very FIRST home page!!

Here's my lab6.

Here's my hw6.

Save the file under the bass server home directory cs101axx. Name it home. Then save it again, this time using the Save As option and choosing the HTML option from the Save as type: box. Name the html version of the file with the same name, home. Later when you will use ftp to transfer these files, you will see two file names, home.doc (the Word version) and home.htm (the HTML version) in your bass directory.

3.Ftp to transfer the file to sophia

From the Start menu, launch Ws_ftp, connect to sophia using your sophia account, and transfer the home.htm file to the public_html directory in your sophia account.

Can rename the file directly from ftp: select it in the sophia window, click rename, change the name to, say, home.html (instead of home.htm).

4. Telnet to sophia to fix some things up

• telnet to the sophia account to which we transferred the home.htm file.
• Go into the public_html directory
• Check that the file is there (use ls -lF)
• Rename the file using:

% mv home.htm home.html

PLEASE NAME THE FILE EXACTLY AS STATED: use lower-case letters for home and html, with a single dot and no spaces in between.

• Make the file public:

% chmod go+r home.html

An alternative (sophia only) is:

% public home.html.
(The last two steps not necessary if you renamed in ftp, and because apparently now ftp automatically makes your file readable).

5. Netscape to look at the home page

Launch netscape from the Start menu. Go to the URL http://www.smith.edu/~cs101axx (Here "xx" should specify your sophia account number.).

The Web software is set up to look for a file in ~cs101bxx/public_html/home.html, which we just created.

More html-specific features:

6. Links to local files

Open the home file (Word). We will create a link to the lab6 file. Select the lab6 text on the third line in your file. Then click on the "chain" (hyperlink) button from the toolbar.

7. Links to remote html documents

In Netscape, go to a favorite page. Write down its http address. Back to the word file, add a new line, something like:

This is my favorite site on the Web.

Then select This and create a link (as before), this time typing in the whole http address of the site you have just located.

1. Bookmarks: links within the same document
   

Go to the class home page, to the tentative schedule - see how when you click on Week 7 it takes you all the way down the page? This is because the link it to a bookmark in the same page, not to some other file or remote http address.

To create a bookmark, select the text where you want to place the bookmark, then click on the Bookmark icon (left to the chain icon). Give it a name you will remember.

Then, to create a link to the bookmark, proceed as before (the hyperlink icon), but type in the name of the Bookmark in the Bookmark box instead of the File or URL box.

9. Formatting html documents

Combine the knowledge of Word with the link creation features of the Internet Assistant to create beautiful Web pages.

1. Fonts
2. Sizes.
3. Centered text.
4. Tables. Borders.
5. Horizontal lines (Insert menu).
6. The current date
7. Title
8. Inserting pictures: need to know where to get the picture from!

10. View the source

In Netscape go to the home page, click on the View menu and select Document source.

Find out the location of files, images (.gif or .jpeg files), other information (movies!).

Insert in the Word document using the Picture tool, specifying the correct address (this may be tricky!)

11. How to figure out the address of a document from a web page:

If given as: http://…. That should suffice.

If given as filename.gif (e.g.), then use the http address of the current document and concatenate the filename.gif to it.

May have several directories before getting to a file name, e.g. images/image1.gif.

I will show examples in class.

Other: create mail links, ftp links, etc.