CompSci 4 Fall 2011
Classwork 1: A first web page

Aug. 30, 2011

10 points


This exercise is to be done with your partner. You should both create this file and put it on each of your Duke homepages. You should continue to use the same partner until you are instructed to use a new partner.

The point of this exercise is just to create a simple web page using html tags and see how to copy it to your account and get it to display on the web. We will learn more about html tags in the next class period. Each web page in html has a head and a body part.

Start a Web Page

First lets get organized! On your laptop create a folder called "CompSci4" to put all your work for this class in. Then create a folder inside it called "webpages".

If you have PC: Now use "notepad" to start a new file if you are on a PC.

If you have a Mac: Use text edit and follow these instructions! When you first create the file select the option "Make Plain Text" (in the Format menu). Also, go to the Preferences, and check the box which says "Ignore rich text commands in HTML files" (this might be in the "Open and Save" tab). You can also click the radio button saying "Plain Text" if you want new files to be in plain text by default, which is what you want when just editing raw HTML code.

Using the editor, create a web page named firstpage.html (the filename must have the .html extension to identify it as a html web page) and type the following simple page in (between the next two lines). Your web page will look like this .

You must fill in your names and complete the sentence "CPS 4 will be ?".

NOTE: h1 is the letter h followed by the number 1, li is the letters L and I in lowercase.


<html> <head> <title> My HTML page </title> </head> <body> <h1> First page in CompSci 4 </h1> <p> <ul> <li> Names are: ? <li> CPS 4 will be ? </ul> </body> </html>

Save the file as a type text file in your webpages folder.

After typing this all in, look at your firstpage.html web page using a browser such as Firefox or Internet Explorer (IE) to see if it looks ok. Start the browser, then select "File", "Open", "Browse" and go to your webpages folder and select firstpage.html to view.

Copying your work to your Duke account

Go ahead and copy this html file over to your Duke OIT account. If you are working with a partner, you should both copy it over.

You will put these files in a directory on your account that will be viewable by others on the World Wide Web. Make sure you copy all the files in your webpages directory.

DON'T USE Blanks in names of folders! They work, but make it harder to see the URL.

  1. FILE TRANSFER PROGRAM - IF YOU don't have one, you will need to get a file transfer program. You can get one from OIT for free such as SSH F-Secure. You can also use webfiles.duke.edu for html pages.
    NOTE: YOU CANNOT use webfiles.duke.edu to copy Alice worlds! They get corrupted.

  2. Now you need to connect to your Duke OIT account, which means you need to connect to a machine on the Duke network. At the top of the window, select "File", then "Connect". You'll need to enter a machine where it says "Host Name:". Enter login.oit.duke.edu Then beside "User Name:", enter your Duke login, mine is "rodger". Select "Connect". Enter your Duke password and then you should see your folders on your Duke account.

  3. Now we need to create a place to put your files so they will be seen on the web. Doubleclick on the folder "public_html". There may be nothing in it if you have never put anything in it before. Let's create a folder for all your CompSci 4 items. Near the top of the window, select "Operation", then "New Folder". It will create a new folder in your Duke files, type the name "compsci4".

  4. Double click on the folder compsci 4. It is empty. We will now copy over your webpages folder. Click the webpages folder from the local machine and drag it over to the right side of the window. The folder should be copied over.

  5. Is your firstpage.html page on the web? If your user id is "abc3" then you can view your web page by entering the following address in a browser. Note the little squiggly mark before abc3 is a tilde.

    www.duke.edu/~abc3/compsci4/webpages/firstpage.html

If that doesn't work then try: (replace "abc3" with your userid), and then browse through folders.

www.duke.edu/~abc3

If you don't finish this classwork in class, you should try to finish it outside of class. If you get stuck, then just wait til Thursday's class to finish it.

This assignment should be linked to your CompSci 4 web page (see assignment 2 once you get that.) It will not be graded until September 10th at the earliest.