home | contact

CSS exercise: ‘Alice’

The assignment

  1. Make two web documents — alice1.html and alice2.html — containing the first two pages of Alice’s Adventures in Wonderland.
  2. Use CSS to make the presentation more “booklike.”

What you’ll need

Download alice.zip to your local machine. This archive file contains:

  1. alice1.txt: contents of first page (alice1.html)
  2. alice2.txt: contents of second page (alice2.html)
  3. books.gif: background image
  4. rabbit.jpg: illustration by John Tenniel

What to do (in 5 steps)

  1. Format the text documents with HTML tags and save them with an html extension instead of txt.
    1. Omit <body> tags so you won’t have to deal with banner ads!
    2. Both pages begin with a level-one heading containing the book title: Alice’s Adventures in Wonderland.
    3. alice1.html: The heading Chapter 1 is second-level and the chapter title is a level-three heading.
    4. The tilde [˜] character indicates italics. (Replace the tildes with <em> </em> tags.)
    5. At the bottom of alice1.html, add a hyperlink to the next page.
    6. alice2.html: Add a hyperlink to the previous page.
  2. Use numerical entities to replace quotation marks and apostrophes. This text uses British punctuation, so single quotation marks [‘ ’] are used rather than double quotes. The entities are:
    1. &#8216; for an open quote [‘]
    2. &#8217; for a closed quote or apostrophe [’]
  3. Create an external stylesheet named alice.css and use a LINK tag to link your two HTML documents to it.
    1. Choose a “bookish” serif font that you consider easy to read on screen. Make sure your style rules contain fonts that are widely available. (You can refer to the CodeStyle website for guidance.)
    2. The body text should be justified. (Hmm, which CSS property does that?)
    3. Extra credit: In alice2.html set the words Orange Marmalade in small caps.
  4. Now for the images.
    1. Use an IMG tag to insert rabbit.jpg at an appropriate place in alice1.html. The text should flow around the image.
    2. Add a rule to your stylesheet using books.gif as a background image running across the top of both pages.
  5. Use the CSS box properties — margin, padding, border, etc. — to fine-tune the appearance of your pages. What is the simplest way to keep text from running into your background image at the top of the page?

That should keep you busy for a day or two. <grin />

If you want a further challenge, try using the :first-letter and :first-line pseudo-classes at the beginning of each page! If you do, I recommend putting the code in an imported stylesheet in order to hide it from Netscape 4.

Have fun! Let me know when you have questions or run into a roadblock.

top | home | contact
Site hosted by Angelfire.com: Build your free website today!