Here are some thoughts about HTML for those of you who want to do fancy things, for fun or for the contest. We encourage you to be creative in your web page designs ... but throbbing lime green text is likely to produce migraines for the poor graders. With this in mind, we have prepared a few pointers for you on web page design. Look on these as suggestions for improving the mood of the person grading your project. :-)

Also, if you're just using what we showed you in recitation, you don't need to worry about this at all; with those tools, you won't accidentally create something that will hurt the grader's eyes.


Some Guidelines to Writing Good HTML
(for those of us who aren't graphical designers)

When you write HTML, there are a lot of fancy things you can do to your text. Some of these are very nice. Some are just distracting. Distinguishing between these is subjective, of course, but here are some guidelines.

  1. Differences in text appearance should indicate something about the text itself.

    For example, putting key phrases in red so that they stand out can be helpful. Designing text colors so that you can stand back from the page and see a rainbow is distracting. Or, if you have a list of things to present, putting them in an HTML list is definitely a good idea. Starting each list item with a brief description of its topic in strong text (such as "Problem 1" or "Thoughts on Cooking") is often helpful. Putting every third item in strong text is distracting (and misleading).

    The examples may sound a little silly, but the concept is important. The specifications you make about the look of your text should reflect its meaning, organization, and significance. If they don't, the visual effects will end up distracting readers from the content of your page.

  2. Text shouldn't move. If I'm trying to read something, I don't want it to blink or dance across the page or do anything else fancy that interferes with my ability to see it clearly.

  3. Use animation sparingly. Don't animate something you want people to read (see 2), but the occasional animated graphic can be cute. Too many of them will distract the reader from the actual content of the page, though, and don't integrate them with the text by using them as bullet points or something. (Also, spinning things make me seasick.)

  4. Ideally, you should use the logical descriptions HTML provides, rather than visual ones, whenever appropriate. For instance, to emphasize text, use <em> (emphasis), not <i> (italics). Most browsers display them the same, but you should leave that decision to the browser. (Not all italicized text is emphasized; if something is italicized because it's a foreign word, for instance, <em> is not the right choice.)

    As a practical matter, when will this make a difference? There are two primary scenarios: someone is searching the HTML itself for important phrases or something of the kind, or someone has a browser that accommodates special needs. For instance, a blind person might have a browser that renders emphasized text aurally; it's helpful then to know which text is really emphasized and which is in italics for other reasons.

  5. Using color is nice, but make sure to keep the contrast between text and background high. If you want to be very thorough, a good test is whether the text is clearly legible on a black-and-white monitor.

  6. Some people use tables as a way of doing precise page layout. Don't copy them. It's much better to provide a description of the elements of your page and let the browser decide on the layout details. (See 4.)

    There are probably some cases in which an insistence on precise visual formatting makes sense, but this assignment is not one of them.

  7. Within these guidelines, go ahead and be creative! We don't mean to scare you off from doing anything fancy. Just keep in mind that someone is going to have to read the page in order to get information from it, not just see whether it looks cool at a glance; that means that you shouldn't necessarily do everything you can do.