CST161: Web Site Design

Project 8:  Marlin Internet "Select a Plan"

The "Select a Plan" page for the Marlin Internet website is shown below. Download the files from the previous link and complete the web document following the instructions for the assignment described below.

CST161 Project 8

Complete the following:

  1. Using an HTML editor, open the Project08.htm and Project08.css files from the download, enter your name and the project due date in the comment section of each file
  2. Go to the Project08.htm file in the editor and add a link to the Project08.css style sheet file in the document head
  3. Directly after the paragraph in the article element, insert a web table with the id "pricing"
  4. Add a colgroup element to the web table containing two col elements
    1. The first col element should have the id "firstCol"
    2. The second col element should belong to the class "datacols" and span 4 columns
  5. Add a thead row group element containing two rows:
    1. In the first row, insert five th elements containing the text shown in image above; the first heading cell should span two rows
    2. In the second row, add four headings cells containing the prices of the plans shown in the image above; use a br element to display the price information on two separate lines
  6. Add a tfoot row group element containing a single table row with a heading th element displaying the text "Summary"; add four data td elements containing a description of each of the service plans
  7. Add a tbody row group element; within each row in the row group, add a th element containing the text shown in image above and and four td elements containing the data values for each plan
  8. Save the changes to the file and then return to the Project08.css stylesheet file
  9. Go to the "Table Styles" section and add a style rule for the table element that:
    • Sets the background color to a linear gradient that goes to the bottom of the table background starting from rgb(190, 215, 255) and ending in black
    • Adds a 5-pixels solid gray border
  10. For every th and td element in the table, create a style rule that:
    • Adds a 3-pixel solid gray border
    • Sets the line height to 1.4em
    • Sets the padding space to 8 pixels
  11. For every th element, create a style rule that:
    • Sets the background color to black
    • Sets the font color to rgb(130, 210, 255)
    • Sets the font weight to normal
  12. For every td element, create a style rule that:
    • Sets the font color to white
    • Sets the font size to 0.9em
    • Aligns the cell text with the top of the cell
  13. Go to the "Column Styles" section and create a style rule for col elements with the id "firstCol" that sets the column width to 24%
  14. Create a style rule for col elements belonging to the "dataCols" class that sets the column width to 19%
  15. Go to the "Table Header Styles" section and create a style rule for the thead row group including every row within that row group that sets the row height to 60 pixels
  16. For the first th element in the first row of the thead row group, create a style rule that sets its font size to 2em (Hint: use the first-of-type pseudo-class to select both the first table row and the first heading cell)
  17. For th elements in the first row of the thead row group that are not the first heading cell, create a style rule that sets the background color to transparent and the font color to black (Hint: use the first-of-type pseudo-class to select the first row and the not(:first-of-type) pseudo-class to select headings that are not in the first column of that table row)
  18. Save changes to the stylesheet and then open the Project08.htm file in several browsers to verify that the table layout and design resemble that shown in the image above