PC
Uploaded byPeeyush Chandel
PPT, PDF1,441 views

Html5

This document provides an overview of HTML5, including what's new in HTML5 like new semantic elements, canvas, video, audio, local storage, and web workers. It discusses the history of HTML5 and how to use Modernizr to detect HTML5 support in older browsers. It also addresses challenges of browser support and solutions for getting HTML5 features to work across browsers.

Embed presentation

Downloaded 137 times
HTML 5 Overview
Why we Need it ?
History
WHATWG The Web Hypertext Application Technology Working Group
What's New In HTML 5?
-and much more <canvas> <video> <audio> Local Storage Web Workers Geo Location <input types> Form Elements Micro Data <meter> <progress>
Detecting HTML 5 how can i use it if older browsers doesn't support it?
Detecting HTML 5 Two Ways: 1.Using Java Script 2.Modernizr: An HTML5 Detection Library
Modernizr( An HTML5 Detection Library) It's an open source, MIT-licensed JavaScript library How can i use it: Download it: http://www.modernizr.com Include it in your web page head section Always use the latest version
Modernizr( An HTML5 Detection Library) Example: <!DOCTYPE html> <html> <head> <meta charset=&quot;utf-8&quot;> <title> HTML5</title> <script src=&quot;modernizr.min.js&quot;></script> </head> <body> ... </body> </html>
Modernizr( An HTML5 Detection Library) Let's Detect the video tag support if (Modernizr.video){ // let's play some } else { //do something else }
Modernizr( An HTML5 Detection Library) Let's Detect the Local Storage tag support if (Modernizr.localstorage){ // local storage is available ! } else { //do something else try Google Gears }
Dive into HTML 5 The Doctype (Interesting History Behaind it) <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN &quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd &quot;> This Doctype is very long and ugly. Now the all new HTML 5 doctype <!DOCTYPE html>
Dive into HTML 5 The ROOT element <html xmlns=&quot; http://www.w3.org/1999/xhtml &quot; lang=&quot;en&quot; xml:lang=”en”> It's the old Root Element type (it's also fine with HTML5) Now in HTML 5 <html lang=&quot;en&quot; xml:lang=&quot;en&quot;>
New Semantic Elements
-and much more <section> <nav> <article> <hgroup> <footer> <header> <aside> <time> <figure> <legend>
 
 
<header> <nav> <aside> <article> <footer>
<time> <figure> <legend> <meter>
<section> <h1> <h1> <h1>
Dive into HTML 5 The Biggest question is: Why i use/need all this if every thing is working fine today with my HTML 4? The Answer is: It's more practicle. It's search engine friendly.
What happen with OLD Browsers? No Problem with Chrome,Firefox,Safari,Webkit. But what happen with Internet Explorer? Again the IE is the culprit.
We have two solutions for Mr. IE 1. <!--[if lt IE 9]> <script> var e = (&quot;abbr,article,aside,audio,canvas,datalist,details,&quot; + &quot;figure,footer,header,hgroup,mark,menu,meter,nav,output,&quot; + &quot;progress,section,time,video&quot;).split(','); for (var i = 0; i < e.length; i++) { document.createElement(e[i]); } </script> <![endif]--> 2.Simply use html5.js script http://html5shiv.googlecode.com/svn/trunk/html5.js
<Canvas> <canvas width=&quot;300&quot; height=&quot;225&quot;></canvas> You can display Text,Image,Gradient etc. You can make games without using flash. But what happen with Internet Explorer? Again the IE is the culprit. Use excanvas.js (A java scipt library) http://code.google.com/p/explorercanvas/
<video> <video src=&quot;pr6.webm&quot; width=&quot;320&quot; height=&quot;240&quot;></video> <video src=&quot;pr6.webm&quot; width=&quot;320&quot; height=&quot;240&quot; controls ></video> <video src=&quot;pr6.webm&quot; width=&quot;320&quot; height=&quot;240&quot; preload ></video> <video src=&quot;pr6.webm&quot; width=&quot;320&quot; height=&quot;240&quot; autoplay ></video> For internet explorer earlier than 9 th version use Flash :( I am really sorry we have no solutions yet.
Do you know video Containers?
Video Encoding You can't play all formats of video or audio. Only .ogg .webM .H.264 is supported then what? Firefogg HandBrake Ffmpeg Always make 3 formats of your video/audio
Biggest Problem with video/audio A single browser doesn't support all formats. Then <source> tag can solve the problem and save bandwidth and speed up your website <video width=&quot;320&quot; height=&quot;240&quot; controls> <source src=&quot;pr6.mp4&quot; type='video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;'> <source src=&quot;pr6.webm&quot; type='video/webm; codecs=&quot;vp8, vorbis&quot;'> <source src=&quot;pr6.ogv&quot; type='video/ogg; codecs=&quot;theora, vorbis&quot;'> </video> You can also use MIME header
Geo-Location You can identify the exact Geo-Location of your user but if user permittes you. Do you how Geo-Location is identified? You can also identified the speed of the user's web device. Use Google Gears for Older browsers. Best solution is use geo.js for all browsers including Mobiles.
Offline Storage It's one of the most interesting feature of html5. Your website can store data on your computer(like database) and you can use it in offline mode. It also require user permission. Security issue and automatic update.
Input types <input type=&quot;number&quot;> <input type=&quot;datetime&quot;> <input type=&quot;range&quot;> <input type=&quot;color&quot;> <input type=&quot;tel&quot;> <input type=&quot;url&quot;> <input type=&quot;email&quot;> <input type=&quot;month&quot;> <input type=&quot;date&quot;> <input type=&quot;search&quot;> <input type=&quot;time&quot;> <input type=&quot;week&quot;>
Thank You Queries?

More Related Content

PPT
Developing Gadgets
byQuirk
 
PDF
Lca2009 Video A11y
byguesta3d158
 
PPT
Ajax to the Moon
bydavejohnson
 
PPTX
Real-time Ruby for the Real-time Web
byIlya Grigorik
 
PPTX
Spark View Engine Intro
byScott Cowan
 
PPTX
RESTful design
byRobert MacLean
 
PDF
Tokyo Tyrant + PHP
byKenichirou Oyama
 
PDF
AADays Poland: Perfecting the Craft of Test Automation
byMaaret Pyhäjärvi
 
Developing Gadgets
byQuirk
 
Lca2009 Video A11y
byguesta3d158
 
Ajax to the Moon
bydavejohnson
 
Real-time Ruby for the Real-time Web
byIlya Grigorik
 
Spark View Engine Intro
byScott Cowan
 
RESTful design
byRobert MacLean
 
Tokyo Tyrant + PHP
byKenichirou Oyama
 
AADays Poland: Perfecting the Craft of Test Automation
byMaaret Pyhäjärvi
 

What's hot

PPTX
Comments: Why not What
bySean Kelly
 
PPT
KMUTNB - Internet Programming 3/7
byphuphax
 
PPTX
Pratical HTML5
byLeon Poole
 
PPT
Html
byelsye
 
PPT
Grails and Dojo
bySven Haiges
 
ODP
Web Development in Django
byLakshman Prasad
 
PDF
Talentum: Testiautomaation tekemisen taito
byMaaret Pyhäjärvi
 
PPTX
Accelerated Mobile - Beyond AMP
byJono Alderson
 
PDF
Mastermind 10th march full page cache
byUnderstandingE
 
Comments: Why not What
bySean Kelly
 
KMUTNB - Internet Programming 3/7
byphuphax
 
Pratical HTML5
byLeon Poole
 
Html
byelsye
 
Grails and Dojo
bySven Haiges
 
Web Development in Django
byLakshman Prasad
 
Talentum: Testiautomaation tekemisen taito
byMaaret Pyhäjärvi
 
Accelerated Mobile - Beyond AMP
byJono Alderson
 
Mastermind 10th march full page cache
byUnderstandingE
 

Similar to Html5

PPT
Html5
byHarry Potter
 
PPT
Introdution to HTML 5
byonkar_bhosle
 
PPT
Html5
byneeting
 
PPTX
Html 5
byNguyen Quang
 
PPTX
What is HTML 5?
bySusan Winters
 
PPTX
Hi5 with HTML5
byArif Nezami
 
PPT
Html5 Overview
byOwen Williams
 
PPTX
HTML5 - What h#@$ is it?
byCarlos Ramon
 
PPTX
Html 5.0
byKristof Degrave
 
ZIP
Looking into HTML5
byChristopher Schmitt
 
PPT
HTML5 Overview
byreybango
 
PPTX
Los Angeles HTML5 User Group Meeting Ask the Expert Session
byPeter Lubbers
 
PPTX
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
byTodd Anglin
 
PPT
Is it time to start using HTML 5
byRavi Raj
 
PPS
Html5
byneeting
 
PPT
Html5
byHoang Nguyen
 
PPT
Html5
byFraboni Ec
 
PDF
What you need to know bout html5
byKevin DeRudder
 
PDF
Word camp nextweb
byPanagiotis Grigoropoulos
 
PDF
Word camp nextweb
byGreekTuts Ελληνικά Βοηθήματα
 
Html5
byHarry Potter
 
Introdution to HTML 5
byonkar_bhosle
 
Html5
byneeting
 
Html 5
byNguyen Quang
 
What is HTML 5?
bySusan Winters
 
Hi5 with HTML5
byArif Nezami
 
Html5 Overview
byOwen Williams
 
HTML5 - What h#@$ is it?
byCarlos Ramon
 
Html 5.0
byKristof Degrave
 
Looking into HTML5
byChristopher Schmitt
 
HTML5 Overview
byreybango
 
Los Angeles HTML5 User Group Meeting Ask the Expert Session
byPeter Lubbers
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
byTodd Anglin
 
Is it time to start using HTML 5
byRavi Raj
 
Html5
byneeting
 
Html5
byHoang Nguyen
 
Html5
byFraboni Ec
 
What you need to know bout html5
byKevin DeRudder
 
Word camp nextweb
byPanagiotis Grigoropoulos
 
Word camp nextweb
byGreekTuts Ελληνικά Βοηθήματα
 

Recently uploaded

PDF
[BDD 2025 - Mobile Development] Exploring Apple’s On-Device FoundationModels
byWintari Yasmin
 
PDF
Parallel Computing BCS702 Module notes of the vtu college 7th sem 4.pdf
byMatheshVishnu
 
PDF
Transforming Content Operations in the Age of AI
byEnterprise Knowledge
 
PDF
Mulesoft Meetup Online Portuguese: MCP e IA
byPedro Baroni
 
PDF
[DevFest Strasbourg 2025] - NodeJs Can do that !!
bymoassiongbon
 
PDF
[BDD 2025 - Mobile Development] Mobile Engineer and Software Engineer: Are we...
bywintari3
 
PDF
[BDD 2025 - Full-Stack Development] Digital Accessibility: Why Developers nee...
bywintari3
 
PPTX
"Feelings versus facts: why metrics are more important than intuition", Igor ...
byFwdays
 
PDF
Accessibility & Inclusion: What Comes Next. Presentation of the Digital Acces...
byAssociazione Digital Days
 
PPTX
MuleSoft AI Series : Introduction to MCP
byMulesoftMunichMeetup
 
PDF
Lets Build a Serverless Function with Kiro
byChris Bingham
 
PDF
[BDD 2025 - Full-Stack Development] The Modern Stack: Building Web & AI Appli...
byWintari Yasmin
 
PDF
Transforming Supply Chains with Amazon Bedrock AgentCore (AWS Swiss User Grou...
byChris Bingham
 
PDF
MuleSoft Meetup: Dreamforce'25 Tour- Vibing With AI & Agents.pdf
byTintu Jacob Shaji
 
PPTX
Guardrails in Action - Ensuring Safe AI with Azure AI Content Safety.pptx
byUdaiappa Ramachandran
 
PDF
Transcript: The partnership effect: Libraries and publishers on collaborating...
byBookNet Canada
 
PPTX
Leon Brands - Intro to GPU Occlusion (Graphics Programming Conference 2024)
byleonbrands1998
 
PDF
DUBAI IT MODERNIZATION WITH AZURE MANAGED SERVICES.pdf
byLogicEra
 
PDF
Integrating AI with Meaningful Human Collaboration
byCadabra Studio
 
PDF
5 Common Supply Chain Attacks and How They Work | CyberPro Magazine
byCyberPro Magazine
 
[BDD 2025 - Mobile Development] Exploring Apple’s On-Device FoundationModels
byWintari Yasmin
 
Parallel Computing BCS702 Module notes of the vtu college 7th sem 4.pdf
byMatheshVishnu
 
Transforming Content Operations in the Age of AI
byEnterprise Knowledge
 
Mulesoft Meetup Online Portuguese: MCP e IA
byPedro Baroni
 
[DevFest Strasbourg 2025] - NodeJs Can do that !!
bymoassiongbon
 
[BDD 2025 - Mobile Development] Mobile Engineer and Software Engineer: Are we...
bywintari3
 
[BDD 2025 - Full-Stack Development] Digital Accessibility: Why Developers nee...
bywintari3
 
"Feelings versus facts: why metrics are more important than intuition", Igor ...
byFwdays
 
Accessibility & Inclusion: What Comes Next. Presentation of the Digital Acces...
byAssociazione Digital Days
 
MuleSoft AI Series : Introduction to MCP
byMulesoftMunichMeetup
 
Lets Build a Serverless Function with Kiro
byChris Bingham
 
[BDD 2025 - Full-Stack Development] The Modern Stack: Building Web & AI Appli...
byWintari Yasmin
 
Transforming Supply Chains with Amazon Bedrock AgentCore (AWS Swiss User Grou...
byChris Bingham
 
MuleSoft Meetup: Dreamforce'25 Tour- Vibing With AI & Agents.pdf
byTintu Jacob Shaji
 
Guardrails in Action - Ensuring Safe AI with Azure AI Content Safety.pptx
byUdaiappa Ramachandran
 
Transcript: The partnership effect: Libraries and publishers on collaborating...
byBookNet Canada
 
Leon Brands - Intro to GPU Occlusion (Graphics Programming Conference 2024)
byleonbrands1998
 
DUBAI IT MODERNIZATION WITH AZURE MANAGED SERVICES.pdf
byLogicEra
 
Integrating AI with Meaningful Human Collaboration
byCadabra Studio
 
5 Common Supply Chain Attacks and How They Work | CyberPro Magazine
byCyberPro Magazine
 

Html5

  • 1.
  • 2.
  • 3.
  • 4.
    WHATWG The WebHypertext Application Technology Working Group
  • 5.
  • 6.
    -and much more<canvas> <video> <audio> Local Storage Web Workers Geo Location <input types> Form Elements Micro Data <meter> <progress>
  • 7.
    Detecting HTML5 how can i use it if older browsers doesn't support it?
  • 8.
    Detecting HTML5 Two Ways: 1.Using Java Script 2.Modernizr: An HTML5 Detection Library
  • 9.
    Modernizr( An HTML5Detection Library) It's an open source, MIT-licensed JavaScript library How can i use it: Download it: http://www.modernizr.com Include it in your web page head section Always use the latest version
  • 10.
    Modernizr( An HTML5Detection Library) Example: <!DOCTYPE html> <html> <head> <meta charset=&quot;utf-8&quot;> <title> HTML5</title> <script src=&quot;modernizr.min.js&quot;></script> </head> <body> ... </body> </html>
  • 11.
    Modernizr( An HTML5Detection Library) Let's Detect the video tag support if (Modernizr.video){ // let's play some } else { //do something else }
  • 12.
    Modernizr( An HTML5Detection Library) Let's Detect the Local Storage tag support if (Modernizr.localstorage){ // local storage is available ! } else { //do something else try Google Gears }
  • 13.
    Dive into HTML5 The Doctype (Interesting History Behaind it) <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN &quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd &quot;> This Doctype is very long and ugly. Now the all new HTML 5 doctype <!DOCTYPE html>
  • 14.
    Dive into HTML5 The ROOT element <html xmlns=&quot; http://www.w3.org/1999/xhtml &quot; lang=&quot;en&quot; xml:lang=”en”> It's the old Root Element type (it's also fine with HTML5) Now in HTML 5 <html lang=&quot;en&quot; xml:lang=&quot;en&quot;>
  • 15.
  • 16.
    -and much more<section> <nav> <article> <hgroup> <footer> <header> <aside> <time> <figure> <legend>
  • 17.
  • 18.
  • 19.
    <header> <nav> <aside><article> <footer>
  • 20.
  • 21.
  • 22.
    Dive into HTML5 The Biggest question is: Why i use/need all this if every thing is working fine today with my HTML 4? The Answer is: It's more practicle. It's search engine friendly.
  • 23.
    What happen withOLD Browsers? No Problem with Chrome,Firefox,Safari,Webkit. But what happen with Internet Explorer? Again the IE is the culprit.
  • 24.
    We have twosolutions for Mr. IE 1. <!--[if lt IE 9]> <script> var e = (&quot;abbr,article,aside,audio,canvas,datalist,details,&quot; + &quot;figure,footer,header,hgroup,mark,menu,meter,nav,output,&quot; + &quot;progress,section,time,video&quot;).split(','); for (var i = 0; i < e.length; i++) { document.createElement(e[i]); } </script> <![endif]--> 2.Simply use html5.js script http://html5shiv.googlecode.com/svn/trunk/html5.js
  • 25.
    <Canvas> <canvas width=&quot;300&quot;height=&quot;225&quot;></canvas> You can display Text,Image,Gradient etc. You can make games without using flash. But what happen with Internet Explorer? Again the IE is the culprit. Use excanvas.js (A java scipt library) http://code.google.com/p/explorercanvas/
  • 26.
    <video> <video src=&quot;pr6.webm&quot;width=&quot;320&quot; height=&quot;240&quot;></video> <video src=&quot;pr6.webm&quot; width=&quot;320&quot; height=&quot;240&quot; controls ></video> <video src=&quot;pr6.webm&quot; width=&quot;320&quot; height=&quot;240&quot; preload ></video> <video src=&quot;pr6.webm&quot; width=&quot;320&quot; height=&quot;240&quot; autoplay ></video> For internet explorer earlier than 9 th version use Flash :( I am really sorry we have no solutions yet.
  • 27.
    Do you knowvideo Containers?
  • 28.
    Video Encoding Youcan't play all formats of video or audio. Only .ogg .webM .H.264 is supported then what? Firefogg HandBrake Ffmpeg Always make 3 formats of your video/audio
  • 29.
    Biggest Problem withvideo/audio A single browser doesn't support all formats. Then <source> tag can solve the problem and save bandwidth and speed up your website <video width=&quot;320&quot; height=&quot;240&quot; controls> <source src=&quot;pr6.mp4&quot; type='video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;'> <source src=&quot;pr6.webm&quot; type='video/webm; codecs=&quot;vp8, vorbis&quot;'> <source src=&quot;pr6.ogv&quot; type='video/ogg; codecs=&quot;theora, vorbis&quot;'> </video> You can also use MIME header
  • 30.
    Geo-Location You canidentify the exact Geo-Location of your user but if user permittes you. Do you how Geo-Location is identified? You can also identified the speed of the user's web device. Use Google Gears for Older browsers. Best solution is use geo.js for all browsers including Mobiles.
  • 31.
    Offline Storage It'sone of the most interesting feature of html5. Your website can store data on your computer(like database) and you can use it in offline mode. It also require user permission. Security issue and automatic update.
  • 32.
    Input types <inputtype=&quot;number&quot;> <input type=&quot;datetime&quot;> <input type=&quot;range&quot;> <input type=&quot;color&quot;> <input type=&quot;tel&quot;> <input type=&quot;url&quot;> <input type=&quot;email&quot;> <input type=&quot;month&quot;> <input type=&quot;date&quot;> <input type=&quot;search&quot;> <input type=&quot;time&quot;> <input type=&quot;week&quot;>
  • 33.
    Thank You Queries?