<section>
<?= t_head("HTML5 Page Structure", "20–30") ?>
<p>For this exercise, we’ll convert one of our old homework assignments from using <code>div</code>s with classes & IDs to using the newer HTML5 page section tags.</p>
<p>Make a copy of your solution to Homework 2 (Design Blog). Open up the HTML code, and change all of the structural elements to use HTML5 tags.</p>
<div class="note">
<p>Note that because you’ll be changing the tags, classes, and IDs in your HTML file, many of your CSS rules will break and have to be adapted as well.</p>
<p>For example, if you previously had a <code><div id="header"></code> that you’re converting to a <code><header></code> tag, you’re going to need to convert any mention of <code>#header</code> in your CSS to use just <code>header</code> instead.</p>
<p>But changes to your CSS might not be that simple. For example, if you add an <code><hgroup></code> to your header, you may have to add a new CSS rule to style it to be inline like everything else in the header.</p>
<p><em style="font-family: 'Droid Sans'; font-style: normal; color: red">It’s okay if things get a little off; the goal of this exercise is to practice using the new page section tags, not ensuring the CSS is perfectly adapted.</em></p>
<p>We’d recommend making just one change in your HTML file, then making the corresponding change in your CSS file, and refreshing the page before proceeding to be sure the change didn’t break anything majorly.</p>
</div>
<p>Be sure to include at least the following elements:</p>
<ul>
<li><code>header</code>, <code>hgroup</code></li>
<li><code>section</code>, <code>article</code>, <code>aside</code></li>
<li><code>footer</code></li>
</ul>
<p>You may find others from the lecture slides you’d like to add as well, but these are optional. You may also find the following article on HTML5 Doctor helpful:</p>
<p class="resource"><a href="http://html5doctor.com/the-hgroup-element/">The <code>hgroup</code> Element</a></p>
<p>Submit your new <samp>designblog.html</samp> and <samp>designblog.css</samp> files to the dropbox.</p>
</section>
<section>
<?= t_head("HTML5 Controls", "10") ?>
<p>Create a new HTML file called <samp>minilab9.html</samp> using the HTML5 template. Experiment with adding a couple of HTML5 form controls to it. Add at least two, with their appropriate attributes.</p>
</section>
<section>
<?= t_head("jQuery UI Widgets", "10–15") ?>
<p>Attach jQuery and the jQuery UI libraries to your HTML file from Exercise 2. Then add at least one jQuery UI widget to your page. Configure its options how you want it.</p>
</section>
<footer>
<p>If you’ve finished everything, good job! Look at more jQuery UI widgets.</p>
</footer>