Assignment-HTML-CSS-Forms

In this assignment you will make a simple HTML page, styled with CSS that has a pair of forms, one which submits via a POST and one which submits via a GET.

##Instructions

• Make a new repository called 'cs290-assignment2' at the location you specified in week 1.
• Make a layout.html and style.css file in that repo.
  • These files will be the only files used for grading this assignment.
  • All styling should be applied from style.css.
  • No ids or classes should be used except where specified in the assignment.
• This assignment must be hosted on a live web server. When you submit you will need to include a URL to the live version of the page.

##Requirements

• Create a table that has that is 6x6 (inclusive of the header row).

  • The upper left cell should be empty. The others should be non-empty.
  • The table should have a caption detailing the contents of the table.
  • The table should have a header section, all the cells in this section should have bold text. (This is the default for th)
  • The first column of the table should have header cells that have italic text. (These should not be bold)
  • The first non-header cell of each non-header row should have 'red' text.
  • The third non-header cell of each non-header row should have 'blue' text.
  • Odd non-header/footer rows should have a light green background.
  • Even non-header/footer rows should have a light blue background
  • The table should have a footer section made up of two cells, one should be 2 columns wide, the other should be 4 columns wide.

• Create a dl list with at least 3 entries

  • When you hover over a dt entry, its dd item should get a purple background.
  • When you hover over the dd item, it should not turn purple.

• Create two forms. One should submit via a post, the other via a get, they should have identical content.

  • They should submit to http://web.engr.oregonstate.edu/~osterbit/2/repo/class-content/form_tests/Formtest.php to better facilitate testing.
  • There should be 4 input types
    • A text input with a name attribute of 'text_input'
    • A number input with a name attribute of 'numerical_input'
    • A password input with a name attribute of 'password_input'
    • A set of radio inputs
      • They should be named 'candy'
      • These options should exist in this order
        • Snickers
        • Skittles
        • Mentos

• Create a div that is aligned to the left side of the page and takes up 3/4 of the page width, has a space of 20px between it and the previous element and has a class of 'outer-content'.

  • Its background should be pink.
  • Inside that div have another div called 'inner-content'.
    • Its background should be blue.
    • It should take up 3/4 of the parent divs width and should be centered.

• Create two paragraphs of text. Have an image that is 100x125px sit in the upper left of those two paragraphs that the text wraps around.

You can see a sample page meeting these requirements in this video: http://eecs.oregonstate.edu/ecampus-video/player/player.php?id=80