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 Linux 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 Linux 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.

These instructions are written for the Cyberduck FTP program. If you are using Filezilla, follow the instructions on this page instead.

Use Windows and set up your directories

Note: These instructions are written for Windows 7; creating folders might be different on later versions.

  1. Create directories to hold your web page work. Make sure your capitalization and punctuation 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 Linux server

In this step, you will set up directories under your account on the Linux 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 Linux.

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 FTP program. In this case, we are using the Filezilla FTP program. . Click Open Connection 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 .

    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 (after clicking the left arrow to move up one directory level):

    final directory setup

Create a Web Page on Windows

  1. You will be using a text editor like Textpad or Notepad++ to edit files. We are using it instead of Notepad because it has features that make editing your files far easier.

    1. Start your text editor.

    2. Type the following, as shown here. It is explained in the notes for lecture 1. (Please use your name instead of “Your Name Here,” and use the correct date.)

      <!DOCTYPE html>
      <!-- Written by Your Name Here, 4 Sep 2099 -->
      
      <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 Linux 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 Linux.

    4. Now change the text in the title, and add the text in the body, as shown here.

      <!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 the text editor and your browser.

Use FTP to load your page onto the Linux server.

You create and test your pages on the local disk, then copy them to Linux so that ther students, the instructor, and anyone else you wish can see your web pages there. If you’re not still in your FTP program (Cyberduck, in this case), start the FTP program and connect to the server as shown in the following figure. Use your user name instead of web199.

connection info

  1. Navigate to the assignments folder on the server. It’s inside the public_html folder.

  2. Click the Upload button, and then navigate over to the public_html\assignments folder on your USB drive.

    matching directories

  3. When you click the Choose button, a Transfer window will open to show the file transfer in progress. That’s all there is to it.

  4. 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://citstudents.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.