Project 2: Basic XHTML

Assigned: Thursday, October 8, 2009
Due: Thursday, October 15, 2009 before class

Setting Up | Description | Requirements | Submission

The goal of this assignment is to create a company website. We'll be using this website as a basis for practicing other web design techniques throughout the semester.

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. Create a directory for this project in ~/public_html/cs312/.
3. Create a file named index.html that will be the home page of the company website in the project 2 directory that you just created.
4. Set permissions so that the directories can be accessed by anyone:
   chmod 755 ~/public_html/cs312
chmod 755 ~/public_html/cs312/project 2 directory
5. Set permissions so that the webpage can be seen by anyone (you'll need to do this for each new page that you create):
   chmod 644 ~/public_html/cs312/project 2 directory/index.html
6. Sign up for Google Analytics
   • Go to http://www.google.com/analytics
   • Click the "Access Analytics" button
   • Sign in with your google acccount (you created it when you signed up for blogger)
   • Click the "Sign Up" button
   • Enter information about the website you want to track:
     • URL: http://www.cs.odu.edu/~username/cs312/
     • Name: CS 312
     • Time Zone: Eastern
   • Enter your contact information (you don't have to enter everything)
   • Agree to the service agreement
   • Copy the code in the Tracking Instructions box and paste it in your index.html file just before the </body> tag at the end of the file

Description

You are in charge of designing a website for Dan's Disco Discs. As the name implies, they specialize in selling disco CDs. The company wants a home page, an inventory page, a disco information page, and a contact page.

The site map is shown below:	The sample page layout is shown below:

In this assignment, you will be creating content for the home page (index.html) and the disco info page (disco.html). Don't worry that the pages look simple. We'll work on making them prettier as the semester goes along.

Requirements

• Edit your web pages with a simple text editor (no Word or any other fancy tools allowed).
• Use XHTML 1.0 Transitional. Your pages must pass validation.

Home Page

• The page must have a descriptive page title (the company name would be a good choice).
• Logo: Use the <h1> tag for the company logo (just the name of the company for now).
• Navigation: Use bold font (<strong>) to put links to the pages in a paragraph:

• Content:
  • Place each line below in its own paragraph:
  Dan's Disco Discs stocks new and used CDs from the greatest era in music - 1970s disco.
  Our guarantee - if it's disco and we don't have it, we'll find it for you.
  Our vast inventory includes disco legends such as:
  • Place the following in an unordered list:
    • ABBA
    • Gloria Gaynor
    • Andy Gibb
    • Donna Summer
• Contact information: The address and phone information should be displayed in small text.

• Footer: Use small text size and emphasized font style for the copyright information:

• The home page should look something like this:

Disco Info Page

• Base this page off of the index.html page so that you don't have to re-type everything.
  • Hint: Open index.html and save it as disco.html
• Modify the page title to Dan's Disco Discs::Disco Info
• Remove the content paragraphs, unordered list, and contact information
• Add disco info content to the page:
  • Put the words Disco Info in an <h2> element
  • Put the following in a paragraph:
    We love disco!!
  • Put the following phrase in an <h4> element: Disco FAQs
  • Use a definition list to configure the FAQs. Use <dt> for the questions and <dd> for the answers. The questions and answers are below:
    • What is disco?
      • Disco is a style of dance music that became popular in the 1970s.
    • Has disco influenced other types of music?
      • Several current styles of music, including House and Techno, evolved from disco.
    • What are some good disco websites?
      • discomusic.com
      • wegotdisco.com
      • dance70.com
    This should be an unordered list where each element is a link to the named website.
• The disco info page should look something like this:

Inventory and Contact Pages

• Use disco.html as a template for inventory.html and contact.html
• Delete the content section and replace it with the phrase "Under construction" in a paragraph.

Submission

Go to the Project 2 Submission page, and enter your name and the URL of your webpage (ending in index.html).

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