CPSC 271, Spring 2009:
Assignment 1

The first step in learning web-site programming is to learn the basics of creating web pages: HTML and CSS. So the first assignment in the course is to create a short HTML page and to use CSS to style a longer, existing page. The assignment is due next Wednesday, January 28; you should have the required files on your web site at that time. I should be able to check your files just by visiting your web site; so, other than placing the files on your site, there is nothing to turn in.

Part 1: A Home Page:

You will want to have a home page for this course. As the term goes on, you can add links to the work that you do. For now, you should just get started on the page as an example of a simple HTML file. The page should contain at least your name, a short description of what the page is for, and a link to the file prizes.html that you will work on for the second part of this assignment. I encourage you to add some CSS style to your page, but that is not required at this time. (One nice touch would be to add a background image, perhaps from allfreebackgrounds.com. You'll learn how to use background images with CSS in class on Friday.)

You can create the file with any text editor. The name of the file should be index.html. You should create a directory named cs271 inside the www directory in your account on the math/cs server. The page will then be accessible at the web address http://math.hws.edu/~zz9999/cs271 or http://math.hws.edu/~zz9999/cs271/index.html, where zz9999 has to be replaced with your own user ID.

For a quick overview of HTML, you can read Chapter 4 of Murach's Java Servlets and JSP. In fact, this section covers more than you need to know for now, since you will not need to know about HTML tables or forms for now. On the other hand, there are a few additional things that you will need to know about (the tags div and span and the attributes class and id); we will go over these in class.

(If you already know a bunch of HTML, you can use your knowledge to make a fancier page, but please avoid old-fashioned style attributes such as font and align. Use CSS for style.)

Part 2: Styling a Page

The file prizes.html contains a list of academic prizes and honors in math and computer science at HWS. This file contains pure HTML content, with no CSS presentation styles. It does contain a link to a style sheet file, prizes_style.html, but that style sheet does not exist. The second part of this assignment is to provide the missing style sheet.

To do the assignment, you should obtain a copy of the file prizes.html. You can do this either by saving it from a web browser or by copying it from the file /classes/cs271/prizes.html. Place this file in the cs271 directory inside your www directory. (Don't forget to add a link to it to the home page that you created for the course.) You can then use any text editor to create a file prizes_style.html in the same directory. When you load prizes.html from your web site, the browser will look for prizes_style.html in the same directory as prizes.html.

For a very quick overview of CSS, you might read Section 16.1 of JavaScript: The Definitive Guide. For more information on particular CSS properties, you could refer to the CSS reference at w3schools.com. In fact, we will be talking about CSS in class on Friday, and should cover most of what you need to know to do a decent job on the assignment.