HTML 5.0 By: Grant Henke Nov. 10 2009. To Be Covered What is HTML? A Brief History of HTML HTML 5.0...

transcript

HTML 5.0

By: Grant HenkeNov. 10 2009

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

• HTML tags are keywords surrounded by angle brackets ( ex: <html> )

• Tags normally come in pairs known as opening tags and closing tags ( ex: <b> </b> )

• Interpreted by the browser

Example

<h1>Heading Tags</h1>

<p>Paragraph Tags</p>

</body></html>

To Be Covered

Attributes– APIs

– 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.-

1994 – 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 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

Web Accelerating

To Be Covered

Attributes– APIs

– 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

– Backwards Compatible– Page Structure– Other New Elements– Changed Elements– New Attributes– Removed Elements &

Attributes– APIs

– 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

– Backwards Compatible– Page Structure– Other New Elements– Changed Elements– New Attributes– Removed Elements &

Attributes– APIs

– 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

– Backwards Compatible– Page Structure– New Elements– Changed Elements– New Attributes– Removed Elements &

Attributes– APIs

– 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

Attributes– APIs

– 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

Attributes– APIs

– Reminder

New Attributes

• What are Attributes?– Settings for the tag– Each tag has its own set

of attributes– <div id=“ex” > </div>

• 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

Attributes– APIs

– 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

Attributes– APIs

– 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

Attributes– APIs

– Reminder

Demonstrations

• Links– http://html5demos.com/– http://www.dailymotion.com/

openvideodemo– http://htmlfive.appspot.com/– http://9elements.com/io/

projects/html5/canvas/– http://www.benjoffe.com/

code/games/torus/– http://www.youtube.com/html5– http://html5tutorial.net/

• Videos– http://www.youtube.com/

watch?v=siOHh0uzcuY– 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

To Be Covered

Attributes– APIs

– 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

Attributes– APIs

– 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

HTML 5.0 By: Grant Henke Nov. 10 2009. To Be Covered What is HTML? A Brief History of HTML HTML 5.0...

Documents