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

In this lab you will learn to how to make a very simple Web homepage. For this you 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. Later you will also learn the basics of HTML, the hypertext markup language - the language "understood" by a Web browser such as Netscape - but today you will just have a first glimpse at it by looking at a document source.

1. UNIX File Directories

Log onto to sophia (any one of the lab partners' accounts will serve). Issue the command (i.e., at the %-prompt, type this text right of '%' and hit the return key):

% ls -lF

That is <lowercase L> <lowercase s> <space> <lowercase L> <uppercase F>. This is the UNIX command for listing your files (ls stands for list since it gives you a list of files). The files whose names (rightmost column) are followed by a slash (/) are directories, equivalent to Mac or Windows 95 folders, which themselves contain files. We will be working in the directory public_html throughout the lab, which is where Web software will look for html documents. Change to this directory with the command

% cd public_html

(cd stands for "change directory")

A short version of this is % cd pub*, which changes to a directory whose name begins with pub and is followed by other letters, but you don't need to remember this (it just comes handy when you do it often - saves some key strokes when typing!).

Check that this directory is empty by again issuing: % ls -lF

This was just to give you some practice with the Unix file hierarchy. Quit sophia for now.

2. Word with Internet Assistant to create HTML files

Now you are going to create a file with Word. You are already familiar with Word 5.1 - we used it on the Macs. Under Windows 95 we have the latest version, Word 7.0. From the Start menu/Programs/Microsoft Office launch Word. It should look familiar, except for a few new features that you will discover soon. Open a new file from File/New. Enter any text you want, for instance something like:(

Amy Smith's home page

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

Here's my lab6.

Here's my hw6.

(Use only the name of the owner of the account you are using, even if you are two working together. Then the other partner should create a similar page in her own name in her own account).

Play with the fonts and sizes to make it nice, but don't spend too much time on it now. You will get back soon and expand the home page later, after you will learn how to transfer it to sophia and make it public from there.

Now save the file under your bass server home directory cs101axx (you learned last week how to do it ), 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

Last week you have learned how to transfer files to and from sophia. From the Start menu, launch Ws_ftp, connect to sophia using your sophia account, and transfer the home.htm file you just created to the public_html directory in your sophia account. Quit ftp now.

4. Telnet to sophia to fix some things up

telnet now to the sophia account to which you transferred your home.htm file. Go into the public_html directory (go back to step 1 of today's lab, if you forgot how). Check that the file is there (use ls -lF). If not, get back to ftp and make sure you correctly transferred the file. Then, do the command:

% mv home.htm home.html

This command renames your file with a name that is more natural to the Unix system (mv comes from "move"). It is not always necessary to rename, but in this case is crucial. It also helps us later create links to your home pages, if they are named in a consistent manner. The file name, as created by ftp, might also show as HOME.HTM.

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

Then do:

% chmod go+r home.html

I know this is obscure: it's purpose is to change the permissions of your file, so that it is readable to the outside world. An alternative (sophia only) is:

% public home.html.

What you have done is created a minimal home page, which has nothing but some text in it. Now we are going to test out your home page.

5. Netscape to look at your home page

Launch metscape 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 you just created. So you should see your minimal homepage.

Let's recapitulate: to create a home page, you use Word to create a file, save it as an html file, ftp it to sophia, then telnet to sophia to rename it home.html and change the permissions to make the file readable. Then launch netscape to look at it. From now on, you will use this procedure anytime you will have to update, modify an existing page or create a new one. The only thing that you SHOULD (please) remember, is that if you do not quit Netscape while updating the home page or any other file that it refers to, you will have to use the RELOAD button on Netscape to get a fresh new copy of the home page. Always reload after modifying a page - or else you will not be able to see the changes.

In the remainder of the lab you will now more html-specific features, such as creating links to other pages!

6. Links to local files

Go back to Word, open a new file and put in any text you like. Save it as lab6, both as Word and Html file. This is not really necessary, but sometimes it helps to have two copies of the same file, under different formats.

Now open the home file. You will now 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. In the dialog box, type lab6.html when asked about the file or URL. Both lab partners should eventually ftp the lab6 file and create a link to it.

Next, ftp both the home and the lab6 files to your sophia account, and name them home.html, resp. lab6.html (lower case). Do not forget to change the permissions. From netscape, look into your home page and click on the link for lab6: it should take you to the file lab6.html, which you just created!

7. Links to remote html documents

In Netscape, go to one of your favorite pages. Write down its http address: you will use it shortly. Back to your lab6 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.

8. Bookmarks: links within the same document

Another feature that comes in handy is to create bookmarks within your document. For instance, if you look at the class home page, the schedule.html file contains in its header links to each week: those are not links to other files, like those you have created at the previous steps, but links to bookmarks within the same document.

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

Now that you learned the basics, you can combine your knowledge of Word with the link creation features of the Internet Assistant to create beautiful Web pages. This is what you will do for the homework. For the time being, I would like you to spend the rest of the lab improving the appearance of your lab6.html file. You should have at least the following features in it:

1. At least one word italicized, and at least one word bold, in the body of your lab6 page.
2. At least three different font sizes.
3. At least one centered text.
4. At least one small table with at least two columns and two rows (Use the Table menu). The table should have borders.
5. At least two links to bookmarks within the lab6 file and two links to remote html documents.
6. At least one link to some Smith related page - maybe the page of a department, professor or friend of yours.
7. At least one horizontal line (look into the Insert menu for horizontal lines).
8. The current date, inserted at the bottom left of your document in a sentence such as:

Document last modified on 10/17/96.

1. 9. Last but not least, your document should have a title: use the title icon to the right of the hyperlink icon for this purpose. The title should be something like: Amy's Lab 6.

10. View the source

The last thing you will do in this lab is to look at the source of your home page. After you have sent everything to sophia, launch Netscape and go to your home page, then click on the View menu and select Document source. This will bring up a window with some apparently incomprehensible text that is nothing but the internal format of your html file. I would like you to write down the html command that you think describes the title of your document. Nothing to do with it right now - just be aware of it.

That's it! Nothing to turn it because we can link to your lab6 page through your personal home page.