1. HTML 5.0 By: Grant Henke Nov. 10 2009

2. To Be Covered What is HTML? A Brief History of HTML HTML 5.0 – Page Structure – Other New Elements – Changed Elements – New Attributes – Removed Elements & Attributes – APIs Demonstrations Closing Statements – Reminder

3. What is HTML? HTML stands for Hyper Text Markup Language HTML uses markup tags to describe web pages

4. Tags HTML tags are keywords surrounded by angle brackets ( ex: ) Tags normally come in pairs known as opening tags and closing tags ( ex: ) Interpreted by the browser

5. Example Heading Tags Paragraph Tags

6. To Be Covered What is HTML? A Brief History of HTML HTML 5.0 – Page Structure – Other New Elements – Changed Elements – New Attributes – Removed Elements & Attributes – APIs Demonstrations Closing Statements – Reminder

7. HTML Begins HTML began at CERN – Particle physics lab in Geneva, Switzerland Tim Berners-Lee – Computing services Idea: link text files to other text files Goal: Easier to organize, pool, and Cross- reference information

8. A Ready World Personal computer HyperCard – Macintosh – Bill Atkinson – 1980’s – A series of file cards linked to each other Similar Developments – Toolbook – PC – Backgrounds scripts/animations Only on same machine

9. Next Steps Distributed Name Service (DNS) – Mid 1980’s – Replace IP address with recognizable address Global Hypertext System – Current hypertext systems to complicated and computer specific Hyper Text Transfer Protocol (HTTP) – Tim Berners-Lee – Text Format was HTML Very Simple was based on Standard Generalized Mark-up (SGML) – Already Recognized internationally – Main addition was markup for a hypertext link

10. HTML Grows Easy to use and develop Tim encouraged others to contribute New version released – HTML+ Dave Raggett More capable, mimics print media More appropriate for the masses New Browsers – Each adding proprietary tags and attributes – Lead to HTML chaos HTML 2 – Dan Connolly, et al.-1994 – Attempt to correct chaos – Implemented most widely used tags

11. Netscape and WC3 Netscape – 1994 – Extremely successful Allowed home computers to effectively access the web Mistaken for inventing the web – Began creating its own tags and attributes World Wide Web Consortium (W3C) – Help stop chaos of new proprietary html – Goal: to fulfill the potential of the web through development of open standards.

12. Advancement HTML 3 - 1995 – Added many new tags to the standard. Cascading Style Sheets (CSS) - 1995 – Simpler styling of pages and tags Internet Explorer -1995 Continued Rapid Development – Scripting Draft – 1996 – HTML 3.2 – 1997 – HTML 4 – 1998 – HTML 4.01 – 1999 – XHTML 1.0 - 2000

13. Web Accelerating

14. To Be Covered What is HTML? A Brief History of HTML HTML 5.0 – Page Structure – Other New Elements – Changed Elements – New Attributes – Removed Elements & Attributes – APIs Demonstrations Closing Statements – Reminder

15. HTML 5 Work Started in 2004 Working Draft – Until at least 2 complete implementations Partially supported by most major browsers – Could change constantly

16. Goals of HTML 5 Define a single language that can be written in standard HTML syntax and XML syntax. (XHTML) Defines detailed processing models to foster interoperable implementations.

17. Goals of HTML 5 Cont’d Improve markup for documents. Introduce markup and Application programming Interfaces (API’s) for emerging idioms, such as Web applications.

18. To Be Covered What is HTML? A Brief History of HTML HTML 5.0 – Backwards Compatible – Page Structure – Other New Elements – Changed Elements – New Attributes – Removed Elements & Attributes – APIs Demonstrations Closing Statements – Reminder

19. Backwards Compatible User Agent Requirements Older tags from older documents can still be displayed correctly User notices no difference viewing old page with HTML 5 capable browser Authoring Requirements Only HTML 5 tags can be used by the developer Tags removed from HTML 5 Specification will not work No more marking tags as depreciated and allowing old tags to continue to be used in development

20. To Be Covered What is HTML? A Brief History of HTML HTML 5.0 – Backwards Compatible – Page Structure – Other New Elements – Changed Elements – New Attributes – Removed Elements & Attributes – APIs Demonstrations Closing Statements – Reminder

21. Current page structure Div tags with a descriptive id or class

22. HTML 5 Page Structure New tags for each of the common sections Able to use Div tags with descriptive id or class

23. New Page Structure Elements header represents a group of introductory or navigational aids. section represents a generic document or application section. article represents an independent piece of content of a document, such as a blog entry or newspaper article. aside represents an independent piece of content of a document, such as a blog entry or newspaper article.

24. New Page Structure Elements Cont’d hgroup represents the header of a section. footer represents a footer for a section and can contain information about the author, copyright information, et cetera. nav represents a section of the document intended for navigation. dialog can be used to mark up a conversation. figure can be used to associate a caption together with some embedded content, such as a graphic or video.

25. To Be Covered What is HTML? A Brief History of HTML HTML 5.0 – Backwards Compatible – Page Structure – New Elements – Changed Elements – New Attributes – Removed Elements & Attributes – APIs Demonstrations Closing Statements – Reminder

26. Advanced Content Support Current HTML – Doesn’t support advanced content video, audio, etc. – Developers rely on flash and other plug-ins HTML 5 – Simplifies Implementation of advanced content – Plug-in not needed

