Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from...
-
Upload
kristina-gaines -
Category
Documents
-
view
218 -
download
4
Transcript of Chapter 10 History of HTML & HTML introduction Disclaimer: All words, pictures are adopted from...
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
In this chapterHistory of HTMLHTML 5
The birth of HTML
HTML Blows and standardization
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
More works on XHTMLXHTML 2.0
◦Not Backward-compatible◦Hard for Browser Implementation
XHTML 2.0 -> stuck for 10 yearsXHTML -> HTML 5
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
HTML 4.01 legacy
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
DOCTYPE declaration
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
What’s new in HTML 5A new DOCTYPENew elements and attributesObsolete 4.01 elementsAPIs
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
New Elements and Attributes
New Elements◦On Page 197.◦W3Schools.com
Semantic/ Structural, why not presentational?
Semantic elements
Semantic ElementsWhen a layout becomes popular
New AttributesNew Form Input Attributes
◦Meet the new attributes W3Schools
New Global Attributes◦W3Schools
What is the trend?◦More logical◦More functional◦High encapsulation
Obsolete 4.01 elementsFrom textbook page 189
APIsMultimedia APISession History APIDrag and Drop APIWeb workers APIWeb socket APIOthers
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
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?
HomeworkRead Chapter 10Try new input types in chapter 9