Reminder: All programming and Web page developmentassignmentsfor this course must be done using an ordinary ASCII text editor such as pico or vi. You may not use HTML or wysiwyg editors.

Both your HTML and your CSS mustvalidatein order to receive credit for any part of the assignment.

Part 1:Geologic time is divided into eras, periods, and epochs. The eras and their periods are:

  • Proterozoic: (none)
  • Paleozoic: Cambrian, Ordovician, Silurian, Devonian, Mississippian, Pennsylvanian, and Permian
  • Mesozoic: Triassic, Jurassic, and Cretaceous.
  • Cenozoic: Paleogene and Neogene.

Only the Paleogene and Neogene periods are divided into epochs. They are:

  • Paleogene: Paleocene, Eocene, and Oligocene
  • Neogene: Miocene, Pliocene. Pleistocene, and Holocene

Using a document-level style sheet and nested ordered lists, show this information in outline form. The eras must be numbered using upper Roman numerals, the periods must be numbered with upper aphabetics, and epochs must be numbered using decimal numbers.

The background color of the Proterozoic era must be pink. The background color of the Paleozoic era, including its periods, must be blue. The Mesozoic era must have a green background, and the Cenozoic era must have a red background.

Just to make this clear, here is a little bit of the outline:

II. Paleozoic

A. Cambrian

B. Ordovician

I did this with<pre>elements. You must do it with a document-level style sheet, and you must include the background colors. It is not necessary to match the color I used exactly.

The easiest way to do this is to make liberal use of class specifications in your document-level style sheet. So, you might code something like this:

ol.eras list-style-type: upper-roman;}

If you cannot get all this to work using only a document-level style sheet, you may do the numbering with document-level styles and the colors with in-line styles, but try it with all document-level styles first, OK? It can be done.

If you can't get color behind the numbers, don't worry too much about it as long as there's color behind the text.

Name your documenta3p1.htmland create a link to it from your index page.

Part 2:Write three or more paragraphs about what you've learned so far about creating usable web pages. You will need at least three "main ideas," one per paragraph. On the same page, put a CSS box using the<aside>element. the box should have a one-pixel black border around it and a light-yellow background. Float the box to the right of the text and within the box, put an unordered list of the three or more main ideas, one per list item. Name your documenta3p2.htmland create a link to it from your index page.

Part 3:The HTML for a table is provided below. Put this table on a web page nameda3p3.htmland create a link to it from your index page. Write a document level style sheet for the page that centers the table (left to right) on the page, uses Verdana, Geneva, Arial, or sans-serif for the font family (in that order), and colors the background as shown in the image.Note:you will not have to include CSS for borders; you will get white automatically in the cell margins.

You do not have to match my colors exactly, but the background of the odd-numbered rows must be light blue and the even numbered rows must be light green. The background of the heading must be dark green. (Try a search on "HTML color chart.")

Here is the HTML for the table. You will probably want to add class attributes to some of the elements.

<table>
<trthcolspan="2">I.T. News</th</tr
<tr<td>Disable UPnP</td<td>p. 7</td</tr
<tr<td>New, Bigger iPhone</td<td>p. 9</td</tr
<tr<td>Microsoft Office 2013</td<td>p. 2</td</tr
<tr<td>Encryption News</td<td>p. 2</td</tr
</table>