HTML5 Learning Module
|| HMTL5 in Context
|| An introduction to HTML5 presented in an hour-long video by Jeremy Keith. The video presentation is titled The Design of HTML5. Included are discussion of the history of the development of HTML5, an explanation of the design principles underlying HTML5, and code examples demonstrating how the design principles of HTML5 are put into practice.
| Learner Competencies
- Student will understand the history of HTML5 including the role of WHATWG and the W3C in the development of the HTML5 specification
- Student will be able to explain and give examples of the design principles of HTML5
- Student will demonstrate basic understanding of HTML5 by creating a simple web page formatted in HTML5.
- Online Delivery:
- This lesson will take approximately 4 hours to complete.
- Classroom Delivery:
- This module will take approximately one 2 hour class session for viewing the video and class discussion.
- This module will take approximately 2 hours of hands-on lab time for students to create a page in HTML5.
| Content Delivery
- Video: The Design of HTML5
- What are the design principles of HTML5 and how are they demonstrated in practice on the Web?
- Describe the unique development of the HTML5 specification as it currently exists.
- Recommended Readings: Keith, Jeremy. HTML5 for Web Designers, A Book Apart, 2010. Chapters 1 and 2. Chapter 1 is available online at Adactio: A Brief History of Markup.
- Web Readings:
- Jeremy Keith's site, Adactio, provides a written transcript of the video, the video, and the slide deck.
- Get familiar with HTML5! an introductory article by Chris Mills.
- Bruce Lawson explains the difference between section and article
- Bruce Lawson provides code examples for Designing a Blog with HTML5
- Hands-On Lab:
- Web page coding assignment: Create a page in HTML5 that demonstrates correct use of specific HTML5 elements.
- The purpose of this module is to explore the development of HTML5 and some of its underlying principles, so a complete understanding of HTML5 code is not required for the lab exercise. Create a simple page using HTML5 elements explained in the video.
- Supplemental or Alternative Resources:
- HTML history infographic by Keryx.
- Çelik, Tantek. HTML5 Now: A Step-by-Step Video Tutorial for Getting Started Today, New Riders Press; DVD/Paper edition, 2010.
- HTML5 voices on Twitter include @shelleypowers, @stevefaulkner and @laura_carlson.
| Assessment Activities
- Discussion Questions
- Quiz: Essay question: Pick two of the design principles mentioned in the video. Explain each principle and why it is important to web users and/or web developers.
- Demonstrate use of the following in the page building assignment:
- HTML5 DOCTYPE
- HTML5 meta charset
- Two levels of headings wrapped in an anchor element
- Appropriate use of selected semantic elements such header, nav, aside, footer, section, article. Optional elements to include: video, new form input types
| Wrap-Up / Feedback
- Discussion Question Wrap-Up
- Evaluation and feedback on Web page
- Feedback on Quiz
Primary course developer: Virginia DeBolt