1. Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins, published by O’Reilly 2012 and w3schools.com

2. In this chapter History of HTML HTML 5

3. The birth of HTML

4. HTML Blows and standardization

5. HTML 4.0 and 4.01and XHTML HTML in 1998 HTML in 1999 ◦ separation of structure and presentation and improving accessibility XML ◦ Why is needed? XHTML 1.0 ◦ Strict HTML 4.01

6. More works on XHTML XHTML 2.0 ◦ Not Backward-compatible ◦ Hard for Browser Implementation XHTML 2.0 -> stuck for 10 years XHTML -> HTML 5

7. Hello HTML 5.0 In, 2004 ◦ WHATWG: Web Hypertext Application Technology Working Group ◦ real-world authoring practices and browser behavior W3C HTML5 Working Group ◦ Based on WHATWG ◦ Merge XHTML 2.0 to HTML5

8. HTML 4.01 legacy

9. Meet the DTD DTD: Document Type Definition DTDs in HTML 4.01 ◦ Transitional DTD ◦ Strict DTD ◦ Frameset DTD ◦ E.g. www.w3.org/TR/html4/strict.dtdwww.w3.org/TR/html4/strict.dtd DTDs in XHTML 1.0

10. DOCTYPE declaration

11. What do the pros do before HTML 5.0 Follow the XHTML 1.0 strict DTD ◦ No deprecated and presentational elements ◦ Use style sheets Validate the pages ◦ https://validator.w3.org

12. What’s new in HTML 5 A new DOCTYPE New elements and attributes Obsolete 4.01 elements APIs

13. New DOCTYPE Read fun facts on page 185. HTML 4.01 -> HTML 5 ◦ No DTD needed ◦ Easy declaration  Compared with the one in HTML 4.01 ◦ What should we use for now?  HTML 4.01 DTD, XHTML 1.0 DTD and HTML 5

14. New Elements and Attributes New Elements ◦ On Page 197. ◦ W3Schools.com W3Schools.com  Semantic/ Structural, why not presentational? Semantic elements

15. Semantic Elements When a layout becomes popular

16. New Attributes New Form Input Attributes ◦ Meet the new attributes  W3Schools W3Schools New Global Attributes ◦ W3Schools W3Schools What is the trend? ◦ More logical ◦ More functional ◦ High encapsulation

17. Obsolete 4.01 elements From textbook page 189

18. APIs Multimedia API Session History API Drag and Drop API Web workers API Web socket API Others

19. Add video and audio Add video: ◦ ◦ Controls:  Autoplay  Loop  Muted  Preload: auto, none, metadata  Examples in  http://www.cs.gsu.edu/~gliu6/2014fall/csc2320/Schedule.htm #videos http://www.cs.gsu.edu/~gliu6/2014fall/csc2320/Schedule.htm #videos

20. What is the future browser The trend ◦ High isolation  (Semantic, presentational, logical) ◦ High encapsulation  Common use combinations like input “date” What is the future browser? ◦ A platform? ◦ An operation system? ◦ All-in-One software?

21. Homework Read Chapter 10 Try new input types in chapter 9