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.
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
- a:active
- a:visited
- a:hover
- 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):
- 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:
- 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.
- 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!
|