CS 312 - Internet Concepts
Fall 2011: Tues/Thurs 3-4:15pm, Dragas 1117

Print - Admin





Useful Links

Project 1: HTML and CSS

Assigned: Thursday, Sep 29, 2011
Due: Thursday, Oct 13, 2011 before midnight

The goal of this assignment is to start working towards the final project -- a set of webpages that allow a user to manage and search a personal media collection (CDs, MP3s, DVDs, video games, etc.).


The projects this semester will build upon each other to produce a set of webpages that provide searchable access to a personal media collection. The type of media (CDs, MP3s, DVDs, video games) is up to you. The website should be tailored to the type of media you will be storing, so you should make that decision now.

In this assignment, you will create the basic layout and stylings for your webpages using HTML and CSS.


You will create three pages, named index.html, add.html, and search.html. The index page will show a table of your current media collection. For now, the add and search pages will be place-holders for later projects.

Your pages must have appropriate titles (specified in the <head> section of your HTML source). All of the pages must be styled using the same external CSS file.

Your CSS layout must include the following sections:

  • header
    • contain the name of your collection website and the name of the page (text specified in HTML)
  • navigation
    • provide links to each of your Project 1 webpages (text specified in HTML)
  • footer
    • must contain "Website designed by Your Name" and "Last modified: date" (text specified in HTML). For now, just hard-code the last modified date in your HTML. We will discuss how to set this automatically when we cover JavaScript.
  • content
    • described in separate sections below

Index Page

  • Create a table of at least 5 media items.
    • Include appropriate columns for the type of media that you have chosen.
    • You must include a thumbnail image for each item and the image must be a link to a larger version of the image.

I've included an example below. Your pages should look different than this, but this one has all of the required elements.

Add and Search Pages

These pages should have all of the standard elements (CSS sections as outlined above) and for the content part just a note that says it's a placeholder.

Examples are below:

Setting Up

Here are the steps to get started:

  1. Create a directory (or folder) named cs312 under your ~/public_html/ directory in your CS Unix account.
  2. Set appropriate permissions on the directories.
    • chmod 755 ~/public_html
    • chmod 755 ~/public_html/cs312
  3. Create an HTML file named index.html under ~/public_html/cs312
    • touch ~/public_html/cs312/index.html
    • chmod 644 ~/public_html/cs312/index.html
    • This file can remain blank. It prevents people from being able to browse your cs312 directory without knowing the exact URLs.
  4. Create a new directory under ~/public_html/cs312/ for this project
    • chmod 755 ~/public_html/cs312/new directory name
  5. Create a CSS file in the new directory
  6. Create an HTMLs file named index.html, add.html, and search.html in the new directory
    • chmod 644 all files that you place in the new directory


  • Edit your HTML and CSS with a simple text editor (no Word or any other fancy tools allowed).
    • examples: emacs (on Unix machines), pico (on Unix machines), Notepad++ (on CS Windows machines)
  • Remember to use tags that are acceptable for XHTML (all lowercase and include closing tags when required).
  • For full credit, your code must pass XHTML 1.0 Transitional validation.
  • All work must be your own. You are not permitted to copy stylings or layouts from other sources.


Go to the Project 1 Submission page, and enter your name and the URL of your website (should start with http://www.cs.odu.edu/~username/cs312/).

  • Make sure that the URL works before you submit it.
  • Only submit your URL once!