HTML 5

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 10/23-25/12

Starbuzz in HTML 5

1. Download Chapter12.zip and unzip it into your LABS directory.
2. In the Starbuzz directory, edit the index.html file.
   • Replace indicated div elements with HTML 5 header, footer, and aside elements.
   • Modify the starbuzz.css stylesheet to accommodate these new elements.
   • Replace the div elements with id attributes drinks and main with section elements having the same attributes.
   • Adjust the stylesheet appropriately.
3. Edit the blog.html file to support the starbuzz blog. Create a title element and a link element to the starbuzz.css stylesheet. Wrap each separate blog entry in a article element.
4. Modifiy the stylesleet to accommodate the blog.
5. Create dates for the blog entries using the time element.
6. Wrap each entry's h1 and time elements in its own header.
7. Distinguish the top level header element with an id attribute and modify the stylesheet the different headers are accommodated appropriately.
8. Add navigation to your blog page and configure the stylesheet to support it.
9. Add the video blog entry.
10. Use the validator, http://jigsaw.w3.org/css-validator, to check that your pages meets W3C standards.
11. Edit the index.html file in your LABS directory to have links to both of your revised starbuzz.html pages.

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