27. New Elements video and audio for multimedia content. – Provide an API so authors can script their own user interface – Also a way to trigger a users default interface embed is used for plug-in content. mark represents a run of marked text. progress represents a completion of a task, such as downloading or when performing a series of expensive operations.

28. New Elements Cont’d meter represents a measurement. time represents a date and/or time. ruby, rt and rp allow for marking up ruby annotations. canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs or games. command represents a command the user can invoke.

29. New Elements Cont’d details represents additional information or controls which the user can obtain on demand. datalist together with the a new list attribute for input can be used to make comboboxes. keygen represents control for key pair generation. output represents some type of output, such as from a calculation done through scripting.

30. To Be Covered What is HTML? A Brief History of HTML HTML 5.0 – Backwards Compatible – Page Structure – New Elements – Changed Elements – New Attributes – Removed Elements & Attributes – APIs Demonstrations Closing Statements – Reminder

31. Changed Elements Internet has changed significantly since last version of HTML Meaning of following elements changed in HTML 5: – a, address, b, hr, i, label, menu, small, strong

32. To Be Covered What is HTML? A Brief History of HTML HTML 5.0 – Backwards Compatible – Page Structure – New Elements – Changed Elements – New Attributes – Removed Elements & Attributes – APIs Demonstrations Closing Statements – Reminder

33. New Attributes What are Attributes? – Settings for the tag – Each tag has its own set of attributes – id is an attribute Tags worth Noting – Value - for li tag no longer depreciated – Placeholder - for text areas and input tags – Form - for input, output, select, textarea, button and fieldset these elements can now be placed anywhere on a page, not just as descendants of the form element.

34. New Attributes Cont’d Tags worth Noting cont’d – type and label – for menu tag. They allow transformation into a menu as found in typical user interfaces. – manifest - for html tag. points to an application cache manifest used in conjunction with the API for offline Web applications. – Global Attributes contenteditable, draggable, spellcheck Many More Attributes

35. To Be Covered What is HTML? A Brief History of HTML HTML 5.0 – Backwards Compatible – Page Structure – New Elements – Changed Elements – New Attributes – Removed Elements & Attributes – APIs Demonstrations Closing Statements – Reminder

36. Removed Elements Removed because not used often, created confusion, or their function can be handled by other elements Elements Removed – acronym, applet, isindex, dir

37. Removed Attributes Removed because they are not used often or have been replaced by other methods Presentational attributes from HTML 4 are removed – Better handled by CSS Removed Attributes not listed due to large number

38. To Be Covered What is HTML? A Brief History of HTML HTML 5.0 – Backwards Compatible – Page Structure – New Elements – Changed Elements – New Attributes – Removed Elements & Attributes – APIs Demonstrations Closing Statements – Reminder

39. Application Programming Interfaces (APIs) 2D drawing API which can be used with the new canvas element. API for playing of video and audio which can be used with the new video and audio elements. An API that enables offline Web applications. An API that allows a Web application to register itself for certain protocols or media types.

40. APIs Cont’d Editing API in combination with a new global contenteditable attribute. Drag & drop API in combination with a draggable attribute. API that exposes the history and allows pages to add to it to prevent breaking the back button. Cross-document messaging.

41. To Be Covered What is HTML? A Brief History of HTML HTML 5.0 – Backwards Compatible – Page Structure – New Elements – Changed Elements – New Attributes – Removed Elements & Attributes – APIs Demonstrations Closing Statements – Reminder

42. Demonstrations Links – http://html5demos.com/ http://html5demos.com/ – http://www.dailymotion.com/op envideodemo http://www.dailymotion.com/op envideodemo – http://htmlfive.appspot.com/ http://htmlfive.appspot.com/ – http://9elements.com/io/project s/html5/canvas/ http://9elements.com/io/project s/html5/canvas/ – http://www.benjoffe.com/code/ games/torus/ http://www.benjoffe.com/code/ games/torus/ – http://www.youtube.com/html5 http://www.youtube.com/html5 – http://html5tutorial.net/ http://html5tutorial.net/ Videos – http://www.youtube.com/watch ?v=siOHh0uzcuY http://www.youtube.com/watch ?v=siOHh0uzcuY – http://www.youtube.com/watch ?v=AusOPz8Ww80 http://www.youtube.com/watch ?v=AusOPz8Ww80 These pages and there content could be changed at anytime and the information on the pages may become irrelevant to current HTML 5 standards

43. To Be Covered What is HTML? A Brief History of HTML HTML 5.0 – Backwards Compatible – Page Structure – New Elements – Changed Elements – New Attributes – Removed Elements & Attributes – APIs Demonstrations Closing Statements – Reminder

44. Closing Statements HTML 5 – Capacity to Revolutionize the internet – A lot of obstacles ahead Agreement on standards Developers making the leap to HTML 5 Support of browsers

45. To Be Covered What is HTML? A Brief History of HTML HTML 5.0 – Backwards Compatible – Page Structure – New Elements – Changed Elements – New Attributes – Removed Elements & Attributes – APIs Demonstrations Closing Statements – Reminder

46. Reminder HTML 5 is, as of November 10, 2009, in working draft form and changes may be made. It is possible that information in this document may be incorrect if changes are made. Please refer to WC3 for the most up to date draft of HTML 5.