CSc 473 Spring 2008

HW1, due Tuesday, Feb 5, will be to produce a Web page with the following characteristics:

• Your name as an h1 head
• An h2 head How I Get To City College
• A paragraph describing the trains/buses/walks/drives/whatevers you do to get to school, with approximate times.
• An h2 heading My Courses
• A definition list (dl), giving course numbers and names. The course number should be in a <dt> (definition-term) tag pair, and the course title in a <dd> (definition-definition) tag pair.
• Another h2 heading "My Senior Capstone" followed by a paragraph giving the name of the professor and the subject of the capstone project. If you don't have all the data, just say so. And if you aren't to the point of registering for a capstone, just say that.
• Another h2 heading, "I'm Going to Graduate!", followed by a short paragraph giving your major and your expected graduation date.
• All text should be a dark blue of your choice. I'll show you how to experiment with colors, but for a starting point try: #304080. I don't know whether I like that color or not, actually, but it gives you something to start with.
• The background color should be some pleasing (your definition) color, not so light as to hurt peoples’ eyes but providing enough contrast for easy reading.
• There should be 10% margins on the left and right. The top margin is your choice.
• Indent the first line of each paragraph of the body by 0.5 inch. (Normally, all such values will be specified in ems, where an em is a relative linear measure, equal to the width of a capital letter M in the font being used. Quite useful; we’ll discuss. I'll make it absolute here to we can see and discuss the effect as the user resizes the browser window.)

All style information is to be placed in an external style sheet. You decide how large to make the heads, and what fonts and font sizes to use throughout. The font or font size for the definition list would not have to be the same as those for the rest of the body, if you wish.

All the techniques you need are explained in the appendix, but if you don't have a copy of the text you could learn everything by studying the examples from the appendix materials on the course CD.

NOTE: you may NOT use a table to get the effect of the definition list; you must never position things by hitting the space bar until they look about right, and the <pre> is not acceptable here. There will be no legitimate use of the <br> tag in this HW.

Indenting the first line of each paragraph is a simple matter of including a rule for the <p> tag:

p {

  text-indent: 2em;

}

Plus anything any other declarations you may have in your <p> rule, of course. I’ve specified the amount of indentation with the em, a relative measure, but you could use inches, centimeters, points, and others. See the MeasuresOfLength example in the appendix.

You submit an HTML file and a CSS file, to Blackboard. If you know how to do that, be prepared to help the rest of us!