| |
|
Slide 1 :
|
HTML Advanced: HTML 5 |
|
|
Slide 2 :
|
Welcome This slideshow presentation is designed to introduce you to HTML 5. It is a workshop available at www.slideworld.com.
|
|
|
Slide 3 :
|
HTML5: What is it? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM.
The previous version of HTML came in 1999 through which, the world of web changed drastically.
However, HTML5 is still in a development phase. |
|
|
Slide 4 :
|
HTML5: Origins HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
Initially, W3C was working with XHTML 2.0 while, WHATWG was working with web forms and applications. But, in 2006, both of these organizations decided to collaborate and create a new version of HTML. |
|
|
Slide 5 :
|
HTML5: Ground Rules Some guidleines have been prepared for efficient processing of HTML5:
> New features should be based on HTML,
CSS, DOM, and JavaScript
> Reduce the need for external plugins
> Improved handling of errors
> Increased markups to replace scripting
> HTML5 should be device independent
> Visibility of Dev process
|
|
|
Slide 6 :
|
HTML5: New Features > Enabled painting
> Use of media playback
> Improved support for storage
> New content specific elements
> New controls like, calendar, date, time, email, url, search |
|
|
Slide 7 :
|
HTML5: Support HTML5 is not yet an official standard as none of the browsers has full HTML5 support.
|
|
|
Slide 8 :
|
HTML5: Support You may well ask: “How can I start using HTML5 if older browsers don’t support it?” But the question itself is misleading.
HTML5 is not one big thing; it is a collection of individual features. You can only detect support for individual features, like painting, media, or geolocation. |
|
|
Slide 9 :
|
HTML5: Support It is a fact that HTML 4 is the most successful markup format ever.
HTML5 builds on that success as you don’t have to throw away your existing markup. You don’t even need to relearn things you already know. If your web application worked yesterday in HTML 4, it will still work today in HTML5. |
|
|
Slide 10 :
|
HTML5: Example HTML5 supports all the form controls from HTML 4 and also includes new input controls. Some of these are long-overdue additions like sliders and date pickers and others as well. |
|
|
Slide 11 :
|
HTML5: Example For example, the email input type looks just like a text box, but mobile browsers will customize their onscreen keyboard to make it easier to type email addresses. Older browsers that don’t support the email input type will treat it as a regular text field, and the form still works with no markup changes or scripting hacks. |
|
|
Slide 12 :
|
HTML5: DOCTYPE The DOCTYPE which comes before the beginning tag is much simpler in HTML 5. Here are some examples of what it looks like now...
|
|
|
Slide 13 :
|
HTML: DOCTYPE Previous versions of HTML defined a lot of doctypes, and choosing the right one could be tricky. In HTML5, there is only one doctype i.e., |
|
|
Slide 14 :
|
HTML: Support Whether you want to do painting on a canvas, play video in media player or build web applications that work offline, you’ll find that HTML5 is already well-supported. |
|
|
Slide 15 :
|
HTML: Support Firefox, Safari, Chrome, Opera, and mobile browsers already support canvas, video, geolocation and more. Google already supports microdata annotations. Even Microsoft — rarely known for blazing the trail of standards support — will be supporting most HTML5 features in the upcoming Internet Explorer 9. |
|
|
Slide 16 :
|
HTML5: MIME types Every time your web browser requests a page, the web server sends “headers” before it sends the actual page markup. Headers are important, because they tell your browser how to interpret the page markup that follows.
|
|
|
Slide 17 :
|
HTML5 The most important header is called Content-Type, and it looks like this:
Content-Type: text/html
“text/html” is called the “content type” of the page. |
|
|
Slide 18 :
|
HTML5 This header is the only thing that determines what a particular resource truly is, and therefore how it should be rendered. Images have their own specific type (image/jpeg for JPEG images, image/png for PNG images, and so on). JavaScript files have their own particular type. CSS stylesheets have their own particular type. |
|
|
Slide 19 :
|
HTML5: Detection When your browser renders a web page, it constructs a Document Object Model (DOM), a collection of objects that represent the HTML elements on the page. Every element is represented in the DOM by a different object.
In browsers that support HTML5 features, certain objects will have unique properties. A quick peek at the DOM will tell you which features are supported. |
|
|
Slide 20 :
|
HTML5: Detection [Modernizr] is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features. To use it, include the following
...
| |