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
In this chapter History of HTML HTML 5
The birth of HTML
HTML Blows and standardization
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
More works on XHTML XHTML 2.0 ◦ Not Backward-compatible ◦ Hard for Browser Implementation XHTML 2.0 -> stuck for 10 years XHTML -> HTML 5
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
HTML 4.01 legacy
Meet the DTD DTD: Document Type Definition DTDs in HTML 4.01 ◦ Transitional DTD ◦ Strict DTD ◦ Frameset DTD ◦ E.g. DTDs in XHTML 1.0
DOCTYPE declaration
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 ◦
What’s new in HTML 5 A new DOCTYPE New elements and attributes Obsolete 4.01 elements APIs
New DOCTYPE Read fun facts on page 185. HTML > 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
New Elements and Attributes New Elements ◦ On Page 197. ◦ W3Schools.com W3Schools.com Semantic/ Structural, why not presentational? Semantic elements
Semantic Elements When a layout becomes popular
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
Obsolete 4.01 elements From textbook page 189
APIs Multimedia API Session History API Drag and Drop API Web workers API Web socket API Others
Add video and audio Add video: ◦ ◦ Controls: Autoplay Loop Muted Preload: auto, none, metadata Examples in #videos #videos
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?
Homework Read Chapter 10 Try new input types in chapter 9