Save your XHTML template file as x22h.htm, and title the page, "Sarah Strong CSS Layout" (changing Sarah Strong to your own name). Make sure your name is listed as author.
In your browser, open the Aesop's Fables text file. (http://courses.wccnet.edu/computer/mod/aesop_fables.txt). Select the entire text, and paste it into the body of your x22h.htm file.
In the <head> area of your html file, create styles for the following specifiers:
- body: Indent the left margin by 100 pixels, the right margin by 50 pixels. Give the body a background "tan" color.
- h1: Make the height 1.2 times the font size, with a font-size of 20 pixels. Make the width 100% of its parent element (the body), and position it 50 pixels to the left of where it would have been. Give it a background-color of brown, yellow text, and a medium "double" border. Set the margin to 8 pixels.
- h2: Make this 1.1 times the font size, with a font-size of 18 pixels. The width should be 80% of the parent element, positioned 25 pixels left of its parent element, the body. Color it brown with yellow text, and give it a thin, "dotted" border. The margin should be set at 5 pixels.
- p: Give paragraphs a font size of 15 pixels, text color of brown.
- img: Place images 95 pixels left of their parent element, and give them a thin, solid, yellow border.
- .quote: Indent quotes 10 pixels from the left edge and 10 from the right edge of their parent element. Their top and bottom margins should be 5 pixels.
- .moral: Give morals a 20 pixel margin all around, with a thin, red, dashed border. Pad them with 5 pixels, and make their text red italics.
Extra Credit: 15%
- Place a named anchor at the title of each story.
- Create a table of contents 50 pixels wide, using 12-pixel type, linking a short form of the name of each story to the anchor for that story.
- Give the contents box a distinctive color and a thin decorative border.
- Fix the contents box in the upper right corner of the browser window, so that when the user scrolls, the contents box remain in the upper right corner of the window (in browsers that support fixed positioning).
Add a title as <h1>: "Fables from Aesop, formatted by Sarah Strong" (replacing Sarah's name with yours, of course).
Format the text as follows:
- Each story title: <h2>
- The body of each story as <p>
- When people speak, make their words a separate paragraph with the quote class.
- Make the morals paragraphs with the moral class.
- Add the following images to the appropriate stories, at the beginning of the first paragraph:
When you're done, double-check that the assignment meets the specifications above, and that all links are functional.
Upload to your work to your WCC student Website, and send email to the instructor with the URI. Be sure your email meets the formal requirements: name, class, section and exercise (x22h), and that it follows standard business-email practice.