Homework 4

Your html file should have the usual DOCTYPE and html tab for XHTML transitional coding and the usual iconic link at the bottom to conveniently click and show that it validates. MAKE SURE THAT IT PASSES WITH NO WARNINGS when you do a validation check (validator.w3.org).

The web page should be a copy of your hw03.html assignment, but named hw04.html, and then modified in the following ways to add styles to your page:

• [Embedded Style] Create two classes in the style section within the head section. They are not to be tied to any specific html tag so that you can refer to them anywhere in your html. One should be for the sans serif family of fonts (which include Arial) and the other should be for the monospaced family of fonts (which include Courier and Courier New) See the slides or text for the usual list of fonts in these font families. You can come up with whatever class name you like for these classes, but make it a short name. In both of these classes, also set the text color to blue.
  
  
• [Embedded Style] Set a body property in the style-section without a classname for background color that is specified in a HEX code. It must be a web safe color that is some shade of off-white (your choice of tint).
  
  
• [Embedded Style] In the style section, create settings for a:link, a:visited, a:active, and a:hover so that the color changes slightly for all but the link color (unvisited links should be blue like the text). The other colors should be dark since you have a light background and they must be REASONABLE choices for readability.
  
  
• Using your sans serif (Arial), refer to that class in the main body tag so that the entire web page will use that font.
  
  
• [Inline Style] Insert more than one horizontal rules between different parts of your web page, with different colors, heights, and widths. Use a percentage value for at least one of these widths and use a simple integer value (number of pixels) for at least one of the other of these widths.
  
  
• [Inline Style] Make the FIRST paragraph use the use the monospaced class that you defined (thus it will be the only paragraph that is not Arial font).
  
  
[Inline Style] Make the FIRST sentence of the first paragraph be red. You must do this using the span tag because I do not want that sentence to be different from the rest of the paragraph other than its color.


• [Inline Style] Also using an inline style (not a class name), set the background color of your FIRST heading to maroon and the text color to yellow.
  
  

Note: if your first paragraph has only one sentence in it then you should either update it to make it much longer or you can use the 2nd paragraph instead of the first paragraph in the above instructions.