Lab 1: Creating Webpages

Lab Summary

What you will cover in this lab.

General Info

This document is only a brief introduction to many tools. You will need to spend some time on your own experimenting further to become comfortable with the tools. You should consult the OIT online help page for more information.

In this document, commands that you type will be in a font that looks like this. Sometimes commands may be quoted - "like this" - do not type the quotes, just type what is between them. When instructed to type something, press the return key after typing it.

This lab lets you earn points by playing around with the web a little, then making yourself a part of it with your own home page. If you have already have a home page, you should create another page for this lab (perhaps a CPS 1 course page). If at any point the instructions on this lab sheet do not make perfect sense to you, raise your hand and a TA will save the day.

For future reference, it's a good idea to check your email before coming to lab each week. When we notice a common problem in other sections, your TAs may send you a message to help you out.

We will be using the course web page (http://www.cs.duke.edu/courses/spring03/cps001) for labs and prelabs. Use the blackboard site, (https://courses.duke.edu) for all other information for the class (lectures, general class news, discussion board).

Using a web browser

If you're reading this, you are using a web browser. A browser is a program that can access and interpret documents and other files on the World Wide Web, most of which are written in HTML. Older browsers were restricted to HTML documents only, and could often display them only as plain text, but the ones you're familiar with, Internet Explorer and Netscape, support a large and growing number of kinds of files and applications. Notable among those types is the Java Applet, which is what you'll be writing every week after this in lab.

Important Browser features

Now edit the URL in the location bar so it reads http://www.duke.edu/web/cps001. Press <Enter> and after a brief delay you should see the CPS 1 Home Page in the main window.

Move the mouse over the main window. Any time you see the cursor (the arrow) change to a hand, you can click and the browser will take you to a different web page. You can tell which page you will be taken to by looking at the status bar.

You now know how to use the basic tools available in a web browser like Internet Explorer or Netscape Navigator. You may wish to spend some time looking at the resources available at the CPS 1 web site before moving on to the next section of this lab. It won't take long. When you're done looking, go ahead and open an extra browser window and go to the page where this lab sheet lives:

http://www.duke.edu/web/cps001/labs/lab1.html

Our Pick: Best Search Engine

Type this URL in the location bar: http://www.google.com. You should see the very cheerful homepage of a search engine from the folks at Stanford Computer Science. Give it a shot: type "Duke Blue Devils" in the text field underneath "Search the Web Using Google" and press <Enter>. Google will show you a new web page that contains a list of pages featuring our beloved Blue Devils. You can click on the page titles to view the actual pages.

Logging in and Getting Started

This semester, you will work directly in your acpub accounts. You will log into the Unix computers in Teer or Hudson or some other dismal place, but through the magic of technology you won't actually have to risk going there! Instead, you'll sit in the slightly less threatening and brand new Old Chemistry building, running programs on distant computers while controlling them with your keyboard and seeing their output on the monitor in front of you.

What that means is that you'll have to learn the drill that actually invokes the magic. Here goes:

Go to Start->Programs->Fsecure SSH Client. Select Fsecure SSH Client from the list (make sure you select SSH Client).

Getting Started with UNIX

An operating system is a large program that coordinates all the resources for the execution of programs. UNIX is the operating system on the Sun workstations. UNIX contains lots of commands, a few important ones are introduced here. Common commands are are summarized on an OIT web page.

To enter a command, type after the prompt in one of the xterm windows. You should see a prompt that may look similar to

[1] jforbes@godzilla7%
except jforbes should be replaced by your login-id and the name/number of the machine may be different.

If you make a mistake when typing a UNIX command, use the delete key or the arrow keys to correct it.

If this is a new account, you should change your password to something that is easier to remember, but not easy for someone to guess. Do not use your name, or an English word, but rather compose a password formed with numbers, upper and lower case letters, and punctuation marks. To change your password, type the UNIX command passwd and follow the directions.

Set up permissions and files

Next, from within an xterm window, at the prompt type
~jforbes/bin/setup cps001

This runs a program that will set up some files in your directory to make it easier to use the programming tools we provide. Additionally, it creates a directory in your account, called cps001, for you to put your CPS 1 work. After you run setup, you will need to log out of the xterm window by typing logout and open a new one for the settings to take effect.

The setup script creates backups of any files it changes with a .old  extension, e.g., .cshrc.old.  If you do not get a prompt back after typing the command, consult a TA.  If you do not want to run this program because you have made your own changes to your accounts setup, you will need to look at the setup program to determine which parts of it you want to setup. Some are needed for accessing and submitting files.

When you login, your session begins in your main directory. To see the name of your directory, type the UNIX command pwd (print working directory).  The complete name it prints in your terminal window should look similar to

/afs/acpub.duke.edu/users/j/f/jforbes
except your login-id should be the rightmost word.

To create a directory called lab1 for storing new files related to this lab, you will need to follow these steps (first summarized, then explained).

Command Explanation
cd change to your home directory, wherever you are
cd cps001 change into your cps001 directory
mkdir lab1 make a directory named lab1 to work in
ls list the files in the directory, you should see lab1
cd lab1 change into your lab1 directory
pwd print the name of the current/working directory, you should see lab1

You are now ready to start working on creating a webpage.  The command to change directories, cd, lets you change directories relative to your current directory or absolutely to a specific directory. 

At any time, you can type cd (with no arguments) to return to your home directory. Type cd .. (with no arguments) to go up one directory. Now type cd ~/cps001/lab1 to return to your new lab directory.  The tilde ~ is an abbreviation for your home/root directory.

Now when you type ls you will see there are no files in the directory, because you have not created any yet.  Let's copy some files to your lab1 directory. The copy command is cp so from within your lab1 directory type:

cp /afs/acpub.duke.edu/project/web/cps001/labs/lab1.html .

(do not forget the trailing dot: "."). Type ls to see that the files were copied. You should see a new file called lab1.html. This file is actually the same as the file you are currently reading.

Creating your homepage

Go to the Start menu and accessories to open up NotePad. You will be using NotePad to type out your webpage code.

Type out the information from your prelab (name, year, hometown, 24 hours with computers, etc.). When you are done, save the file by going to file "Save As..." In the save window that pops up, go to P: to save your file. The P: drive is actually connected to your acpub account so you can save any files on your desktop directly into that drive.

From the P: drive, make sure you are in your /public_html directory. Any other directory cannot be viewed using the web browsers. Save the file as "index.html".

Why did you name the file index.html? Web browsers automatically look for a page called index.html when someone points them to your account. In computer science, we'd say naming your main page file index.html is a convention. Press <Enter> to save.

Now take a look at what you've done. In the Navigator/Communicator window you were using before, go to the Location field and type this (replacing login with your acpub login):

www.duke.edu/~login

You should see the homepage you just made. If not, check for typos, and failing that, with a TA. If you want to change something you see, go back to the NotePad window and make the changes. Be sure to save, then go back to Netscape and click the "Reload" button.

Jazzing It Up

Your webpage will look a little dull at this point. If you want to do something more creative, go to the NCSA beginner's guide to HTML. Your TAs probably don't write HTML code on a regular basis, so if you have a specific questions, like "how do I put a table on my page," the online notes are generally the best spot to look for an answer.

To get full credit, you MUST add a couple of extra HTML features, like images or tables or links. You will also need to add a link to the location of your picture.

Picture files are located in the directory: http://www.cs.duke.edu/courses/spring03/cps001/students/.

Submitting

Please note that you have 48 hours to submit your lab and get full credit (a week means before your next lab). If you submit it any later than that, you will get NO credit.

Once you are done with your lab assignment, you submit it as follows:

First you must get into the directory that your web page is located. (that would be the public_html).

cd
cd public_html
Next, at the prompt, please type:
submit_cps001 lab1/secN index.html
Note that 'N' in 'secN' should be your section number. If you did not name your file index.html, then replace index.html in the above command with the name of your file. As a reminder, type "pwd" to see what directory you are in and "ls" to list the files contained in that directory. You need to replace A with your actual section number. If you have problems (like if you get a "command not found" error), you can instead try:
/afs/acpub/project/cps/bin/submit_cps001 lab1/secN index.html

You should get a message confirming that you were able to submit the code. If you weren't able to submit your code email your TA ASAP.

Submit as many times as you like. Only the last submission counts. You can always check to see what was submitted by typing

submit_cps001 lab1/secN

Posting to the discussion forum

The course bulletin board is a place for you to ask questions that can be answered by any of the course staff or even other students. This system is a much more efficient system for getting your question answered than emailing one specific person. To make sure you can use the bulletin board system, please post the following information to the category titled Introductions in the forum CPS 01 Spring 2004:

To do this, you will need to register yourself on the bulletin board. Please use your Net ID as your login, but do not use your actual Net ID password for the bulletin board. Instead please create a new password for this site. By using your Net ID as your login, you will help us to more quickly get more information if we need it to answer your question.

The authors of the best jokes, haikus, or limericks may receive extra points (and valuable prizes!).

Wrapping up

When you finish changing your page, make sure you saved the final version and then start shutting stuff down. You mostly start hitting the little X's in the upper righthand corner of each window. If you are about to destroy something important, you will get a warning, so do it carefully. Make absolutely sure you do not leave any windows open! If you do, anyone who walks by feeling malicious can get you in trouble. And that's it. You're done!



Mariyam Mirza
Last modified: Mon Jan 13 07:18:15 EST 2003