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