The object of this assignment is to use internal style sheets.
Read everything before doing
anything.
Copy and paste the following HTML into a file and save it in
the assignments folder with
the name style1.html.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CIT 040 - Your Name - Styles</title>
<style type="text/css">
/* Your styles go here */
</style>
</head>
<body>
<h1>Weather</h1>
<h2>Three Day Forecast</h2>
<dl>
<dt>Today</dt>
<dd>
Partly Cloudy.
High 68°-72°.
Low 52°-56°.
</dd>
<dt>Wednesday</dt>
<dd>
Morning Fog.
High 71°-75°.
Low 50°-54°.
</dd>
<dt>Thursday</dt>
<dd>
Partly Sunny.
High 71°-74°.
Low 48°-52°.
</dd>
</dl>
<h2>Bay Area Microclimates</h2>
<div>
<h3>San Jose Area</h3>
<p>
Night and morning fog through Wednesday with partly cloudy skies
otherwise. Highs, upper 60s to 70s. Lows in the 50s.
</p>
</div>
<div>
<h3>San Francisco</h3>
<p>
Partly cloudy today after moning fog. Fog giving way to sunny skies
Wednesday. Highs mid-60s to mid-70s. Lows near 50.
</p>
</div>
<h2>California Forecast</h2>
<p>
Today through Thursday: Cooler than normal temperatures throughout
the state through Thursday. There is a chance for isolated showers
across the Southern California mountains by Wednesday afternoon.
</p>
</body>
</html>
Take a look at the file in a browser, so you can see what it
looks like without any styling. Then make the following changes
to the document:
Put your name into the content of the <title>
element.
The body of the document must have a background image of
noaa2.jpg. Here is the picture. Right-click the image
so that you can save a copy of it.
Put the image in the images folder. The
background will repeat in the y direction (vertically).
The content of the body will be in Arial, Helvetica, or a
generic sans-serif font, and have a left margin of 70 pixels. This left
margin ensures that the text does not overlap the background image.
<h1> elements must appear in italic and bold
(they are already bold by default).
<h2> elements will appear in white text on a
blue background, with a padding of 0.25 em and a
bottom margin of 0.25 em.
The <dl> has a one-em left margin. The
<dt> elements are bold, with text 125% normal size.
The <dd> elements have a top and bottom margin
of 0.25 em, and a left margin of 1.5 em
Each of the microclimates is enclosed in a
<div> element. These <div>s must
have a two-pixel dashed bottom border in color #00b2b2. (The other sides have no border.) The
<div>s
have a padding of one-half em and a margin of one half centimeter.
The <h3> elements are centered, italic, with
no top and bottom margin. The color will be 90% red, 70% green, and
0% blue.
All sentences beginning with “High” or
“Highs” wlll display in red. All sentences
beginning with “Low” or “Lows” will
display in purple.
All paragraphs have a line height of 125% normal.
The paragraph in the “California Forecast” section
has a first line indent of one em.
The entire sentence starting “There is a chance for isolated
showers...” will be bold with a light yellow (#ffffcc)
background.
Other Requirements
You must not use the
style attribute on any element. All your styles must be
specified in the internal stylesheet.
You may add <span> elements to the document. You must
not add any other elements to the document.
You must not use the
entity.
You may add extra whitespace to make the document more readable,
if you wish. Other than that, you must not
change the text content of the document in any way.
See a screenshot of the
result. Your fonts may look different; the screen shot was
created on a Linux system, which has different fonts than Windows.
You must validate your documents before you
submit them.
When You Finish
Upload the file, which must be named style1.html,
to the assignments folder inside the public_html
directory.
Modify the index.html file in the assignments
folder so that it has a link that goes to your style1.html file.
