RGB, Tables, and Inline CSS due Thu 07 Sep 13:20

\begin{purpose}
In this assignment you will:
\begin{itemize}
\item Learn abo...
...ML \verb\vert<table>\vert to display tabular data.
\end{itemize}
\end{purpose}

Preparation for Lab Day

In preparation for lab day, do these actions:
  1. In your webspace on csci.hsutx.edu create a directory named hw02 in which you will put all of your labday #2 and homework #2 work.
  2. Visit https://www.addedbytes.com/blog/rgb-colours-for-beginners and carefully read the description of RGB colors.
  3. Copy your hw01/widgets.html file into the hw02 directory. and edit it (using inline CSS commands only) as follows:
    1. Change background color of the body to be #eee8d5. The text color should be set to #777.
    2. Add additional commands to set the body to a width of 960px and margin to auto center it in the browser.

On Lab Day

  1. Begin by showing your prep work to the instructor.

  2. Continue working on your hw02/widgets.html document to produce a layout similar to the one pictured here. Be sure to read the textual description below.

    Menu
    link #1
    link #2
    link #3
    link #4
                     
    Main Title
    Two (or more) paragraphs of lorem ipsum ...
    Model Cost Qty
    A-style $10.99 5
    Q-style $50.00 2
    #5321 $10.99 10
    Gold $2700.00 1
    A List
    List Item #1
    List Item #2
    ...
     
                     

    1. The left column menu should be 200px wide with a 10px padding on all sides assigned to an inner div. Use an h2 header for the header. The menu should contain at least 3 clickable links to other pages.
    2. The middle column should be 540px wide and have a centered h1 header. The column should have to divs each 270px inside of it and each of those should have their own inner divs with 5px padding on all sides.
    3. The left half of the center column should have two paragraphs of lorem ipsum.
    4. The right half of the center column should have a <table> whose content matches the example above. To learn how to specify a table visit

      http://josephus.hsutx.edu/classes/w1/source/tabledemo.html

      and compare the source to the output.

    5. The rightmost column should contain the list you created in the previous lab day assignment. It should use an h2 header for the list title.
    6. Add a footer (not pictured above) that is 540px wide and appears directly under and aligned with the center column. There should be 10px separating it from the longest column above. It should have a background color of #268bd2 with white text.
    7. The background color of all three panels should be #fdf6e3. All the headers should have a text color of #859900.

  3. Show your work to the instructor.

Quick Links