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:
- Create a file in your favorite text editor (notepad, textpad, emacs, etc.)
- Write or paste the HTML for your web page in this file and save it.
- Use an SFTP program to upload that file to your account.
- View your web page.
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.
- Get your login credentials (they will be emailed to you by 1/15/2010).
- SSH to betaweb.csug.rochester.edu & login.
- Give the web server execute permission for your home directory:
chmod a+x /home/yourloginname - Create a directory in your home directory called "public_html":
mkdir public_html - And then one for the assignment:
cd public_html
mkdir 0 - Create an HTML, PHP, or other file and put it in that directory.
- 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.- Unix:
- You can use the scp command:
scp my-file.html yourloginname@betaweb.csug.rochester.edu:~/path-in-home-directory/
Or, to copy a file to your local machine:
scp yourloginname@betaweb.csug.rochester.edu:~/path-in-home-directory/my-file.html . - Or you can use the command line SFTP client sftp:
sftp yourloginname@betaweb.csug.rochester.edu
cd some-directory
put file-to-upload.html
get file-to-download.html - If you prefer a GUI, try gFTP. In the protocol drop-down, be sure SSH2 or SFTP is selected.
- Mac:
- Both scp and sftp should be available on Mac systems.
- If you prefer a GUI, try Fugu.
- Windows:
- Try WinSCP. Be sure the SFTP protocol is selected in the drop-down menu.
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:
- Add a new paragraph to your web page that tells us what you hope to get out of the course, why you're here, or a funny joke.
- Style your page with fancy colors and graphics the 1990s way (sans CSS, which you won't learn about until next week) - for inspiration, check out this sweet Bruce Lee page (which is basically how all pages looked in '95) or pretty much any MySpace page near you. Make us laugh and receive an extra 0.5 whistles.
- Present a 200 word response to your response to the "Web is Dead" article. Be convincing in order to get this whistle.
- Save the TA some time and implement a Javascript word counter for your essay. To get this whistle, Javascript code on your web site should calculate the number of words in your page when the page is loaded and display the count near your essay. We haven't learned Javascript yet, but a time-honored tradition of the web is cutting and pasting code -- apply the code on this web page to your page.
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.