• To do this assignment:
  • Refer to the table examples provided on our class FAQs page.
  • Refer to the CSS Slides on our class Summaries page.
  • Refer to www.w3schools.com/css.
    Follow the CSS Basic Tutorial - you can ignore the sections on Outline, Lists, and Tables.
    Follow the CSS Advanced Tutorial for the CSS Pseudo-class section about hyperlinks.
    
• This assignment requires you to create two Web pages that contain the items listed below as well as a separate CSS file. The first Web page should be accessed by selecting a hyperlink for Assignment 5 from your homepage.
• As in the previous assignment, we will be looking for good coding style in your Web pages: useful comments, tags that are formatted in a style consistent with XHTML, and code that is easy to read. The pages must validate for both xhtml and CSS.

1. The first Web page is set up for you already - you just need to make the necessary changes to it as indicated by the comments within the code. You will also need to create a file called mystyles.css that will be located in the newly-created CSS sub-directory of your public_html directory. Here is a summary of what you will be doing:
   1. View the first Web page and then view the source code. Copy the source to your public_html directory and call it assgn5a.html. Change the permissions so that the page is viewable on the Web.
   2. Add a link to assgn5a.html from your home page.
   3. Make the changes indicated in the comments in three places in the file (the three places are identified by comments).
   4. Create a CSS directory in your public_html directory and change the permissions on it so that it is world-readable and world-executable (755 or og+rx).
   5. Using pico, create mystyles.css in your CSS directory. You will include rules in this file to add presentation details to your assgn5a.html Web page. Use comments to describe what you are doing in this file. I have added some divs with class names to the assgn5a.html file so that you can make changes to those classes as well as any of the XHTML selectors that are used on the page. Things that you are able to change include:
      • the body of the document
      • paragraphs
      • the citation
      • h1, h2, and h3 headings
      • hyperlinks
      • an unordered list
      • header, story, and footer classes
      Change at least ten elements using rules in your mystyles.css file (for instance, the body would constitute one element, hyperlinks would be another element). If you name everything properly (as directed in these instructions) the rules should be linked into the assgn5a.html file for you using the link tag in the head of assgn5a.html.
2. The second Web page should be called assgn5b.html. It should contain the following:
   • A heading and title that identify the page as Assignment 5b and your name and section number.
   • A relative link back to the page that originally linked to it (which is assgn5a.html).
   • A calendar of your birthday month for your next birthday coming up (so for some of you it will be in 2009 and others will be 2010). Include days of the week at the top of each column and the name of the month spanning across the top of the calendar (that is, in the first row within the table). Indicate your birthday as well as any other holidays during that month on the day. For those of you who have birthdays in August, you can mention that August 15 is the birthday of Napoleon Bonaparte as the holiday. :-)
   • Use embedded CSS rules in the head of the document to change the following things:
     • background color and/or image
     • margins
     • font
     • links
     • table presentation
     • plus any other features you want to change...

© McGraw-Hill 2007. All rights reserved.