CSc 473 Fall 2007

HW1, due Tuesday, September 4, 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.
• All text should be a dark brown of your choice. I'll show you how to experiments with colors, but for a starting point try: #304040. I don't much like that color, actually, but it gives you something to start with. (What is brown, anyway?)
• 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 2 em. (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.)

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, at http://ccnyddm.com/XHTML+CSSAppendixHomePage.htm. Or see the handout. Added 8.30.2007: Oops. There are security issues here, with checking that didn't exist when I wrote the homework a few years back. You have all the code on the CD. (Note: the assignment changes in subtle ways from semester to semester. There are no traps here--not if you are doing your own work.)

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 http://ccnyddm.com/XHTML+CSSPages/MeasuresOfLength.html for a list of the options. Relative measures are preferred, in many cases. Added 8.30.2007: Hmm. There are issues with embedded links. May have to copy to address of an open browser.

You submit an HTML file and a CSS file, as email attachments. NOTE to Yahoo users: You really must ZIP the files. What I get is a mess if you don’t.