• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html 5
 

Html 5

on

  • 338 views

 

Statistics

Views

Total Views
338
Views on SlideShare
338
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html 5 Html 5 Presentation Transcript

    • Converting business ideas to reality...
    • Topics Covered:-•What is HTML5?•HTML 5 Goals•20 Most used Div ids prior to HTML5.•Lets talk HTML 5•HTML 5 Tags•Pictorial representation of HTML 4 and HTML 5•HTML5 vs Flash•Browser Compatibility•Html 5 Resources ©Teamdecode 2011 3
    • What is HTML5? HTML5 is the new standard for HTML, XHTML, and the HTML with a lot of new functionalities and tags. HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). The HTML5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and many hundreds of other vendors. ©Teamdecode 2011 4
    • HTML 5 Goals• Latest version is HTML5 – Aimed to have all of the power of native applications – Run on any platform (Windows, Linux, iPhone, Android, Mac, etc.)• New features should be based on HTML, CSS, DOM and JavaScript• Reduce the need for external plugins• Better error handling• More markup to replace scripting• HTML5 should be device independent 5
    • 20 Most used DIV ids:- ©Teamdecode 2011 6
    • Lets talk HTML5 • New HTML Tags • Audio and Video • Vector Graphics • Native support to Geolocation API , Drag and Drop, device orientation, Speech Input • Offline data storage • Validation • Input Element ©Teamdecode 2011 7
    • Basic Html 4 Structure ©Teamdecode 2011 8
    • Better Layout Structure: New Structural Elements  <section>  <header>  <nav>  <article>  <aside>  <footer> ©Teamdecode 2011 9
    • <header> <nav> <article> <aside> <footer>
    • <time><figure> <legend> <meter>
    • Heading1 <h1> <section>Loremipsum dolor sit amet, consectetueradipiscingelit, seddiamnonummynibheuismodtinciduntutlaoreetdolore magna aliquameratvolutpat. Utwisienim ad minim veniam, quisnostrudexercitationullamcorpersuscipitHeading 2 <h1> Loremipsum dolor sit amet, consectetueradipiscingelit, seddiam nonummynibheuismodtinciduntutlaoreetdolore magna aliquam eratvolutpat. Utwisienim ad minim veniam, quisnostrudexerci tationullamcorpersuscipitHeading 3 <h1> Loremipsum dolor sit amet, consectetueradipiscingelit, seddiam nonummynibheuismodtinciduntutlaoreetdolore magna aliquam eratvolutpat. Utwisienim ad minim veniam, quisnostrudexerci tationullamcorpersuscipit
    • HTML 5 tags in a wesbsite ©Teamdecode 2011 13
    • HTML 5 Tags •Doctype:- −HTML 4:- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> −HTML 5:- <!DOCTYPE html> •Meta tag:- −HTML 4:- <meta http-equiv="Content-Type" content="text/html; charset=utf-8”> −HTML 5:- <meta charset="utf-8"> ©Teamdecode 2011 14
    • HTML 5 Tags contd... •Video:- <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> </video> •Audio:- <audio controls="controls”> <source src="song.mp3" type="audio/mpeg" /> </audio> NOTE:-More Tags in action can be seen at:- http://www.w3schools.com/html5/default.asp ©Teamdecode 2011 16
    • HTM5 vs FlashIs HTML5 is going to replace flash??Flash is rejected by Apple for their iOS devices.HTML5 Canvas element(<canvas>Code goes here </canvas>)Hardware acceleration.So, who wins?©Teamdecode 2011 17
    • Browser Compatibility **Internet Explorer 9 has partial support of HTML 5. ©Teamdecode 2011 18
    • HTML 5 – Showcases and Resources• HTML 5 Rocks – Examples, Demos, Tutorials – http://www.html5rocks.com/• Great HTML 5 Slide – http://slides.html5rocks.com/• Internet Explorer 9 Test Drive for HTML 5 – http://ie.microsoft.com/testdrive/• See Geolocation in action – http://html5doctor.com/finding-your-position-with- geolocation/  To know more about HTML tags:- – http://www.w3schools.com/html5/default.asp 19
    • Thank you
    • Questions?©Teamdecode 2011 21