Web Programming

CSC 210, Spring 2011

(Monday and Wednesdays, 2:00-3:15pm in CSB 209)

Submit At my.rochester.edu

Assignment #0

In this assignment you'll make a simple web page and publish it on the course web server. We're going to give you the HTML that you'll use, you'll just need to personalize it a bit, and, if you want, tweak it for extra credit.

Contact Assignment

Your contact for this assignment is (drum roll...) Anna Loparev! Please direct questions about this assignment to Anna (see the Contact Page) because she will best know what's going on. You can also always contact Jeff, who may end up forwarding your question to Anna.

Make a Web Page!

Did the exclamation point adequately convey the excitement you sould have for this moment?

Regardless, your goal is to use the HTML code below to make a web page, and then post it to the course web server. You'll then make another web page that explains what you did, including any extra credit that you chose to do, and links to the first web page. This serves as a README for your assignment letting us graders know what you did - you'll do this for all of your assignments.

Creating A Web Page

The base process for creating a web page is the following:

  1. Create a file in your favorite text editor (notepad, textpad, emacs, etc.)
  2. Write or paste the HTML for your web page in this file and save it.
  3. Use an SFTP program to upload that file to your account.
  4. View your web page.
Here's another take on these instructions.

Logging into the server and setting up your web space

There's a little bit of setup to do before you can upload your web content. We need to create a folder on the server for your web content and tell the server that it's ok for the web server to serve it to people by setting the appropriate permissions.

Those using OS X or Linux should be able to ssh directly from the commandline, whereas those using Windows may want to use Putty.

  1. Get your login credentials (they will be emailed to you by 1/15/2010).
  2. SSH to betaweb.csug.rochester.edu & login.
  3. Give the web server execute permission for your home directory:
    chmod a+x /home/yourloginname
  4. Create a directory in your home directory called "public_html":
    mkdir public_html
  5. And then one for the assignment:
    cd public_html
    mkdir 0
  6. Create an HTML, PHP, or other file and put it in that directory.
  7. Access your files at http://betaweb.csug.rochester.edu/~<yourloginname>/0/

The following video illustrates this process - the YouTube video may not be that easy to see, so you can also download the original SSH video:

Transferring files to/from the server with SFTP

If you prefer to edit your files locally, you can use an SFTP client to transfer the files to and from the server.

Below is a video illustrating how to do this in Windows using WinSCP, the process is similar using other programs. There's also the original SFTP video.

Your Web Page


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>My First Web Page - It's Super Sweet!</title> 
  </head> 
 
  <body>
 
    <h1>My First Web Page!</h1>

    <p>
      Congratulations, you created your first web page.
    </p>

    <p>This kitty is sad, but is much happier now that your web page exists.
      <img src="http://www.cs.rochester.edu/u/jbigham/courses/210/pics/sad-kitty.jpg"
        alt="A really sad kitten">
    </p>

  </body>

</html>

Test It Out

Visit your web page and make sure that it works.

Add a README Page


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>ReadMe for Assignment 0</title> 
  </head> 
 
  <body>
 
    <h1>ReadMe for Assignment 0</h1>

    <p>
      <a href="mysweetwebpage.html">Assignment 0</a>
    </p>

    <p>
(describe what you did, including any extra credit, here.)
    </p>

  </body>

</html>

I expect to be able to visit http://betaweb.csug.rochester.edu/~<yourloginname>/0/ and see a page describing what you did in this assignment and then visit http://betaweb.csug.rochester.edu/~<yourloginname>/0/sweetwebpage.html to see the actual assignment. If you don't like the name sweetwebpage.html, you can name is something else, but it should be linked from the first page.

Content!

The web is about more than technology -- add a 500 word essay response to the Wired "The Web is Dead" article. Argue that the web is dying, that it's not, or something in between.

Add your essay to your web page.

Submit

All of your assignments will be turned in by simply providing us with a URL. That URL can usually be hosted anywhere you want, but this week we want to make sure you can access the course web server which you'll need for future assignments. Also, if you choose to host elsewhere, we aren't responsible if it's not available when we go to grade! Also, this theoretically means that you could turn in your assignments late, but you don't know when we'll come looking for it - do you really want to take that chance?

Submissions and grades will be handled by blackboard at my.rochester.edu. The mapping is pretty simple - Assignment 0 on here should be submitted under Assignment 0 there.

Extra Credit

Each assignment will come with a list of extra credit options each worth some number of bells and whistles. Bells and whistles usually ask you to make some cool tweak to your page and may sometimes point to an external web page on how to do it. A whistle is worth approximately half as much as a bell, and neither counts all that much, but they could bring your grade up half letter in the end if it's close. Most importantly, the bells and whistles usually give you the chance to flex your web programming muscles and create something awesome -
whistle and ring on CSC210'ers!

This week's assignment is designed to be quick & easy, so there's just a couple of simple whistles to choose from:

Make sure to tell us what extra credit you did in the web page describing this assignment, otherwise we might not realize that the weird Star Trek quote you included was meant to be a joke (Spock wouldn't be illogical! Get it?) and should count for the first whistle.

Please email Jeffrey P. Bigham at jbigham@cs.rochester.edu with questions.

Valid XHTML 1.0 Transitional Valid CSS!