CS 50.12 HTML 5 :: Interactive Web Pages

Welcome to HTML5

I am excited to be working with you to learn this new technology. HTML5 contains powerful new capabilities that expand the functionality of web pages. the new standard also contains new rules that will make us scratch our heads and relearn concepts we thought we had mastered.

If we all keep our sense of humor and work together I am confident we will survive the class and emerge as HTML5 developers.


Tentative Course Outline

1. Introducing HTML5 (HyperText Markup Language)

  1. History of HTML / XHTML / HTML5
  2. HTML5 New Features
  3. HTML5 vs. HTML4
  4. Structural tags
  5. Content tags
  6. Application-focused tags
  7. Deprecated elements
  8. API (Application Programming Interface) overview

2. Creating HTML5 Documents

  1. Content models
  2. Understanding the outline algorithm
  3. The role of <div> tags
  4. Using ID and class attributes
  5. DOCTYPE declarations
  6. Character encoding
  7. Current HTML5 support
  8. Compatibility testing http://fmbip.com/litmus/#html5-web-applications
    i. Current browser
    ii. Older browsers
    iii. Mobile devices

3. Structuring HTML5 Documents

  1. Basic page structure
  2. Structuring top-level elements
  3. Structuring interior content
  4. Building headers
  5. Checking document outlines
  6. Ensuring cross-browser structure

4. Building Forms in HTML5

  1. New input types
  2. Setting form autofocus
  3. Using placeholder data
  4. Marking required fields
  5. Working with number inputs
  6. Using date pickers

5. Adding Audio and Video (2weeks)

  1. Adding audio
  2. Encoding audio
  3. Adding video
  4. Encoding video

6. Canvas API (6-8 weeks)

  1. Canvas overview
  2. Adding canvas content
  3. Drawing in the canvas environment
  4. Drag-and-drop API overview

7. Additonal API Technologies

  1. Offline applications overview
  2. Geolocation API overview
  3. Web storage API overview

8. Additional Technologies.

  1. CSS3 (Cascading Style Sheets) overview
  2. Enhancing typography with CSS3
  3. Using @font-face
  4. Styling HTML5 with CSS3
  5. Using CSS3 transitions