<%@LANGUAGE="VBSCRIPT" %><% Response.CacheControl = "no-cache" %>
Exercise #11 (Due End of Period)

Turn in:

  • A folder named your "Lastname, Firstname" containing:
    • layout4.html
    • layout5.html
    • L4_fig1.jpg
    • L4_fig2.gif
    • L4_fig3.gif
    • L4_fig4.gif
    • L5_fig1.gif
    • L5_fig2.gif
    • L5_fig3.gif
    • L5_fig4.gif
    • L5_fig5.jpg
    • L5_fig6.jpg

Details:

For this exercise you will use the two papers you formatted in XHTML during Exercise 3 and 4 (layout4.txt and layout5.txt). Use layout4.html and layout5.html from Exercise 4 . Note that once you do one of the two, the other should go very quickly. However consistency is key.

Starting from where you left off in that exercise, add the appropriate <style> tags so that the pages use CSS for styles. Note that you may have to modify your prior XHTML coding to match the new specifications if you did not use the suggested tags on those exercises. If you have to modify existing XHTML tags, don't forget about the Find and Replace commands that are available in Notepad! They will make revisions go more quickly. In this version of the papers, there should be no <center>, <font>, <em>, <i>, <strong>, or <b> tags and also no align or valign attributes used. Alignment and rendering of all of the elements should be as a result of CSS not XHTML.

Expand/Collapse Section ImageExercise Specifications

Create a internal CSS style section with selectors, properties and values in each of the files to make the following modifications to the papers:

  • The body tag should have the following properties & values:
    • background-color: #ffffff
  • Add the following four selectors for the anchor tag and assign their corresponding properties and values:
    • a:link
      • color: #cc9933
    • a:active
      • color: #333399
    • a:visited
      • color: #ff3300
    • a:hover
      • color: #ff0000
  • The title should be rendered using <h1>. A style should be assigned to <h1> using the following characteristics:
    • font-family: Arial
    • font-style: Normal
    • font-size: 20pt
    • text-align: Center
  • All A-headings using the <h2> tag should be modified to include a style with the following properties & values:
    • font-family: Arial
    • font-weight: Bold
    • font-style: Normal
    • font-size: 14pt
    • text-align: Center
  • The author and affiliation should also be rendered using <h2>. However, it should be italicized in addition to the settings already established for <h2>. Thus, create a class selector called .italicme with the following characteristic (then apply the class to <h2> when used for the author and affiliation):
    • font-style: italic
  • All B-headings using the <h3> tag should be modified to include a style with the following properties & values:
    • font-family: Arial
    • font-style: Normal
    • text-align: Left
    • margin-left: 30px
    • font-size: 12pt
  • All body text using the <p> tag should be modified to include a style with the following properties & values:
    • font-family: Times, Times Roman
    • font-style: Normal
    • font-size: 11pt
    • text-align: Justify
    • text-indent: 1em
    • margin-left: 30px
    • margin-right: 30px
  • The <img> tag should be modified to include a style with the following properties & values:
    • border: 0px
  • All unordered lists using the <ul> tag should be modified to include a style with the following properties & values:
    • margin-left: 60px
    • margin-right: 60px
  • Create a class selector that will be applied to the "Contact the author at" section at the bottom of the document. Place a <div>...</div> tag around the author contact text. Apply the class selector .myborder to it and use the following settings:
    • margins: 20 px
    • padding: 1%
    • float: Right
    • border-style: Double
    • border-width: Thin
    • width: Auto
       
  • All ordered lists should use the <ol> tag and include the following style attributes:
    • margin-left: 60px
    • margin-right: 60px
  • Cerate a class called .centerme to be used on the <img> tag. When you use this class, place a <div>...</div> tag around the image and apply the class to the <div> tag.
    • text-Align: center
  • Include a class called .underline to be used for any code that previously used <u>. The <u> tag should be replaced by a <span> tag that calls this class:
    • text-decoration: underline
  • Include a class section called .caption to be used with the <p> tag for figure captions with with following characteristics:
    • text-Align: Center
    • font-weight: Bold
    • font-style: Normal
    • font-size: 9pt
    • font-family: Arial
  • Include a class section called .chead to be used with the <span> tag on C-level headers (you can tell the C-level heads because they are at the beginning of paragraphs followed by a period). Define the .chead class as the following:
    • font-style: italic
    • font-size: 11pt
    • font-family: Arial
    • text-indent: -1em
  • Include a definition of the <blockquote> tag with the following characteristics:
    • text-align: Justify
    • margin-left: 60px
    • margin-right: 60px
    • font-style: Normal
    • font-size: 11pt
    • font-family: Arial


Note: This project is to be done by hand/hard-coding. No editors!