HTML5 introduction for beginners

Embed Size (px)


An introduction to HTML5 and its API's for the extream beginners those who already know what is HTML. Presentation also includes few features the CSS3.

Text of HTML5 introduction for beginners

HTML5web development to the next level

By Vineeth N K

This template can be used as a starter file for presenting training materials in a group setting.

SectionsRight-click on a slide to add sections. Sections can help to organize your slides or facilitate collaboration between multiple authors.

NotesUse the Notes section for delivery notes or to provide additional details for the audience. View these notes in Presentation View during your presentation. Keep in mind the font size (important for accessibility, visibility, videotaping, and online production)

Coordinated colors Pay particular attention to the graphs, charts, and text boxes. Consider that attendees will print in black and white or grayscale. Run a test print to make sure your colors work when printed in pure black and white and grayscale.

Graphics, tables, and graphsKeep it simple: If possible, use consistent, non-distracting styles and colors.Label all graphs and tables.

HTML5 is a specification that describes some new tags and markup, as well as some JavaScript APIs.

HTML5 includes the fifth revision of the HTML markup language, CSS3, and a series of JavaScript APIs. Together, these technologies enable you to create complex applications that previously could be created only for desktop platforms.

HTML5 does not belong to a company or a specific browser. It has been forged by acommunity of people interested in evolving the weband a consortium of technological leaders that includes Google, Microsoft, Apple, Mozilla, Facebook, IBM, HP, Adobe, andmany others.

What is HTML5 ?Give a brief overview of the presentation. Describe the major focus of the presentation and why it is important.Introduce each of the major topics.To provide a road map for the audience, you can repeat this Overview slide throughout the presentation, highlighting the particular topic you will discuss next.Evolution of HTML 4.0 and DOM level-2.

Removal or redefinition of presentational markup language.

Formalized foundation-level APIs

The evolution of browser into a programming platform.What is HTML5 ?Give a brief overview of the presentation. Describe the major focus of the presentation and why it is important.Introduce each of the major topics.To provide a road map for the audience, you can repeat this Overview slide throughout the presentation, highlighting the particular topic you will discuss next.


This is another option for an Overview slides using transitions.


Formalized the syntax and many of the rules that were already implemented19951997 HTML 3.2

Legally ignored by browser Manufactures who began to implement their own tags. 1998 Web Standard Project

Pushed for std. adoption added weight to the W3C recommendations & promoted standard based browsers

HTML 4.0

Stabilized syntax and structure of HTML becomes the standard for web authoring.

Major milestone.19992000 XHTML 1.0

Designed to move HTML towards XML DTDs often caused it to render as HTML.

More Structured XML based approach.

Strict rules.

The Growth of the Web

High bandwidth connections increase, as does the demand for multimedia & applications driven by technologies such as Flash, AJAX...

Work on XHTML 2.0 begins.

Focusing on strictly structural language.200020042004 The Rise of HTML5

HTML5 TIMELINE 2004 : The Rise of HTML5.

2004 : WHATWG (Web Hypertext Application Technology Working Group) begins what will become HTML5.

2007 : W3C charters new working group adopts WHATWGs work, renamed HTML5

2009 : W3C does not renew the XHTML 2.0 charter.

2010 : Driven in large part by Apple, Google & Microsoft, public interest in HTML5 grows.WHY DO WE NEED HTML5?

Backward compatibility.

Error Handling.

New Structure And Syntax.

Multimedia with less reliance on Plug-ins

Integrated APIs

Associated APIs

Backward Compatibility

Any user agent that support HTML5 also support documents written in previous versions of HTML.

One of the best reasons for you to embrace HTML5 today is that it works in most existing browsers.

ERROR HANDLING Previous specifications left error handling up to the user agents.

XHTML 2.0 featured draconian error handling.

Pages would stop rendering if an error was found.

HTML5 features detailed algorithms for parsing errors.This is another option for an Overview slide.

New Structure And Syntax DOCTYPE has been simplified.PRIOR DOCTYPES


HTML 4.01What will the audience be able to do after this training is complete? Briefly describe each objective how the audience will benefit from this presentation.

HTML 5NEW DOCTYPE Deprecated Tags HTML5 has introduced a lot of new elements, but the specification also deprecates quite a few common elements basefont big center font s strike tt u Aside from the presentational elements, support for frames has been removed.

Despite the widespread use, frames caused so many usability and accessibility issues

frame frameset noframes A few other elements are gone because there are better options are available.

acronym gets replaced by abbr. applet gets replaced by object. dir gets replaced by ul. In addition to deprecated elements, there are many attributes that are no longer valid. align link, vlink, alink, and text attributes on the body tag bgcolor height and width scrolling on the iframe element valign hspace and vspace cellpadding, cellspacing, and border on table New Structural tags and attributes. developers to wrap elements with extra div tags with IDs such as banner, sidebar, article, and footer As nesting depth of the div tag increases, more will be the confusion.

HTML5 specification introduces new tags specifically designed to divide a page into logical regions.

Defines a header region of a page or section.

Defines a footer region of a page or section.

Defines a navigation region of a page or section.

Defines a logical region of a page or a grouping of content.

Defines an article or complete piece of content.

Defines secondary or related content.

Custom data attributes

Allows addition of custom attributes to any elements using the data- pattern. [All browsers support reading these via JavaScripts getAttribute() method.]

Describes an amount within a range. [C5, F3.5, S4, O10]

Control that shows real-time progress toward goal. [Unsupported at publication time.] NEW FORM ELEMENTS Email field [] Displays a form field for email addresses.

URL field [] Displays a form field for URLs.

Telephone field [] Displays a form field for telephone numbers.

Search field [] Displays a form field for search keywords.

Slider (range) [] Displays a slider control.

Number [] Displays a form field for numbers, often as a spinbox. Date fields [] Displays a form field for dates. Supports date, month, or week.

Dates with Times [] Displays a form field for dates with times. Supports datetime, datetime-local, or time.

Color [] Displays a field for specifying colors.

Autofocus support [] Support for placing the focus on a specific form element.

Placeholder support [] Support for displaying placeholder text inside of a form field.

In-place editing support [] Support for in-place editing of content via the browser.MULTIMEDIA You dont need Flash or Silverlight for video, audio, and vector graphics anymore.

Embedding videos

Your browser does not support the video element.

Multiple Files & Scripting

Your browser does not support the video element.

Embedding audio

Download drums.mp3

Scalable Vector Graphics

The canvas element lets us create vector images within the HTML document using JavaScript.

var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');ctx.fillStyle = "rgb(200,0,0)";ctx.fillRect (10, 10, 55, 50);ctx.fillStyle = "rgba(0, 0, 200, 0.5)";ctx.fillRect (30, 30, 55, 50);

Canvas can be used to create simple or complex shapes or even create graphs and charts without resorting to server-side libraries, Flash, or other plugins.INTEGRATED APIs Video and audio API This provides multimedia plug-in within the browser.

Inline editing API Editing of contents in a web documents directly through the web browser.

Offline Application API Allows Applications to run without internet connection. Content renewed when connection restored. Can store 5MB of data. Application cache stores the offline details. Options in HTML5 to store data.

Web SQL Database or IndexedDB. Web storage (localStorage, sessionStorage)

History API Enables Applications to access to the browser history.

Web Protocol API Allows Applications to register themselves to the handlers of url scheme.Eg: Mail Applications could register themselves to handle mail protocols. File upload applications to FTP and so on.

Drag & Drop API Allows Application to enable, control and respond to the dragging and dropping of page elements.

ASSOSCIATED APIs Geolocation API Geolocation determines a persons