View
225
Download
3
Category
Preview:
Citation preview
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
Tags
• 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
<html><body>
<h1>Heading Tags</h1>
<p>Paragraph Tags</p>
</body></html>
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.-
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
• 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– <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
• 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– 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
• 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.
Recommended