Build Your CRAPPY Webpage

You know that story about how a dad catches his kid smoking, and then makes him go into a closet and smoke the whole carton until he’s sick and never wants to do it again? That’s what this assignment is about. You get to make the worst possible page ever with ALL THE BAD, and so you will never, ever, ever (did I say ever) do them again.

Steps

1. Make a folder called stuff in your course web folder

• Uses a meaningless folder name (stuff means nothing, since that’s what folders are for anyway).
• Puts something in a place that’s hard to find later (you’ll never find something in a poorly named location if you don’t remember it).
• Puts your page in a place that’ll make it hard to link back to your common images and styles folders.

2. Make a webpage file name that has some/all capital letters

• And has spaces and has a weird character, like an emoticon or slash or ampersand (dashes and underscores are NOT weird characters).
• And use a different extension than you normally use (if you normally use .htm, use .html, and vice versa).
  This does several terrible things.

Content & Styling Rules

• Find a really big picture on Google (I suggest Flickr… but search for high resolution).
• Don’t worry about where it came from.
• Embed this in your page using only the <img> tag and size it to fit nicely as 400x400 pixels.
• Mess up the aspect ratio.
• Give it a lousy long name.
• Give it a caption that doesn’t make any sense as a heading (instead of the <caption> tag).
• Don’t put an extension on it (so if it has .jpg or .png remove that). This is terrible because:
  • Images should go in the images folder.
  • You didn’t use the proper extension.
  • The name is meaningless.
  • You shouldn’t just use images that aren’t in the public domain or creative commons.
    Even if you do, you should give the owner/photographer credit and only if you have permission.

Fonts

• Use Papyrus in one place.
• Use Comic Sans in another.
• Use Times in a third (bonus if you can find Comic Papyrus).

Colors & Background

• Use black font.
• Use a white background.
• Leave links with default colors.

Layout & Structure

• Use absolute links to your image and styles.
• Put headers out of order (so an h2 comes before an h1).
• Center a bullet list.
• Center a paragraph.
• Use huge text in a paragraph.
• Use inconsistent margins.
• Use poor contrast.
• Underline things that aren’t links.
• Use a background color on some text.
• Put extra blank lines within the page and even at the end.

CSS & Borders

• Use repeated inline styles when you could use linked CSS.
• Put a really big border somewhere.
• On the border, make all four sides differently styled.