CSS Exercise Answer Key
css_exercise.html
—
HTML,
4 KB (4719 bytes)
File contents
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Title</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<style type="text/css">
body
{
background-color: #AAAAAA;
color: #550000;
font-size: 12pt;
margin-left: 20%;
margin-right: 20%;
}
a:link
{
color: #333333;
}
a:visited
{
color: #555555;
}
a:hover
{
color: #000000;
}
a:active
{
color: #FFFFFF;
}
input[type=text]
{
background-color: #DDDDDD;
}
input[type=password]
{
background-color: #000000;
color: #FFFFFF;
}
textarea
{
background-color: #DDDDDD;
}
label
{
font-weight: bold;
vertical-align: top;
}
span
{
font-style: italic;
}
table
{
border: 1px solid #550000;
background-color: #DDDDDD;
}
td
{
border: 1px solid #550000;
}
th
{
border-bottom: 3px double #333333;
background-color: #999999;
padding-left: 3px;
padding-right: 3px;
font-variant:small-caps;
}
h1
{
font-variant:small-caps;
text-shadow: 1px 2px #DDDDDD;
font-size: 32pt;
font-family: sans-serif;
}
h2
{
font-variant:small-caps;
text-shadow: 1px 2px #DDDDDD;
font-size: 24pt;
font-family: sans-serif;
}
form
{
border: 1px dashed #333333;
padding: 10px;
}
div
{
background-color: #FFFFFF;
padding-left: 5px;
padding-right: 5px;
}
.even td
{
background-color: #BBBBBB;
}
.odd td
{
background-color: #CCCCCC;
}
td.grade
{
text-align: center;
}
</style>
</head>
<body>
<div>
<h1>HTML Exercise</h1>
<p>
The following is an exercise to practice writing HTML from scratch. It is part of the HTML & CSS Basics cross-training.
<br>
<br>
</p>
<h2>Sections included in this document</h2>
<ul>
<li><a href="#form">Forms</a></li>
<li><a href="#tables">Tables</a></li>
</ul>
<h2>Steps to complete this exercise</h2>
<ol>
<li>Build standards-compliant web page to look like this exercise</li>
<li>Validate it using W3C's HTML 4.01 strict validator</li>
<li>Verify with facilitator that you used similar tags</li>
</ol>
<p>
<br>
<br>
</p>
<h2>
<a name="form"></a>
Section 1: Form
</h2>
<p>
This form should use the 'get' method (without quotes), '#' action (without quotes), and multi-part encoding type
</p>
<form action="#" method="get" enctype="multipart/form-data">
<p>
<label for="field1">Full Name</label>
<input type="text" id="field1" name="field1" value="John Doe">
<br>
<label for="field2">Password</label>
<input type="password" id="field2" name="field2" value="password">
<br>
<label for="field3">Do you accept the terms & conditions</label>
<input type="checkbox" id="field3" name="field3" checked="checked">
<br>
<span>Do you wish to receive our newsletter?</span>
<label for="field4_yes">Yes</label>
<input type="radio" id="field4_yes" name="field4" checked="checked">
<label for="field4_no">No</label>
<input type="radio" id="field4_no" name="field4">
<br>
<span>A hidden field should be here with a name of field5 and default value of hidden</span>
<input type="hidden" name="field5" value="hidden">
<br>
<label for="field6">Do you wish to change your long distance carrier?</label>
<select name="field6" id="field6">
<option value="yes">Yes</option>
<option value="no" selected="selected">No</option>
</select>
<br>
<label for="field7">Describe your bug</label>
<textarea rows="3" cols="51">Type your issue here...</textarea>
<br>
<label for="field7">Attachment</label>
<input type="file" name="field7" id="field7">
<br>
<input type="submit" name="submit" value="submit">
<br>
<br>
</p>
</form>
<h2>
<a name="tables"></a>
Section 2: Table
</h2>
<p>
The following table should have two heading rows, the first of which has spans 2 columns, and 4 regular rows.
</p>
<table>
<thead>
<tr>
<th colspan="2">Report Card</th>
</tr>
<tr>
<th>Course Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>Math</td>
<td class="grade">A</td>
</tr>
<tr class="odd">
<td>English</td>
<td class="grade">B</td>
</tr>
<tr class="even">
<td>Science</td>
<td class="grade">C</td>
</tr>
<tr class="odd">
<td>History</td>
<td class="grade"><D</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
