SlideShare a Scribd company logo
1 of 24
HTML 5
  Rohit Patel(04)
  Kunjan Patel(60)



                     ©Rohit patel
Topic To be Covered:
• Introduction
• Multimedia
• Graphics
• Applications
•Input types
• Structure and Semantics




                       ©Rohit patel
Introduction
 • What is HTML5?
      HTML5   is the new standard of HTML.
 • How Did HTML5 Get Started?
      HTML5   is a cooperation between the W3C and WHATWG.

 •Some rules for HTML5 were established:
     `

    New features should be based on HTML, CSS, DOM, and JavaScript.
    Reduce the need for external plug-in (like Flash).
    Better error handling.
    More markup to replace scripting.
    HTML5 should be device independent.
    The development process should be visible to the public.




                               ©Rohit patel
<!DOCTYPE>
  •The <!DOCTYPE> declaration must be the very first thing in your
  HTML document, before the <html> tag.

  •The <!DOCTYPE> declaration is not an HTML tag; it is an
  instruction to the web browser about what version of HTML the
  page is written in.

  HTML 5
  ex: <!DOCTYPE html>
  HTML 4.01
  ex: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">



                                 ©Rohit patel
HTML5 Multimedia
  •With HTML5, playing video and audio is easier than ever.

        • <video>
        • <audio>




                           ©Rohit patel
<video> & <audio>
 •Today, most videos are shown through a plug-in (like flash).
 However, different browsers may have different plug-ins.

 •HTML5 defines a new element which specifies a standard way to
 embed a video/movie on a web page: the <video> element.

 •Example

 •<video src=“movie.mp4” autoplay loop controls height=“300px”
 width=“300px” >

 •<audio src=“song.mp3” controls>




                            ©Rohit patel
©Rohit patel
Browser Supports(video Format)




Browser Supports(audio Format)




               ©Rohit patel
HTML5 Graphics
 With HTML5, drawing graphics is easier than
 ever:
    •Using the <canvas> element
    •Using inline SVG(Scalable Vector Graphics)
    •Using CSS3 2D/3D

<canvas>
 •The HTML5 <canvas> element is used to draw graphics, on the
 fly, via scripting (usually JavaScript).
 •example
 •The <canvas> element is only a container for graphics. You
 must use a script to actually draw the graphics.


                            ©Rohit patel
©Rohit patel
HTML5 Applications
 With HTML5, web application development is easier than
 ever.

  •Web Storage
  •App Cache
  •Web Worker




                         ©Rohit patel
• Web Storage
 • With HTML5, web pages can store data locally within the user's
 browser.
 • Earlier, this was done with cookies.
 • However, Web Storage is more secure and faster. The data is not
 included with every server request, but used ONLY when asked for.
 • The data is stored in key/value pairs, and a web page can only access
 data stored by itself.
 •There are two new objects for storing data on the client:
    localStorage - The localStorage object stores the data with
    no expiration date. The data will not be deleted when the
    browser is closed, and will be available the next day, week or year.

   sessionStorage - The sessionStorage object is equal to the
   localStorage object, except that it stores the data for only one
   session. The data is deleted when the user closes the browser
   window.
                                   ©Rohit patel
•App Cache
  • HTML5 introduces application cache, which means that a web
  application is cached, and accessible without an internet connection.

  Application cache gives an application three advantages:
  1. Offline browsing - users can use the application when they're offline
  2. Speed - cached resources load faster
  3. Reduced server load - the browser will only download
     updated/changed resources from the server
  •   To enable application cache, include the manifest attribute in the
      document's <html> tag,It’s simple text file.
  •   Example:
        <html manifest="demo.appcache">
         CACHE MANIFEST
         NETWORK
         FALLBACK


                                  ©Rohit patel
• Web Workers
 • A web worker is a JavaScript that runs in the
 background, independently of other scripts, without affecting the
 performance of the page.

 • When executing scripts in an HTML page, the page becomes
 unresponsive until the script is finished.

 • You can continue to do whatever you want: clicking, selecting
 things, etc., while the web worker runs in the background.

 • Web workers are supported in all major browsers, except Internet
 Explorer.




                                  ©Rohit patel
New Input Types
 • color
 • datetime
 • email
 • month
 • number
 • range
 • url




                  ©Rohit patel
• Input Type: color
  •Select a color from a color picker.
  • <input type="color" name="favcolor">
  •Example
• Input Type: datetime
  •Define a date and time control (with time zone).
  • <input type="datetime" name="bdaytime">
  •Example
• Input Type: email
  • Define a field for an e-mail address (will be automatically validated
  when submitted)
  • <input type="email" name="usremail">
  •Example

• Input Type: month
  • The month type allows the user to select a month and year.
  •<input type="month" name="bdaymonth">
  •Example
                                   ©Rohit patel
• Input Type: number
   • The number type is used for input fields that should contain
    numeric value.
   •You can also set restrictions on what numbers are accepted.
   • <input type="number" name="quantity" min="1" max="5">
   •Example
• Input Type: range
   • The range type is used for input fields that should contain a value
   from a range of numbers.
   •You can also set restrictions on what numbers are accepted.
   •<input type="range" name="points" min="1" max="10">
   •Example
• Input Type: url
 • The url type is used for input fields that should contain a URL
 address.
 •The value of the url field is automatically validated when the form is
 submitted.
 • <input type="url" name="homepage">
 •Example                             ©Rohit patel
<datalist>
 •The <datalist> element specifies a list of pre-defined options for an
 <input> element.
 •The <datalist> element is used to provide an "autocomplete" feature on
 <input> elements. Users will see a drop-down list of pre-defined options
 as they input data.
 •Example:

 <input list="browsers">

 <datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
 </datalist>
                                 ©Rohit patel
<output>
 •The <output> element represents the result of a calculation (like one
 performed by a script).

 •Example:

 <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
 <input type="range" name="a" value="50">100 +
 <input type="number" name="b" value="50">=
 <output name="x" for="a b"></output>
 </form>




                                  ©Rohit patel
•Structure and Semantics
               <div <header>
                    id="header">




              <div class="article">
                    <article>


 <div                                 <div
      <nav>   <div <section>
                   id="content">           <aside>
 id="nav">                            id="right">




               <div <footer>
                    id="footer">




                   ©Rohit patel
<progress> Tag
•Show completion progress of a taskProgress bars are widely used in
other applications Works with scripted applications.

•Useful for:
    •Indicate loading progress of an AJAX application
    •Show user progress through a series of forms
    •Making impatient users wait.

•Example:
Downloading progress:
<progress value="22" max="100"></progress>




                                   ©Rohit patel
<mark> Tag

•Marked or Highlighted text
•Indicates point of interest or relevance
Useful for:
    Highlighting relevant code in a code sample
    Highlighting search keywords in a document (e.g. in Google
    Cache)
•Example
  <p>This is a <mark>Mark</mark>tag example.</p>

          This is a Mark tag example.

                            ©Rohit patel
•HOW WELL DOES YOUR BROWSER SUPPORT HTML5?
                              Source: www.Html5test.com




              Where ,Score Out of 500
                   ©Rohit patel
THANKS

  ©Rohit patel

More Related Content

What's hot

Build Reusable Web Components using HTML5 Web cComponents
Build Reusable Web Components using HTML5 Web cComponentsBuild Reusable Web Components using HTML5 Web cComponents
Build Reusable Web Components using HTML5 Web cComponentsGil Fink
 
HTML5 Gaming Payment Platforms
HTML5 Gaming Payment PlatformsHTML5 Gaming Payment Platforms
HTML5 Gaming Payment PlatformsJonathan LeBlanc
 
Easy javascript
Easy javascriptEasy javascript
Easy javascriptBui Kiet
 
Angular - Chapter 6 - Firebase Integration
Angular - Chapter 6 - Firebase IntegrationAngular - Chapter 6 - Firebase Integration
Angular - Chapter 6 - Firebase IntegrationWebStackAcademy
 
Angular - Chapter 9 - Authentication and Authorization
Angular - Chapter 9 - Authentication and AuthorizationAngular - Chapter 9 - Authentication and Authorization
Angular - Chapter 9 - Authentication and AuthorizationWebStackAcademy
 
Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel
Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel AppelBuilding Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel
Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel.NET Conf UY
 
Offline strategies for HTML5 web applications - ConFoo13
Offline strategies for HTML5 web applications - ConFoo13Offline strategies for HTML5 web applications - ConFoo13
Offline strategies for HTML5 web applications - ConFoo13Stephan Hochdörfer
 
Enterprise PHP Architecture through Design Patterns and Modularization (Midwe...
Enterprise PHP Architecture through Design Patterns and Modularization (Midwe...Enterprise PHP Architecture through Design Patterns and Modularization (Midwe...
Enterprise PHP Architecture through Design Patterns and Modularization (Midwe...Aaron Saray
 
Building Modern Websites with ASP.NET by Rachel Appel
Building Modern Websites with ASP.NET by Rachel AppelBuilding Modern Websites with ASP.NET by Rachel Appel
Building Modern Websites with ASP.NET by Rachel Appel.NET Conf UY
 
Web Components Everywhere
Web Components EverywhereWeb Components Everywhere
Web Components EverywhereIlia Idakiev
 
Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012Stephan Hochdörfer
 
Offline Strategies for HTML5 Web Applications - ipc13
Offline Strategies for HTML5 Web Applications - ipc13Offline Strategies for HTML5 Web Applications - ipc13
Offline Strategies for HTML5 Web Applications - ipc13Stephan Hochdörfer
 
Spca2014 js link and display templates hatch
Spca2014 js link and display templates hatchSpca2014 js link and display templates hatch
Spca2014 js link and display templates hatchNCCOMMS
 
SOA with Zend Framework
SOA with Zend FrameworkSOA with Zend Framework
SOA with Zend FrameworkMike Willbanks
 
e-suap - client technologies- english version
e-suap - client technologies- english versione-suap - client technologies- english version
e-suap - client technologies- english versionSabino Labarile
 
Introduction to JavaScript for APEX Developers - Module 3: Working with the D...
Introduction to JavaScript for APEX Developers - Module 3: Working with the D...Introduction to JavaScript for APEX Developers - Module 3: Working with the D...
Introduction to JavaScript for APEX Developers - Module 3: Working with the D...Daniel McGhan
 
01 startoff angularjs
01 startoff angularjs01 startoff angularjs
01 startoff angularjsErhwen Kuo
 
The Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has ArrivedThe Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has ArrivedGil Fink
 
Rethinking Syncing at AltConf 2019
Rethinking Syncing at AltConf 2019Rethinking Syncing at AltConf 2019
Rethinking Syncing at AltConf 2019Joe Keeley
 

What's hot (20)

Build Reusable Web Components using HTML5 Web cComponents
Build Reusable Web Components using HTML5 Web cComponentsBuild Reusable Web Components using HTML5 Web cComponents
Build Reusable Web Components using HTML5 Web cComponents
 
HTML5 Gaming Payment Platforms
HTML5 Gaming Payment PlatformsHTML5 Gaming Payment Platforms
HTML5 Gaming Payment Platforms
 
Easy javascript
Easy javascriptEasy javascript
Easy javascript
 
Angular - Chapter 6 - Firebase Integration
Angular - Chapter 6 - Firebase IntegrationAngular - Chapter 6 - Firebase Integration
Angular - Chapter 6 - Firebase Integration
 
Angular - Chapter 9 - Authentication and Authorization
Angular - Chapter 9 - Authentication and AuthorizationAngular - Chapter 9 - Authentication and Authorization
Angular - Chapter 9 - Authentication and Authorization
 
Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel
Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel AppelBuilding Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel
Building Real Time Applications with ASP.NET SignalR 2.0 by Rachel Appel
 
Offline strategies for HTML5 web applications - ConFoo13
Offline strategies for HTML5 web applications - ConFoo13Offline strategies for HTML5 web applications - ConFoo13
Offline strategies for HTML5 web applications - ConFoo13
 
Enterprise PHP Architecture through Design Patterns and Modularization (Midwe...
Enterprise PHP Architecture through Design Patterns and Modularization (Midwe...Enterprise PHP Architecture through Design Patterns and Modularization (Midwe...
Enterprise PHP Architecture through Design Patterns and Modularization (Midwe...
 
Building Modern Websites with ASP.NET by Rachel Appel
Building Modern Websites with ASP.NET by Rachel AppelBuilding Modern Websites with ASP.NET by Rachel Appel
Building Modern Websites with ASP.NET by Rachel Appel
 
Web Components Everywhere
Web Components EverywhereWeb Components Everywhere
Web Components Everywhere
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012
 
Offline Strategies for HTML5 Web Applications - ipc13
Offline Strategies for HTML5 Web Applications - ipc13Offline Strategies for HTML5 Web Applications - ipc13
Offline Strategies for HTML5 Web Applications - ipc13
 
Spca2014 js link and display templates hatch
Spca2014 js link and display templates hatchSpca2014 js link and display templates hatch
Spca2014 js link and display templates hatch
 
SOA with Zend Framework
SOA with Zend FrameworkSOA with Zend Framework
SOA with Zend Framework
 
e-suap - client technologies- english version
e-suap - client technologies- english versione-suap - client technologies- english version
e-suap - client technologies- english version
 
Introduction to JavaScript for APEX Developers - Module 3: Working with the D...
Introduction to JavaScript for APEX Developers - Module 3: Working with the D...Introduction to JavaScript for APEX Developers - Module 3: Working with the D...
Introduction to JavaScript for APEX Developers - Module 3: Working with the D...
 
01 startoff angularjs
01 startoff angularjs01 startoff angularjs
01 startoff angularjs
 
The Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has ArrivedThe Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has Arrived
 
Rethinking Syncing at AltConf 2019
Rethinking Syncing at AltConf 2019Rethinking Syncing at AltConf 2019
Rethinking Syncing at AltConf 2019
 

Viewers also liked

The Attention Phenomenon You and Your Employees Don't Realize is Happening
The Attention Phenomenon You and Your Employees Don't Realize is HappeningThe Attention Phenomenon You and Your Employees Don't Realize is Happening
The Attention Phenomenon You and Your Employees Don't Realize is HappeningCharbel Semaan
 
Vipin Rajan Padipura Resume
Vipin Rajan Padipura ResumeVipin Rajan Padipura Resume
Vipin Rajan Padipura Resumevp06467
 
Donnie lygonis utbildning 2 affrsplan
Donnie lygonis utbildning 2   affrsplanDonnie lygonis utbildning 2   affrsplan
Donnie lygonis utbildning 2 affrsplanncdncdncd
 
Chpt 19 industrialization
Chpt 19 industrializationChpt 19 industrialization
Chpt 19 industrializationellarae1
 
Introductory grant workshop
Introductory grant workshopIntroductory grant workshop
Introductory grant workshopsistasayre
 
[Présentation] La Vie Locale
[Présentation] La Vie Locale[Présentation] La Vie Locale
[Présentation] La Vie LocaleSolocal
 
Training development382
Training development382Training development382
Training development382Swapnil Kapate
 
[Etude] La Vie Locale : ré-enraciner la consommation pour des territoires plu...
[Etude] La Vie Locale : ré-enraciner la consommation pour des territoires plu...[Etude] La Vie Locale : ré-enraciner la consommation pour des territoires plu...
[Etude] La Vie Locale : ré-enraciner la consommation pour des territoires plu...Solocal
 
[Infographie] Les Français, la consommation locale et le digital
[Infographie] Les Français, la consommation locale et le digital[Infographie] Les Français, la consommation locale et le digital
[Infographie] Les Français, la consommation locale et le digitalSolocal
 

Viewers also liked (15)

The Attention Phenomenon You and Your Employees Don't Realize is Happening
The Attention Phenomenon You and Your Employees Don't Realize is HappeningThe Attention Phenomenon You and Your Employees Don't Realize is Happening
The Attention Phenomenon You and Your Employees Don't Realize is Happening
 
Fada
FadaFada
Fada
 
077813
077813077813
077813
 
Vipin Rajan Padipura Resume
Vipin Rajan Padipura ResumeVipin Rajan Padipura Resume
Vipin Rajan Padipura Resume
 
Donnie lygonis utbildning 2 affrsplan
Donnie lygonis utbildning 2   affrsplanDonnie lygonis utbildning 2   affrsplan
Donnie lygonis utbildning 2 affrsplan
 
Filosofia
FilosofiaFilosofia
Filosofia
 
Resume_Arjun
Resume_ArjunResume_Arjun
Resume_Arjun
 
Chpt 19 industrialization
Chpt 19 industrializationChpt 19 industrialization
Chpt 19 industrialization
 
Dsl technology report
Dsl technology  reportDsl technology  report
Dsl technology report
 
Introductory grant workshop
Introductory grant workshopIntroductory grant workshop
Introductory grant workshop
 
[Présentation] La Vie Locale
[Présentation] La Vie Locale[Présentation] La Vie Locale
[Présentation] La Vie Locale
 
A seminar presentation on dsl
A seminar presentation on dslA seminar presentation on dsl
A seminar presentation on dsl
 
Training development382
Training development382Training development382
Training development382
 
[Etude] La Vie Locale : ré-enraciner la consommation pour des territoires plu...
[Etude] La Vie Locale : ré-enraciner la consommation pour des territoires plu...[Etude] La Vie Locale : ré-enraciner la consommation pour des territoires plu...
[Etude] La Vie Locale : ré-enraciner la consommation pour des territoires plu...
 
[Infographie] Les Français, la consommation locale et le digital
[Infographie] Les Français, la consommation locale et le digital[Infographie] Les Français, la consommation locale et le digital
[Infographie] Les Français, la consommation locale et le digital
 

Similar to Rohit&kunjan (20)

Html5
Html5Html5
Html5
 
HTML5 Refresher
HTML5 RefresherHTML5 Refresher
HTML5 Refresher
 
Html5 n css3
Html5 n css3Html5 n css3
Html5 n css3
 
Html5 shubelal
Html5 shubelalHtml5 shubelal
Html5 shubelal
 
Html5 Future of WEB
Html5 Future of WEBHtml5 Future of WEB
Html5 Future of WEB
 
Html 5
Html 5Html 5
Html 5
 
Html5
Html5Html5
Html5
 
Html,CSS & UI/UX design
Html,CSS & UI/UX designHtml,CSS & UI/UX design
Html,CSS & UI/UX design
 
HTML5
HTML5HTML5
HTML5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Javascript
JavascriptJavascript
Javascript
 
mst_unit1.pptx
mst_unit1.pptxmst_unit1.pptx
mst_unit1.pptx
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)
 
HTML5
HTML5 HTML5
HTML5
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
Html5ppt
Html5pptHtml5ppt
Html5ppt
 
Delhi student's day
Delhi student's dayDelhi student's day
Delhi student's day
 

Recently uploaded

How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfSrushith Repakula
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...FIDO Alliance
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard37
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMKumar Satyam
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Paige Cruz
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)Samir Dash
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data SciencePaolo Missier
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024Lorenzo Miniero
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?Paolo Missier
 
Microsoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfMicrosoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfOverkill Security
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAnitaRaj43
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdfMuhammad Subhan
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxFIDO Alliance
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTopCSSGallery
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewDianaGray10
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontologyjohnbeverley2021
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptxFIDO Alliance
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxMarkSteadman7
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...ScyllaDB
 

Recently uploaded (20)

How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
 
Microsoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfMicrosoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdf
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
 

Rohit&kunjan

  • 1. HTML 5 Rohit Patel(04) Kunjan Patel(60) ©Rohit patel
  • 2. Topic To be Covered: • Introduction • Multimedia • Graphics • Applications •Input types • Structure and Semantics ©Rohit patel
  • 3. Introduction • What is HTML5?  HTML5 is the new standard of HTML. • How Did HTML5 Get Started?  HTML5 is a cooperation between the W3C and WHATWG. •Some rules for HTML5 were established: ` New features should be based on HTML, CSS, DOM, and JavaScript. Reduce the need for external plug-in (like Flash). Better error handling. More markup to replace scripting. HTML5 should be device independent. The development process should be visible to the public. ©Rohit patel
  • 4. <!DOCTYPE> •The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. •The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. HTML 5 ex: <!DOCTYPE html> HTML 4.01 ex: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ©Rohit patel
  • 5. HTML5 Multimedia •With HTML5, playing video and audio is easier than ever. • <video> • <audio> ©Rohit patel
  • 6. <video> & <audio> •Today, most videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins. •HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element. •Example •<video src=“movie.mp4” autoplay loop controls height=“300px” width=“300px” > •<audio src=“song.mp3” controls> ©Rohit patel
  • 8. Browser Supports(video Format) Browser Supports(audio Format) ©Rohit patel
  • 9. HTML5 Graphics With HTML5, drawing graphics is easier than ever: •Using the <canvas> element •Using inline SVG(Scalable Vector Graphics) •Using CSS3 2D/3D <canvas> •The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). •example •The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. ©Rohit patel
  • 11. HTML5 Applications With HTML5, web application development is easier than ever. •Web Storage •App Cache •Web Worker ©Rohit patel
  • 12. • Web Storage • With HTML5, web pages can store data locally within the user's browser. • Earlier, this was done with cookies. • However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. • The data is stored in key/value pairs, and a web page can only access data stored by itself. •There are two new objects for storing data on the client: localStorage - The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week or year. sessionStorage - The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window. ©Rohit patel
  • 13. •App Cache • HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection. Application cache gives an application three advantages: 1. Offline browsing - users can use the application when they're offline 2. Speed - cached resources load faster 3. Reduced server load - the browser will only download updated/changed resources from the server • To enable application cache, include the manifest attribute in the document's <html> tag,It’s simple text file. • Example: <html manifest="demo.appcache"> CACHE MANIFEST NETWORK FALLBACK ©Rohit patel
  • 14. • Web Workers • A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. • When executing scripts in an HTML page, the page becomes unresponsive until the script is finished. • You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background. • Web workers are supported in all major browsers, except Internet Explorer. ©Rohit patel
  • 15. New Input Types • color • datetime • email • month • number • range • url ©Rohit patel
  • 16. • Input Type: color •Select a color from a color picker. • <input type="color" name="favcolor"> •Example • Input Type: datetime •Define a date and time control (with time zone). • <input type="datetime" name="bdaytime"> •Example • Input Type: email • Define a field for an e-mail address (will be automatically validated when submitted) • <input type="email" name="usremail"> •Example • Input Type: month • The month type allows the user to select a month and year. •<input type="month" name="bdaymonth"> •Example ©Rohit patel
  • 17. • Input Type: number • The number type is used for input fields that should contain numeric value. •You can also set restrictions on what numbers are accepted. • <input type="number" name="quantity" min="1" max="5"> •Example • Input Type: range • The range type is used for input fields that should contain a value from a range of numbers. •You can also set restrictions on what numbers are accepted. •<input type="range" name="points" min="1" max="10"> •Example • Input Type: url • The url type is used for input fields that should contain a URL address. •The value of the url field is automatically validated when the form is submitted. • <input type="url" name="homepage"> •Example ©Rohit patel
  • 18. <datalist> •The <datalist> element specifies a list of pre-defined options for an <input> element. •The <datalist> element is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data. •Example: <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> ©Rohit patel
  • 19. <output> •The <output> element represents the result of a calculation (like one performed by a script). •Example: <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" name="a" value="50">100 + <input type="number" name="b" value="50">= <output name="x" for="a b"></output> </form> ©Rohit patel
  • 20. •Structure and Semantics <div <header> id="header"> <div class="article"> <article> <div <div <nav> <div <section> id="content"> <aside> id="nav"> id="right"> <div <footer> id="footer"> ©Rohit patel
  • 21. <progress> Tag •Show completion progress of a taskProgress bars are widely used in other applications Works with scripted applications. •Useful for: •Indicate loading progress of an AJAX application •Show user progress through a series of forms •Making impatient users wait. •Example: Downloading progress: <progress value="22" max="100"></progress> ©Rohit patel
  • 22. <mark> Tag •Marked or Highlighted text •Indicates point of interest or relevance Useful for: Highlighting relevant code in a code sample Highlighting search keywords in a document (e.g. in Google Cache) •Example <p>This is a <mark>Mark</mark>tag example.</p> This is a Mark tag example. ©Rohit patel
  • 23. •HOW WELL DOES YOUR BROWSER SUPPORT HTML5? Source: www.Html5test.com Where ,Score Out of 500 ©Rohit patel
  • 24. THANKS ©Rohit patel

Editor's Notes

  1. %