HTML 5 Elements

Tools

HTML to PDF translator: Prince 8.0 download or online converter.

A sample page with various frame settings.

To validate your CSS files: http://jigsaw.w3.org/css-validator.

Lab 12

Starbuzz in HTML 5

1. Download LAB12.zip and unzip it into a new LAB12 sub-directory of your LABS directory.
2. In the newly created starbuzz directory, edit the index.html file.
   • Replace indicated div elements with HTML 5 header, footer, and aside elements.
   • Replace the div elements with id attributes drinks and main with section elements having the same attributes.
   • Modify the starbuzz.css stylesheet to accommodate these new elements.
3. Edit the blog.html file to support the starbuzz blog.
   • Link to the starbuzz.css stylesheet.
   • Wrap each separate blog entry in an article element.
   • Use the time element to wrap blog entry dates.
   • Wrap each entry's h1 and time elements in its own header element.
   • Modifiy the starbuzz.css stylesleet to accommodate the blog.
   • Distinguish the top level header element (from blog headers) with an id attribute and modify the stylesheet so that the different headers are accommodated appropriately. (Make sure your index.html page still displays correctly.)
   • Add a navigation bar to your blog page and configure the stylesheet to support it.
   • Add the video blog entry.
4. Revise your personal blog to use HTML5 elements (use the starbuzz blog as a pattern).
5. Use the validator, http://jigsaw.w3.org/css-validator, to check that your pages meets W3C standards.
6. Edit the index.html file in your LABS directory to link to your revised starbuzz index.html page.

Always turn off your computer and screen before leaving the room.