HTML 5.0 By: Grant Henke Nov

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

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

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

Example Heading Tags Paragraph Tags

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

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

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

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

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 – Attempt to correct chaos – Implemented most widely used tags

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.

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

Web Accelerating

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

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

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.

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.

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

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

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

Current page structure Div tags with a descriptive id or class

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

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.

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.

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

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

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.

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.

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.

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

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

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

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.

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

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

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

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

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

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.

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.

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

Demonstrations Links – – envideodemo envideodemo – – s/html5/canvas/ s/html5/canvas/ – games/torus/ games/torus/ – – Videos – ?v=siOHh0uzcuY ?v=siOHh0uzcuY – ?v=AusOPz8Ww80 ?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

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

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

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

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.