Jump to navigation

HTML Exercise

HTML icon html_exercise.html — HTML, 3 KB (3087 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">
	</head>
	<body>
		<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>
					<td>Math</td>
					<td>A</td>
				</tr>
				<tr>
					<td>English</td>
					<td>B</td>
				</tr>
				<tr>
					<td>Science</td>
					<td>C</td>
				</tr>
				<tr>
					<td>History</td>
					<td>&lt;D</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
Jump to content