CSCI 100 - Homework 5

Cascading Style Sheets

Due by midnight, Friday 09 Nov 2006

Making Folders

Go to your www/csci100 directory. Make a folder called hw05. Inside it create 3 subfolders, pages, images (if needed), and css.

You should organize your files as follows:

Note: you'll be creating your index page at www/csci100/hw05/index.html, not inside the "pages" directory. You could create a skeleton of that now if you want.

Overview

In this project you will be creating some simple (X)HTML pages using floats, positioning, and tables.

3 Column layouts

I want you to create 2 instances of a 3 column "jello" layout -- one using floats and one using absolute positioning. For both, you should populate your layout with some content and contrast the columns from the container and background.

For content, you can always generate sample text using The Lorem Ipsum generator or re-work something from an old assignment. To contrast the columns, you should either give them visibly different backgrounds (image or color) and/or a border.

Float layout: Create a file called float.html that has a header, footer, a left column, a right column, and a main content area in the center. Each of these sections should be contained in a div. Have both the header and footer span the full width of the layout area (all 3 columns). For the "jello" layout, fix the width of the side columns, and either fix the width of the center or use "min-width" to set a lower limit.

Absolute positioning: using absolute positioning, create a 3 column layout in a file called absolute.html that includes everything from the previous layout with the possible exception of the footer (which is optional). If you do include the footer, have it span the width of the main content area, but not the two side columns.

Table example

Create a file called table.html that contains an HTML table. Be sure it has the following characteristics:

Index page

Create a page in the top level hw05 directory called index.html. Have it include links to your float.html, absolute.html, and table.html pages as well as your name and the honor code affirmation.


Template pages

I've put template HTML and XHTML files on the web.

Feel free to use them as starting points.

Verify pages

Verify your pages and CSS files using the online validators:

Resolve any problems that are discovered.

handin

Upload your hw05 folder to your CS account and verify that your pages and images can be viewed online. You will also need to electronically submit your files to me as you should have done in the last assignment.

To do that, there are 2 mechanisms you can use:

  1. Command line tool: if you log into occs remotely, or one of the lab machines, you can just submit all the files that you uploaded.

    To do so, you should perform the following commands ('#' and beyond are comments):

    • cd www/csci100    # go to where the directory you uploaded was
    • handin -c cs100 -a 5 hw05    # class, assign no., directory to submit
  2. Web interface: go to www.cs.oberlin.edu / handin and fill out the form there with your CS username and follow the prompts.