Assignment Week 2 – Convert a wireframe into XHTML
Click Here to view the uploaded web page.
Or check out my xhtml code below:
<?xml version=”1.0″ encoding=”utf-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>Class 2 – In-class Assignment</title>
</head>
<body>
<h1>Power Rangers</h1>
<img
width=”175″
height=”200″
src=”http://www.nickutopia.com/wp-content/uploads/2010/05/Power-Rangers-Nickelodeon1.jpg” align=”left”/>
<p>
  Power Rangers is a long-running American<br/>
  entertainment and merchandising franchise<br/>
  built around a live action children’s television<br/>
  series featuring teams of costumed heroes.<br/>
  Despite initial criticism for its action violence <br/>
  targeted to child audiences, the franchise has <br/>
  continued, and as of 2011[update] the show <br/>
  consists of 19 television seasons, 16 different <br/>
  series, and two theatrical films.
<p/> <br/>
<h2>Be a Power Ranger</h2>
<form>
<label for=”what”> What’s your Power Ranger name? </label>
<input id=”what” type=”Text” value=”Enter your name here…”/> <br/> <br/>
<label for=”which”> Which Power Ranger color do you wear? </label>
<input id=”which” type=”Text” value=”Enter your color here…”/>
</form>
<p><strong>Things Power Rangers do</strong></p>
<ol>
<li>Jump</li>
<li>Fight</li>
<li>Help</li>
</ol>
<p><strong>What is your favorite Power Ranger activity?</strong></p>
<input type=”radio” name=”r1″ id=”c1″/>
<label for=”c1″>Jump</label> <br/>
<input type=”radio” checked=”checked” name=”r1″ id=”c2″/>
<label for=”c2″>Fight</label> <br/>
<input type=”radio” name=”r1″ id=”c3″/>
<label for=”c3″>Help</label> <br/>
<p><strong>Let’s test your Power Ranger knowledge…<br/> Which year did the Power Rangers debut on TV?</strong></p>
<select>
<option selected=”selected”>1997</option>
<option>1993</option>
</select> <br/>
<p><strong>You are almost done…<br/>Tell us your gender and submit your questionnaire to become a Power Ranger</strong></p>
<input type=”checkbox” id=”a1″/>
<label for=”a1″> male </label>
<input type=”checkbox” id=”a2″/>
<label for=”a2″> female </label> <br/><br/>
<table>
<tr>
<td>
               
</td>
<td>
<input type=”button”value=”Submit”/>
</td>
</tr>
</table>
</body>
</html>
A couple of comments….
#1 – Clicking the label next to the text inputs should put the cursor’s focus inside the corresponding text input fields. So you’ll need to set up the labels for those inputs the same way you did for the checkbox and radio button inputs.
#2 – Using tables for layout is an old-fashioned way of doing things that is no longer accepted as good practice. We’ll be learning alternate ways of doing layout using CSS. So please remove the table tags for this assignment.