Build a frameset

Although there are those who say flatly that HTML frames are evil, there are cases in which they may help a user access a large amount of information relatively easily.

This is one of those cases.

Your assignment: Build a frameset containing “answers” to the riddle “Why did the chicken cross the road?” The finished document should look something like this screenshot.

What you’ll need: Download chicken.zip and unzip it to your local web directory. The archive contains:

• an HTML document, f_list.html, which will go in the list frame of the frameset you will make.
• a folder, chicken, which contains 36 HTML documents, a stylesheet, and two image files.

What you should do:

1. Write the following three HTML documents.
   1. f_question.html will go in the question frame. The content is: Why did the chicken cross the road?
   2. f_main.html will go in the main frame. The content is: Choose an answer from the list at left . . .
   • The image on this page is at chicken/chickrun.gif
   • Try linking this page to the stylesheet chicken/frameset.css — and/or add your own style rules.
   3. frameset.html is a frameset structured like this:

      question
      list	main

      Name each of the frames as shown. The sizing of rows and columns is up to you.
2. Make sure the frameset works.
3. Write some <noframes> content in frameset.html.
4. Use CSS to style f_question.html, f_main.html and the <noframes> element in frameset.html. You may choose to:
• put an embedded style sheet in each document (simplest)
• write an external stylesheet for all three
• or link the documents to chicken/frameset.css and add or change rules (if you’re a CSS junkie already!)

Optional: Feel free to add pictures to the “answer” documents. Here are a few I found with the Google image search engine:

• Chicken Crossing
• Caribbean scene
• Child’s drawing
• Chicken and road
• Small photograph

(The “answer” documents are all linked to the chicken/frameset.css stylesheet, which “floats” images to the left by default. Place the IMG element above the text and it should work fine. We’ll study the float, margin and padding CSS properties later.)

That’s all. Have fun!