[ See Schedule page for due date. ]

Guidelines

• Use (and know) the XHTML Basic Template found on the COIN 65 Resources page. Be sure to use the XHTML 1.0 Strict Doctype.
• Validate your work using an HTML validator (see Resources page), and also validate your CSS!
• 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 me.
• 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).

Specifics

This assignment asks you to create two separate documents which will give you practice styling boxes for some practical purposes.

• Create a folder named week_5 and save all of your documents in this folder. When the assignment is completed, you will upload this entire folder to your CTIS webspace, and then create links on your home page to each document.
• Put any images into a folder called images.

Document #1 - Callout-type Boxes for Emphasis

Premise - You are creating a normal page with documentation about some subject matter. You would like to have some unique boxes which graphically demonstrate a specific point. These callout-type (emphasis) boxes will look graphically different from the typical documentation.

The boxes you will style - BODY, DIVs, H3 and P (among others) will be boxes within the normal document flow. Do not use any positioning CSS.

1. View the provided markup for this exercise, and copy it.
2. Create a new document in your editor, paste in the provided text, name it callouts.html, and save this in your week_5 folder.
3. Style the body element:
    
   Create a linked stylesheet named callouts.css.
    
   
   • Set appropriate margins for all four sides of the body. I used 2% for the top/bottom and 5% for the left/right, but you can adjust these to suit your taste. The body should have adequate margins on the left and right side.
   • Set a color for the text and an appropriate background color.
   • Set the default font size and font family for the body. Specify a font family(s) you desire but be sure to include a default font family at the end of the list.
4. Style the two H1 headings any way that you want. But do not indent them on the left side... they are the major headings which should be flush against whatever margins you set for the body element.
5. Style the paragraphs to be indented on the left side some amount from the headings. Paragraph text should be justified.
6. Create a DIV class named redBox.
    
   If you look at the markup in the document, the red callout class has a single H3 and a single paragraph within.
    
   So, you should style the H3 and P elements in a contextual manner. The logic is - for a div with the class name of redBox, the H3 heading will look like this... since you have already styled the P element, you may or may not need to adjust it in the context of the redBox class.
    
   
   • Style the H3 inside redBox for proper margins, paddings and borders to make your red box similar to the example.
   • The redBox should be aligned on the left and right sides with the main paragraphs.
   • I used a background color of #f4eaea and a border of red... use whatever you want.
7. Get the redBox class displaying properly before you proceed.
8. Duplicate the redBox style rules and re-name them as blueBox.
    
   It should be a simple matter to then tweak the styles of the blueBox class to make your blueBox look similar to my example.
    
   Note that the blueBox differs in that the heading is indented within the box, and the box itself is indented on the left and right sides from the paragraphs.
    
   I used a background color of #eaeaf4 for the blue box, use whatever you want.

Here is an example of what you might create:

Document #2 - An Advertisement Sidebar

Premise - You want to create a width-sized sidebar containing some advertisement information.

Really, this type of box would probably be positioned. But in this exercise you will just create and style the box in the normal flow.

The boxes you will style - BODY, a DIV, H4 and P (among others) will be boxes within the normal document flow. Do not use any positioning CSS.

1. View the provided markup for this exercise, and copy it.
2. Create a new document in your editor, paste in the provided text, name it advertisement.html, and save it in your week_5 folder.
3. Style the body element:
    
   Create a linked stylesheet named advertisement.css.
    
   
   • Set appropriate margins for all four sides of the body. I used 3% for the top/bottom and the left/right, but you can adjust these to suit your taste. The body should have adequate margins on the left and right side.
   • Set a color for the text and an appropriate background color.
   • Set the default font size and font family for the body. Specify a font family(s) you desire but be sure to include a default font family at the end of the list.
4. Create a DIV style ID named "ads".
    
   First, style the ads DIV so that it is set to 400px wide and is indented on the left side.
    
   Then set the padding of the DIV so that the content inside is some distance away from a border that you will set for the DIV.
5. The markup has an H4 heading and a P tag for each advertisement blurb... you will have to style each of those elements to define what they look like in a contextual way when they are inside the div named "ads".
6. The markup also has an ID named "sponsors" at the top and an ID at the bottom of the named "donate". Each of these should be styled to be centered, red, bold and italic.
7. The goal in this exercise is to style all of the elements within the DIV.
    
   You will have to spend the most amount of time I think on achieving equal spacing between each of the elements in the sidebar and getting the border positioned correctly.
    
   Use whatever fonts, sizes and colors you desire, but I will be grading on the margins and spacing of your result. I will not measure with a ruler but I will expect the different elements to look as if they are equally spaced and have equal padding within that 400px DIV.

Here is an example of what you might create:

Submitting Your Assignment

• Upload your week_5 folder to the server
• On your home page, create a link to each .html document and each .css document. - a total of four links.
• Submit this assignment in ETUDES to tell me you have completed it.