Assignment 1

This exercise shows you how to use the two computer environments that you will use in this class. You will:

  1. Set up your directories on a disk on Windows. This is where you will write your HTML documents.
  2. Set up your account on the UNIX server. This is the account you will use for testing your HTML files.
  3. Use an FTP program to set up your directories on a UNIX server.
  4. Use an editor to create a web page on the Windows disk.
  5. Test the page on the Windows disk.
  6. Use an FTP program to load your page onto the server.
  7. Test the page on the server.

You don’t have to do this work on the school computers, as long as the instructor can view your web pages. The instructor can’t come to your house and help you set up your computer; so you’re on your own if you decide to work somewhere other than at the school.

Use Windows and set up your directories

  1. Create directories to hold your web page work. Make sure your capitalization and puntucation in the file names are exactly as specified here. Do not improvise! These instructions presume you are using a flash memory stick in the F:\ drive.

    1. Double click My Computer > F:
    2. From the menu bar, select: File > New > Folder and type the name public_html. That is an underscore between the words. Do not type a blank!
    3. This creates a new folder. Double-click the public_html folder icon. Don’t double-click the name, double-click the icon!
    4. From the menu bar, select: File > New > Folder and type the name images.
    5. Click in the window so that the folder isn’t highlighted any more.
    6. From the menu bar, select: File > New > Folder and type the name assignments.
    7. Close all the windows that opened during this process.

    You now have a directory public_html in your home directory (F:). In the public_html directory, you have two directories: images and assignments.

Set up your directories on the UNIX server

In this step, you will set up directories under your account on the UNIX server in the same structure as on the Zip drive. That way, you can build and test your files on the Zip drive, then copy them to the corresponding directories on UNIX.

FTP (File Transfer Protocol) programs let you transfer files from your system to the server and back again. They also let you manipulate the directory structure on the server, and that is the capability you will use in this step.

You need to do this step once, and once only. Once the directories are set up, you never have to worry about them again.

  1. Start the FileZilla program (Start > All Programs > FileZilla), and fill in the top part of the screen as shown in the following figure. (Use your user name instead of web199.)

    connection info

    When you connect to the server, you will see your home directory on the right side of the screen.

    home dir

  2. As you can see, the public_html folder already exists. Double-click it, and you will see the right side look like this. Notice that the path (/home/web199/public_html) shows your current directory on the server.

    empty dir

  3. Right-click in the empty area of the right-hand window and choose Create Directory from the menu. Then fill in the word images for the new directory name.

    dialog for new directory

  4. Repeat the previous step to add the assignments directory. Your server’s file structure now matches the file structure on your disk, as shown here:

    final directory setup

Create a Web Page on Windows

  1. You will be using the Textpad program to edit files. We are using it instead of notepad because it has features that make editing your files far easier.

    1. Choose Start > All Programs > Textpad

    2. Type the following, as shown here. It is explained in the notes for lecture 1.

      <!DOCTYPE html>

<html xml:lang="en" lang="en"
    xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Put a Title Here</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

</body>
</html>

    3. From the File menu, choose Save as, and name the file template.html, and save it in the F:\public_html\assignments folder that you created earlier.

      You must type this name exactly as shown, and you must put it in the correct folder..

      The UNIX file system is case sensitive; this means that myfile.txt, MyFile.txt, and MYFILE.TXT are three completely different file names. Throughout this course, we will use file names in all lower case, with no blanks or “weird” characters. This assures us that file names will work equally well on Windows and UNIX.

    4. Now add the comment before the <html> tag, change the text in the title, and add the text in the body, as shown here. (Please use your name instead of “Your Name Here,” and use the correct date.)

      <!DOCTYPE html>

<!-- Written by Your Name Here, 4 Sep 2010 -->

<html xml:lang="en" lang="en"
    xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Assignment 1 your name</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
My first page
</body>
</html>

    5. From the File menu, choose Save as..., and give the file the name assignment1.html

      Again, remember to use all lowercase for the file name.

  2. Use a browser to look at your page.

    1. Start Mozilla/Firefox
    2. Type this into the location area: 
      file:///F:/public_html/assignments/assignment1.html
    3. It should show the text with your name in the title bar, and the “My first page.” text in the body of the window.

  3. Modify your web page

    1. In the TextPad window, change the text from
        My first page
      to
        This page is assignment 1.
    2. From the File menu, choose Save
    3. In the browser window, click the reload button.

    When you have finished, you may close TextPad and your browser.

Use FTP to load your page onto the UNIX server.

You create and test your pages on the local disk, then copy them to UNIX so that ther students, the instructor, and anyone else you wish can see your web pages there. To copy your assignment1.html file to the UNIX server, use the FileZilla FTP client program.:

  1. Start the FileZilla program (Start > All Programs > FileZilla), and fill in the top part of the screen as shown in the following figure. (Use your user name instead of web199.)

    connection info

  2. On the left side of the window, navigate to the assignments folder on your disk. It’s inside the public_html folder.

  3. On the right side of the window, navigate to the assignments directory on the server. It’s inside the public_html directory.

    The screen should look something like the following (we have used the A: drive instead of the F: drive)

    matching directories

  4. Drag file assignment1.html from the left side to the right side. That’s all there is to it.

  5. Use a browser to look at your page.

    1. Start the browser
    2. Type this URL in the location area, replacing the question marks ??? with your username: 
      http://evc-cit.info/~web???/assignments/assignment1.html

    3. The browser should show the text with your name in the title bar and “This page is assignment 1.” in the body of the window.