![Page 1: Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins,](https://reader036.vdocument.in/reader036/viewer/2022062720/56649efd5503460f94c11550/html5/thumbnails/1.jpg)
Chapter 10History 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
![Page 2: Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins,](https://reader036.vdocument.in/reader036/viewer/2022062720/56649efd5503460f94c11550/html5/thumbnails/2.jpg)
In this chapterHistory of HTMLHTML 5
![Page 3: Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins,](https://reader036.vdocument.in/reader036/viewer/2022062720/56649efd5503460f94c11550/html5/thumbnails/3.jpg)
The birth of HTML
![Page 4: Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins,](https://reader036.vdocument.in/reader036/viewer/2022062720/56649efd5503460f94c11550/html5/thumbnails/4.jpg)
HTML Blows and standardization
![Page 5: Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins,](https://reader036.vdocument.in/reader036/viewer/2022062720/56649efd5503460f94c11550/html5/thumbnails/5.jpg)
HTML 4.0 and 4.01and XHTMLHTML in 1998HTML in 1999
◦separation of structure and presentation and improving accessibility
XML◦Why is needed?
XHTML 1.0◦Strict HTML 4.01
![Page 6: Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins,](https://reader036.vdocument.in/reader036/viewer/2022062720/56649efd5503460f94c11550/html5/thumbnails/6.jpg)
More works on XHTMLXHTML 2.0
◦Not Backward-compatible◦Hard for Browser Implementation
XHTML 2.0 -> stuck for 10 yearsXHTML -> HTML 5
![Page 7: Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins,](https://reader036.vdocument.in/reader036/viewer/2022062720/56649efd5503460f94c11550/html5/thumbnails/7.jpg)
Hello HTML 5.0In, 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
![Page 8: Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins,](https://reader036.vdocument.in/reader036/viewer/2022062720/56649efd5503460f94c11550/html5/thumbnails/8.jpg)
HTML 4.01 legacy
![Page 9: Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins,](https://reader036.vdocument.in/reader036/viewer/2022062720/56649efd5503460f94c11550/html5/thumbnails/9.jpg)
Meet the DTDDTD: Document Type DefinitionDTDs in HTML 4.01
◦Transitional DTD◦Strict DTD◦Frameset DTD◦E.g. www.w3.org/TR/html4/strict.dtd
DTDs in XHTML 1.0
![Page 10: Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins,](https://reader036.vdocument.in/reader036/viewer/2022062720/56649efd5503460f94c11550/html5/thumbnails/10.jpg)
DOCTYPE declaration
![Page 11: Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins,](https://reader036.vdocument.in/reader036/viewer/2022062720/56649efd5503460f94c11550/html5/thumbnails/11.jpg)
What do the pros do before HTML 5.0Follow the XHTML 1.0 strict DTD
◦No deprecated and presentational elements
◦Use style sheets Validate the pages
◦https://validator.w3.org
![Page 12: Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins,](https://reader036.vdocument.in/reader036/viewer/2022062720/56649efd5503460f94c11550/html5/thumbnails/12.jpg)
What’s new in HTML 5A new DOCTYPENew elements and attributesObsolete 4.01 elementsAPIs
![Page 13: Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins,](https://reader036.vdocument.in/reader036/viewer/2022062720/56649efd5503460f94c11550/html5/thumbnails/13.jpg)
New DOCTYPERead 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
![Page 14: Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins,](https://reader036.vdocument.in/reader036/viewer/2022062720/56649efd5503460f94c11550/html5/thumbnails/14.jpg)
New Elements and Attributes
New Elements◦On Page 197.◦W3Schools.com
Semantic/ Structural, why not presentational?
Semantic elements
![Page 15: Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins,](https://reader036.vdocument.in/reader036/viewer/2022062720/56649efd5503460f94c11550/html5/thumbnails/15.jpg)
Semantic ElementsWhen a layout becomes popular
![Page 16: Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins,](https://reader036.vdocument.in/reader036/viewer/2022062720/56649efd5503460f94c11550/html5/thumbnails/16.jpg)
New AttributesNew Form Input Attributes
◦Meet the new attributes W3Schools
New Global Attributes◦W3Schools
What is the trend?◦More logical◦More functional◦High encapsulation
![Page 17: Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins,](https://reader036.vdocument.in/reader036/viewer/2022062720/56649efd5503460f94c11550/html5/thumbnails/17.jpg)
Obsolete 4.01 elementsFrom textbook page 189
![Page 18: Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins,](https://reader036.vdocument.in/reader036/viewer/2022062720/56649efd5503460f94c11550/html5/thumbnails/18.jpg)
APIsMultimedia APISession History APIDrag and Drop APIWeb workers APIWeb socket APIOthers
![Page 19: Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins,](https://reader036.vdocument.in/reader036/viewer/2022062720/56649efd5503460f94c11550/html5/thumbnails/19.jpg)
Add video and audioAdd video:
◦<video src=“” poster=“” controls>◦Controls:
Autoplay Loop Muted Preload: auto, none, metadata Examples in
http://www.cs.gsu.edu/~gliu6/2014fall/csc2320/Schedule.htm#videos
![Page 20: Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins,](https://reader036.vdocument.in/reader036/viewer/2022062720/56649efd5503460f94c11550/html5/thumbnails/20.jpg)
What is the future browserThe 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?
![Page 21: Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from “Learning Web Design (4th.)” by Jennifer NiederstRobbins,](https://reader036.vdocument.in/reader036/viewer/2022062720/56649efd5503460f94c11550/html5/thumbnails/21.jpg)
HomeworkRead Chapter 10Try new input types in chapter 9