Your SlideShare is downloading. ×
HTML5 with examples
HTML5 with examples
HTML5 with examples
HTML5 with examples
HTML5 with examples
HTML5 with examples
HTML5 with examples
HTML5 with examples
HTML5 with examples
HTML5 with examples
HTML5 with examples
HTML5 with examples
HTML5 with examples
HTML5 with examples
HTML5 with examples
HTML5 with examples
HTML5 with examples
HTML5 with examples
HTML5 with examples
HTML5 with examples
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 with examples

3,401

Published on

this is slide for html5 guide with examples.

this is slide for html5 guide with examples.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,401
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
208
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. - <code>Gopinath T.M</code>
  • 2.
    • HTML5 will be the new standard for HTML, XHTML, and the HTML DOM.
    • WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.
  • 3.
    • The canvas element for drawing
    • The video and audio elements for media playback
    • Better support for local offline storage
    • New content specific elements, like article, footer, header, nav, section
    • New form controls, like calendar, date, time, email, url, search
  • 4. Document DOM HTML 5 text/html XHTML 5 application/xhtml+xml
  • 5.
    • HTML Older version Code
      • <img src=&quot;path/to/image&quot; alt=&quot;About image&quot; />  <p>Image of Mars. </p>.
    • HTML5
      • <figure>
      • <img src=&quot;path/to/image&quot; alt=&quot;About image&quot; />
      • <figcaption>
      • <p>This is an image of something interesting.</p>
      • </figcaption>
      • </figure>
  • 6.
    • HTML Older Version Code.
      • <link rel=&quot;stylesheet&quot; href=&quot;path/to/stylesheet.css&quot; type=&quot;text/css&quot; />
      • <script type=&quot;text/javascript“
      • src=&quot;path/to/script.js&quot;></script>
    • HTML5
      • <link rel=&quot;stylesheet&quot; href=&quot;path/to/stylesheet.css&quot; />
      • <script src=&quot;path/to/script.js&quot;></script>
  • 7.
    • HTML Older Version
      • We need to add some client side script to make the things happened.
    • HTML5
      • <ul contenteditable=&quot;true&quot;>
      • <li> Break mechanical cab driver. </li>
      • <li> Drive to abandoned factory
      • <li> Watch video of self </li>
      • </ul>
  • 8.
    • Color
    • date 
    • datetime 
    • datetime-local 
    • email 
    • File with multiple file selection.
    • month 
    • number 
    • range 
    • Search
    • Tel
    • time 
    • url
    • week
  • 9.
    • HTML Older Version Code.
      • <form action=&quot;&quot; method=&quot;get&quot;>
    • <label for=&quot;email&quot;>Email:</label>
    • <input id=&quot;email&quot; name=&quot;email&quot; type=“text&quot; />
    • <button type=&quot;submit&quot;> Submit Form </button>
    • </form>
    • HTML5
      • <form action=&quot;&quot; method=&quot;get&quot;>
    • <label for=&quot;email&quot;>Email:</label>
    • <input id=&quot;email&quot; name=&quot;email&quot; type=&quot;email&quot; />
    • <button type=&quot;submit&quot;> Submit Form </button>
    • </form>
  • 10.
    • HTML Older Version
      • We need to required some client side script to validate the things.
    • HTML5
      • <form method=&quot;post&quot; action=&quot;&quot;>
      • <label for=&quot;someInput&quot;> Your Name: </label>
      • <input type=&quot;text&quot; id=&quot;someInput&quot; name=&quot;someInput&quot; placeholder=&quot;Douglas Quaid&quot; required>
      • <button type=&quot;submit&quot;>Go</button>
      • </form>
  • 11.
      • HTML Older Version
        • We need to add some client side script to make the things happened.
    • HTML5
      • <form method=&quot;post&quot; action=&quot;&quot;>
    • <label for=&quot;someInput&quot;> Your Name: </label>
    • <input type=&quot;text&quot; id=&quot;someInput&quot; name=&quot;someInput&quot; placeholder=“Enter your name&quot; required>
    • <button type=&quot;submit&quot;>Go</button>
    • </form>
  • 12.
    • HTML5
      • <audio autoplay=&quot;autoplay&quot; controls=&quot;controls&quot;>
    • <source src=&quot;file.ogg&quot; />
    • <source src=&quot;file.mp3&quot; />
    • <a href=&quot;file.mp3&quot;>Download this file.</a>
    • </audio>
  • 13.
    • <video controls preload>
    • <source src=&quot;cohagenPhoneCall.ogv&quot; type=&quot;video/ogg; codecs='vorbis, theora'&quot; />
    • <source src=&quot;cohagenPhoneCall.mp4&quot; type=&quot;video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'&quot; />
    • <p> Your browser is old. <a href=&quot;cohagenPhoneCall.mp4&quot;>Download this video instead.</a> </p>
    • </video>
  • 14.  
  • 15.
    • <form action=&quot;&quot; method=&quot;post&quot;>
    • <label for=&quot;username&quot;>Create a Username: </label>
    • <input type=&quot;text&quot;
    • name=&quot;username&quot;
    • id=&quot;username&quot;
    • placeholder=&quot;4 <> 10&quot;
    • pattern=&quot;[A-Za-z]{4,10}&quot;
    • autofocus
    • required>
    • <button type=&quot;submit&quot;>Go </button>
    • </form>
  • 16.
    • <h3> Search Results </h3>
    • <p> They were interrupted, just after Quato said, <mark>&quot;Open your Mind&quot;</mark>. </p>
  • 17.
    • LocalStorage - stores data with no time limit
      • <script type=&quot;text/javascript&quot;> localStorage.lastname=&quot;Smith&quot;; document.write(localStorage.lastname); </script>
    • Ses sionStorage - stores data with one time session
      • <script type=&quot;text/javascript&quot;> sessionStorage.lastname=&quot;Smith&quot;; document.write(sessionStorage.lastname); </script>
  • 18.
    • <canvas id=&quot;myCanvas&quot; width=&quot;200&quot; height=&quot;100&quot; style=&quot;border:1px solid #c3c3c3;&quot;>
    • Your browser does not support the canvas element.
    • </canvas>
    • <script type=&quot;text/javascript&quot;>
    • var c=document.getElementById(&quot;myCanvas&quot;);
    • var ctx=c.getContext(&quot;2d&quot;);
    • ctx.fillStyle=&quot;#FF0000&quot;;
    • ctx.fillRect(0,0,150,75);
    • </script>
  • 19.
    • http://html5test.com/
  • 20.
    • www.developersnacks.com

×