Path Home About State Agency Divisions Systems Design and Computer Services Resources Presentations HTML & CSS Basics CSS Exercise Answer Key
Jump to navigation

CSS Exercise Answer Key

HTML icon 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 &amp; 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 &amp; 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">&lt;D</td>
				</tr>
			</tbody>
		</table>
		</div>
	</body>
</html>
Jump to content