Due Date: Wednesday January 24, 2007 by 10:00 PM (week 3)

This week you will produce two different sets of styles for the same HTML markup. The focus is on using correct syntax, and formatting your code in a clear and readable manner.

Homework Guidelines

• Use (and know) the XHTML Basic Template found on COIN 65 Resources page. Be sure to use the XHTML 1.0 Strict Doctype.
• Validate your work using an HTML validator (see Resources page).
• Put any images into a folder called images.
• Write your own code. This pertains to this assignment and any other you receive in this class. Do NOT use our (or anyone else's) code. If you do, you will fail the assignment. If you have any questions about this, see the Foothill Honor Code and/or contact us.
• Be sure to test your work. We will be testing and grading your work in Firefox, Netscape 7.X and/or Safari. We strongly suggest you upgrade to the most recent browser(s).
• Do NOT name any file you upload this quarter index.html. We need to be able to look in your directory and see the files and dates/times the files are uploaded.

Specifics

This homework will give you practice in some of the most common CSS syntax and style properties as you combine them with XHTML. Follow these specifics to create Homework 2.

You will be using the Lab from last week and creating 2 separate HTML documents from it. One document will use embedded CSS, and one will use linked CSS.

Part I

• Save Lab 1 as a new XHTML document called homework_2a.html.
• Be sure to use the Strict DOCTYPE.
• Create a week_2 directory and put this file into it.
• Use an embedded style sheet, and style the markup (HTML) as follows:
  
  

  Tag	Style
  body	background color ccffcc color 006600 margin 25 pixels
  logo div	centered
  h1	margin top 35 pixels uppercase (use CSS!) centered
  h3	text is underlined
  p	indent the first line 20 pixels
  links	no underlining
  unordered list	use the smball.gif image from this week's lab for the list marker
  ordered list	background color ccffff color 006666
  footer div	centered

• Save, test and validate the document.
• Upload the finished file to your web space.
• Create a link to homework_2a from your Home page.
• Except for fonts, Part 1 should look very similar to this image:
  

Part II

• Again, save Lab 1 as a new XHTML document called homework_2b.html.
• Use the Strict DOCTYPE.
• Put this file into the week_2 directory.
• Use a linked style sheet, and style the markup as follows:
  
  

  Tag	Style
  body	background color white color 000066
  logo div	background color 000066 color white centered lower case (use CSS!)
  h1	color cc0000 centered
  p	margins 50 pixels justified
  ol	left margin 70 pixels background color 000066 color white list marker Roman Numerals upper case
  li within the ordered list	margin bottom 15 pixels
  ul	left margin 70 pixels list marker square
  li within the unordered list	margin bottom 25 pixels
  p within the footer div	aligned right

• Save, test and validate the document.
• Upload the finished file to your web space.
• Create a link to homework_2b from your Home page.
• Except for fonts, Part II should look very similar to this image: