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

This project will be completed in two stages.

This week you will create a simple and valid XHTML document with no styles, except where instructed below.

In week 2 you will receive additional instructions for styling specific portions of this document. You will then upload the document to your CTIS web space.

Although this assignment is not due until week 3, you will gain the most benefit from this assignment if you start early, giving yourself plenty of time to think about the process. Start now!

Create the basic XHTML document by following the instructions below.

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

• Name this document home.html
• Make your page resemble the example image below, with content that matches that of the example.
  
  Note that the example image is scaled-down to make it easier to view. Do not be concerned with the font-size, font, etc. You will be given additional instructions in week 2 to update this page with additional styling.
• home.html will be a valid XHTML 1.0 Strict document. It will contain no CSS (no in-line, embedded, or external stylesheets), except for two instances specifically described below.
• Use a DIV tag with a unique ID for each major segment of the document.
  
  In the example web page below, the XHTML document contains DIV elements with IDs named "header", "pageTitle", "content" and "footer". For your document, use any names you want, but make the ID values concise, legal, and descriptive of the content they represent!
• Use heading tags, H1, H2, H3, etc., where appropriate.
• Use comments appropriately. Include and customize the comment in the HEAD tag from the template. Also include starting and ending comments for each major DIV element in the document to aid in locating the boundaries of each major segment of the document. Use comments to describe any 'tricks' you are using, or challenges that you solved.

Centering Content in the Header and Footer

Notice, in the image of the example page below, that the content in the header and footer sections is centered. Under the XHTML Transitional DTD used in the COIN 61/63 courses, elements would be centered using an HTML attribute. For example:

<p align="center">Your Name Here</p>

Under the XHTML Strict DTD used in this course, the align HTML attribute has been deprecated. Thus, align cannot be used; applying this attribute will cause an HTML validation error ... all assignments in this class must pass validation before being submitted.

The solution is to use CSS to center the content. Although you are not to use CSS for this assignment, using CSS to center the content is allowed for centering the header and footer.

One of the major advantages to using DIV elements for specific content is that you can then style a DIV. Because DIV elements are block-level containers, child elements within a DIV then inherit those properties. This is an example of Cascading/Inheritance which is the "C" in CSS and is covered in more detail later in the quarter.

So, to make all of the content inside a DIV centered, you simply do this:

<div id="header" style="text-align: center;">

Setting the WIDTH of an HR

Under the XHTML Transitional DTD, you specify the width of a horizontal rule using the width HTML attribute. For example:

<hr width="60%"  />

However, the width HTML attribute is deprecated under the strict DTD, and will cause a validation error. You must use styles to accomplish the same effect. Either of the following is legal:

<hr style="width: 300px;"  />
<hr style="width: 40%;"  />

The Logo Image at the Top and the Links

DO NOT use an image map for the links at the top and bottom of the page. Instead, the links should be text links... we will cover how to style them later. For now, just create normal A HREF type links and use relative links to these pages from your account on the CTIS server (covered in week 2) to our pages on the COIN 65 site.

You are free to create your own image for the logo at the top of the page. You may use our image as displayed directly below. Simply drag the image below to your desktop. The size of the image is 516 x 52 pixels.

An Example of a Completed Assignment

You will create a page that resembles the image below. Remember that this is a scaled image and much larger in real life! Again... do not sweat the small details, you will update your file during the second week! Use clean and valid XHTML code with no CSS, other than the exceptions noted above.

Submitting this Assignment

This assignment is due at the start of week 3.

You will receive additional instructions during week 2 which will include specific styling you will need to add. During week 2 we will cover your CTIS web space and the procedures for accessing and uploading your file(s).

Get started on this document NOW!