21
Converting business ideas to reality...
| Date post: | 30-Oct-2014 |
| Category: |
Technology |
| Upload: | niranjan-kumar |
| View: | 370 times |
| Download: | 0 times |
Converting business ideas to reality...
Welcome to a
short session on
©Teamdecode 2011 3
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
4
What is HTML5?
©Teamdecode 2011
HTML5 is the new standard for HTML, XHTML, and the HTML with a lot of new functionalities and tags.
The HTML5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and many hundreds of other vendors.
HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
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
©Teamdecode 2011 6
20 Most used DIV ids:-
©Teamdecode 2011 7
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 8
Basic Html 4 Structure
©Teamdecode 2011 9
Better Layout Structure: New Structural Elements
<section> <header> <nav> <article> <aside> <footer>
<header>
<nav>
<article>
<aside>
<footer>
<time>
<figure>
<legend>
<meter>
<section>Heading1 <h1>
Heading 2 <h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
Heading 3 <h1>
©Teamdecode 2011 13
HTML 5 tags in a wesbsite
14
HTML 5 Tags
©Teamdecode 2011
•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">
15
HTML 5 Tags contd...
©Teamdecode 2011
•Input Elements:- <input type="date" name="birthday” autocomplete="off" /> <input type="email" name="usermail" /> <input type="number" name="quantity" min="1" max="5" /> <input type="url" name="homepage" /> <input type="range" name="points" min="1" max="10" /
Progress:- <progress value="22" max="100"></progress>
16
HTML 5 Tags contd...
©Teamdecode 2011
•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
17©Teamdecode 2011
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?
18
Browser Compatibility
©Teamdecode 2011
**Internet Explorer 9 has partial support of HTML 5.
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-ge
olocation/
To know more about HTML tags:-– http://www.w3schools.com/html5/default.asp
19
Thank you
©Teamdecode 2011 21
?
?
?
?
?
???
?
??
Questions??
?
