Save your XHTML template file as Aesop.htm, and title the page, "Sarah Strong's Fables" (changing Sarah Strong to your own name). Make sure your name is listed as author.
Open file aesop_fables.txt, copy the text, and paste it into the body of your HTML file.
Each fable consists of three parts:
- Title
- Story
- Moral
You will be formatting each part with its own unique style, but first you will need to make each part a separate entity. So...
- Add <h1> to the title of the first fable, and </h1> to the end of it.
- Add <p> to the beginning and </p> to the end of the story part of the first fable.
- Add <p> to the beginning and </p> to the end of the moral part of the first fable.
- In the same way, mark up the title, story, and moral of each of the remaining three fables.
- Check in a browser to make sure there are four separate stories, each with their three parts.
When it looks good, go on to the next part. You will be adding styles to the <h1> and <p> tag of each part of each fable. Consult your textbook or the "Style Toolkits" in module X20b for the syntax necessary to format according these instructions.
We'll format this in a conservative but attractive manner.
Title: 14 point Verdana, Arial, Helvetica, or sans-serif
Note: a "point" is a printers' measure equivalent to 1/72
of an inch. In CSS, it is abbreviated pt, like this:
font-size: 14pt;
Story: 11 point Georgia, Times New Roman, or serif
Moral:
Same font and size as the story, font-style italic.
Make the word "Moral" strong.
On this fable, let's put in interesting colors. Use the same fonts and sizes as in the first fable, but add:
Title:
Medium green: #009900
Make the background pale yellow: #ffffcc
Strengthen the title by making the font-weight bolder
Story: Medium teal: #009999
Moral: Strong red: #cc0000
In the third fable, we'll add borders and text alignment.
Title:
Center the title
Around the tile, put a border 3 pixels wide whose color is dark brown: #663300
Make the background pale brown: #ffcc99
The text should be the same color as the border
Font-family Georgia, Times New Roman, or serif
Size 18 points
Story:
Justify the text
Put a bright yellow border 1 pixel wide around the story: #ffff00
Use font-family Verdana, Arial, Helvetica, or sans-serif
Size the font to 10 points
Moral:
Right-align the moral
Put a bright red border 2 pixels wide around the moral: #ff0000
Use the same font-family as the story, but make it 11 points
Make the background strong red: #cc0000
Color the text bright yellow: #ffff00
For the fourth fable, experiment with colors, alignments, sizes, and fonts.
Title: Large and colorful
Story: Remember this is about a lion - use appropriate colors
Moral: Be creative!
When you're done, double-check that the assignment meets the specifications above, and that all links are functional.
Attach your file (Aesop.htm) to email to the instructor. Be sure your email meets the formal requirements: name, class, section and exercise (x20h), and that it follows standard business-email practice. (Printed output is not required for this exercise.)