Web Development
Using PHP

Simpson College
Computer Science

HTML5

HTML5 Worksheet

Use the following resources to answer the questions on this page:
W3Schools: http://www.w3schools.com/html5/default.asp
Niels Leenheer: http://html5test.com
Remy Sharp: http://html5demos.com/

  1. Rather than have tags like: HTML5 adds specific new tags to better define the structure of a document. List some of these new markup tags added for better structure definition:
  2. Explain why HTML5's media support is important. This might require a bit of searching or asking because the answer is not spelled out in the w3schools website.
  3. What are video codecs?
  4. Make a couple observations about HTML 5 video codec support across different browsers after reading through the following article:
    http://en.wikipedia.org/wiki/HTML5_video
  5. Explain the importance of these blog postings:
    http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html
    http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html
  6. What is the new canvas element used for?
  7. What is web storage used for? (localStorage and sessionStorage)
  8. What are some of the new form elements?
  9. What are some tags that HTML5 no longer supports?
  10. JavaScript is a language that can be used to help create interactive web pages. HTML5 adds new "events" that allow a developer to create code that will be run when these "events" occur. List two of the new events and describe when they are run. (In your own words, not copy/pasted.) Take a moment to look through all the new events available.
  11. What are Web Workers?
  12. Run IE, Firefox, and Chrome against http://html5test.com web site. Write their scores here. If you have a smart phone, try it out as well.
  13. Run this HTML5 calculator using Chrome or Firefox: http://graph.tk/ (Note that it uses web storage.)
  14. Take a look at the two drag/drop demos here: http://html5demos.com/. Give an example of how drag/drop might improve a user's experience:
  15. What does the History API do?
  16. What does cross-document messaging do?
  17. What do the geolocation tags do? How might they be used in a website?

You are not logged in. Log in here and track your progress.