HTML FILES The file assignment1-style.css is the main stylesheet for these pages
ID: 3661995 • Letter: H
Question
HTML FILES
The file assignment1-style.css is the main stylesheet for these pages. Your task in this project is to create a two new web pages using features from assignment3-style.css according to the following requirements
To orient the instructions, the pages should be first.html and second.html
first.html should include examples of the following features
A definition list
An ordered list with at least two levels using the outline class from the style sheet
An ordered list with at least two levels with default styling
A link to second.html
A link to a page on an external web site
A paragraph
second.html should include the following features
Put all the remaining contents of this page in a div with the id `content`.
A table, at least 3 by 3, using the grid class
A table, at least 3 by 3, using default styling
Two levels of headers
A paragraph with class `hint`. The assignment will use different colors, but try highlighting the area after 'Hint->'
Explanation / Answer
Where are assignment1-style.css and assignment3-style.css files. I guess you need two web pages with styling defined in these two css files. (As far as I cunderstood from your question). Since I couldnt find these files I did a bit of styling for these two pages, just to show how how styling works. I created two html files first.html and second.html and I used external style sheet style.css to do a bit of styling. All three files are below
Save all three files in one folder
//style.css
dl
{
display: block;
margin-top: 4em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
dd
{
display: block;
margin-left: 1em;
}
dt
{
display: block;
margin-top: 1em;
margin-bottom: 0em;
margin-left: 0em;
}
.olist{
margin:15px 5px;
width:500px;
}
.olist li{
padding:5px;
color:#AFCEDD;
margin-left:15px;
}
.grid{
border:solid 1px #DDDDDD;
margin:10px 0px;
}
.grid td
{
padding:5px;
border:solid 1px #DDDDDD;
}
#content
{
padding:10px;
}
.hint
{
padding:5px;
border: solid 1px #CFDEAA;
background-color:#A6FDEF;;
}
// first.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>First</title>
<script src="modernizr-1.5.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="all" data-scope="global" />
<style>
</style>
</head>
<body>
<h3> First Page</h3>
<section>
<dl> <b>Definition List</b>
<dt>Definition 1</dt>
<dd>Description 1 </dd> <dd>Description 2</dd>
<dt>Definition 2</dt>
<dd>Description 1</dd>
<dd>Description 2</dd>
</dl>
<b>Ordered List Default Styling</b>
<ol>
<li>Ordered List Item 1</li>
<li>Ordered List Item 2</li>
</ol>
<ol class='olist'><b>Ordered List With Styling</b>
<li>Ordered List Item 1</li>
<li>Ordered List Item 2</li>
</ol>
<p><div><b>Paragraph</b></div>
Pomes are stronger and safer than conventional homes, and their
design provides more stability against hurricanes, tornados, and
earthquakes. Dome houses are also more energy efficient. A dome home
has approximately 30 to 50% less roof and wall area exposed to the
elements than conventional homes, resulting in reduced energy costs.
The spherical space also provides for a natural air flow, minimizing
cold spots and increasing interior comfort.
</p>
<a href="second.html"> Link to Second Page</a> <br> <a href="http://www.google.com"> External Link</a>
</section>
<footer>
<address>
dHome Inc. •
8312 Industrial Way •
Owensboro, KY 42302 •
270 - 555 - 7811
</address>
</footer>
</body>
</html>
// second.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>First</title>
<script src="modernizr-1.5.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="all" data-scope="global" />
<style>
</style>
</head>
<body>
<h3> Second Page</h3>
<section>
<div id='content'>
<b> Main Div with id as content</b></br>
<table class='grid'> Table with grid settings
<tr><td>R1 C1</td><td>R1 C2</td><td>R1 C3</td></tr>
<tr><td>R2 C1</td><td>R2 C2</td><td>R2 C3</td></tr>
<tr><td>R3 C1</td><td>R3 C2</td><td>R3 C3</td></tr>
</table>
<table>Default Table
<tr><td>R1 C1</td><td>R1 C2</td><td>R1 C3</td></tr>
<tr><td>R2 C1</td><td>R2 C2</td><td>R2 C3</td></tr>
<tr><td>R3 C1</td><td>R3 C2</td><td>R3 C3</td></tr>
</table>
<p>
<h2>Header 2</h2>
Contents under header 2
<h3>Header 3</h3>
Contents under header 3
</p>
<p class='hint'> <b>Div hint</b><br>
Pomes are stronger and safer than conventional homes, and their
design provides more stability against hurricanes, tornados, and
earthquakes. Dome houses are also more energy efficient. A dome home
has approximately 30 to 50% less roof and wall area exposed to the
elements than conventional homes, resulting in reduced energy costs.
The spherical space also provides for a natural air flow, minimizing
cold spots and increasing interior comfort.
</p>
</div>
<a href="first.html"> Link to First Page</a> <br> <a href="http://www.google.com"> External Link</a>
</section>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.