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 "compsci94" 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 "Compsci 94 will be ?".

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

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, Chrome, Internet Explorer (IE), Safari, etc. 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 the file from your computer.

Note your file is not on the web yet, but make sure it looks ok. You are just viewing a file on your computer. If it looks ok, then the next step is to copy it to your Duke web space so anyone on the internet can view this file.

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. Everyone at Duke is given personal web space called

   public_html

To view what you put in this folder browse to the URL:

    people.duke.edu/~NETID 

where NETID is your Duke netid. Make sure you copy all the files to your Duke webspace folder for each web page you make. In this example, there is just one file, but for some web pages you make, if you have an image, you will also have to copy over the image file.

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

Here are things you can try to copy over this web page and view it.

1. First connect to the Duke network to access your web folder. Here are two ways to try:


1. RECOMMENDED to use CIFS: Duke OIT has information on how to connect to your Duke space at Duke Personal Home Directories . See the links to the right for how to connect from a Mac, Windows, or other devices.

   The service desk at the Link can help you connect to your web space if you cannot figure it out. They cannot help you with html.



2. (OLD - you probably don't want to do this) FILE TRANSFER PROGRAM - You can get one from OIT for free such as SSH F-Secure or Filezilla.

   Once your file transfer program is setup, you need to connect to your Duke OIT account, which means you need to connect to a machine on the Duke network. Connecting may go something like this. 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.

2. Once you are connected and can see your files, you need to create a place to put your files so they will be seen on the web. You should have a public_html folder already there. If you do not have it, then you will need to create it. Sometimes after creating it, you have to go to OIT for them to setup the correct access to it so people can view files. If you have any trouble, go to the help desk in the LINK.


3. If you can see the "public_html" folder, then create a folder inside this folder called "compsci94" (NOTE one word with no spaces), to put all your web materials for CompSci 94.


4. Now inside your compsci94 folder, copy over your "webpages" folder that you put on your computer.


5. Is your firstpage.html page on the web? You can view your web page by entering the following address in a browser. Note the little squiggly mark before NETID (where you replace NETID with your Duke netid) is a tilde.

people.duke.edu/~NETID/compsci94/webpages/firstpage.html

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

people.duke.edu/~NETID

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.

NOTE: Most classwork is due by the next class period. However for this week, the classwork is all web pages and will be graded later by looking at your webpages on the web. This classwork should later be linked to your CompSci 94 web page that you will create in assignment 2 once you get that. It will not be graded until September 12th at the earliest, so you have some time to figure this out, but don't wait til the last minute.