Exercise Nine

Overview

For exercise nine, you are given two differing HTML files. Your task is to make their appearance the same by linking them to an external style sheet.

Remember to take Quiz 9 on Blackboard Learn+ as well.

You must fill out the exercise feedback form to receive credit for any assignment.

Details

  1. Download these two HTML files, nonsense.html and sayings.html (right click PC/control click Mac) on the file links and choose to "Save as."
  2. Create a CSS document and link it to both pages.
  3. Change "Your name goes here" to your name in the first paragraph of each page.
  4. Complete the links back and forth from nonsense.html to sayings.html, complete and change the names of "your index page" links. All these links are in the first paragraph of each page.
  5. Style the pages. There are five general areas to each page; the body, the assignment header section, the content area, the style checklist area, and the validation buttons. You will see the areas when you look at the HTML code of the pages, they are identified with commented text (except the body).
    • In general
      1. Apply CARP to your design.
      2. Make sure your line lengths are appropriate.
      3. Follow specific requirements listed below, other design decisions are yours.
      4. Have fun!
    • Make the body
      1. Have a different background color than white.
      2. You may choose to have a background image as well.
    • Make the assignment header section
      1. Have a different background color than the body or content areas.
      2. You may use a background image if you like.
      3. Use a san-serif font that is sized a bit smaller than the content area text. Make sure to choose at least two more fonts to back up your preferred selection in addition to the generic Sans-Serif at the end.
      4. Choose a color for the text that contrasts well with the background color/image.
      5. Make the links the same color as the rest of the text in this area and make the links change when the user mouses over them by using a pseudoclass.
    • Make the content area
      1. Have a different background color/image than the body.
      2. Use a sans-serif font for body text. Make sure to choose at least two more fonts to back up your preferred selection in addition to the generic Sans-Serif at the end.
      3. Use a serif font for headings, make sure to "back up" your font choices.
      4. Use a graphical bullet for the unordered list instead of the default bullets.
    • Make the style checklist area
      1. Have a different background color/image than the body and content area.
      2. Use a sans-serif font. Make sure to choose at least two more fonts to back up your preferred selection in addition to the generic Sans-Serif at the end.
      3. Choose a color for the text that contrasts well with the background color/image.
    • Make the validator buttons
      1. Align horizontally in the center of your creation.
      2. Use a sans-serif font used for body text but a bit smaller. Make sure to choose at least two more fonts to back up your preferred selection in addition to the generic Sans-Serif at the end.
      3. Choose a color for the text that contrasts well with the background color/image.
      4. Make the links the same color as the rest of the text in this area and make the links change when the user mouses over them by using a pseudoclass.
  6. Upload your pages and style sheet. Make sure the pages' HTML and CSS validate.
  7. Fill out the exercise feedback form and you are done. You must fill out this form to receive credit for each assignment!

Conclusion

Standardizing the look and feel for a web site and applying it to existing work is a problem you will encounter often as clients with older websites seek to update them. Thoughtful use of <div> tags allow you to apply your styles with the minimum of extra coding.

Exercise Nine Feedback Form

Will appear on April 3

bottom graphic for DM 60A pages