CSS Selectors and Forms due Tue 19 Sep 13:20

\begin{purpose}
This assignment continues the use of CSS selectors provided in ...
...s. Finally,
you will use a validating parser to check your code.
\end{purpose}

Instructions

This assignment continues the work started on lab day. Continue to refer to the diagram provided in

http://josephus.hsutx.edu/classes/w1/source/poemlayoutblock.png.

As with lab day instructions this diagram serves to provide the big-picture structure of the assignment while the instructions below contain the specifics. All CSS commands should be placed in the external document (i.e., do not use any inline CSS). Make the following changes to your HTML document started in lab day:

  1. (3 pts) Provide a logo or image in the left panel of the header. The image should be sized appropriately.
  2. (1 pt) Give a title to the page in an h1 in the center header panel. Title should be something about poems. Apply a CSS border of your choosing to the h1 tag.
  3. (2 pts) Put some contact info as an unordered list (ul) in the right header panel. Give your name a different color/look than the rest of the entries.
  4. (2 pts) Create a menu with looks to sites with poems in the navigation panel on the left. The links should change color when hovered over with a mouse.
  5. (1 pt) Add some lorem ipsum to top section. Along with appropriate padding for it in the panel.
  6. (4 pts) In the bottom section modify the form to include a radio button where the user can indicate their level of experience in writing poems. Provide three or four levels from which to choose. As indicated in lab day instructions the form should be displayed with elements lined up nicely and should post to a mailto action. Add some CSS commands to adjust the background color of the text boxes and textarea to give custom background and font settings.
  7. (2 pts) In the aside add a short poem of your choosing. If using a haiku be sure to format properly. Be sure to indicate the poem's author.
  8. (2 pts) Customize the content and look of the footer which will identify you as the brilliant builder of the page.
  9. Choose colors for page background, panel backgrounds, and text that you think look good. The panel background colors should be different than the page background color (even if only slightly). Also take time to play with CSS commands to improve the overall look of the page.

Once you have the page looking the way you want. Take a moment to check the validity of your code by running it through the W3C Markup Validation Service: https://validator.w3.org/. Make whatever changes are recommended until there are no errors.

Grading

Your homework will be graded as follows:

Completeness 20 pts
Aesthetics 4 pts
Validation 2 pts
Total 26 pts

As always, have fun!

Quick Links