HTML 5
Download as PPTX, PDF1 like279 views
The document provides an overview of HTML5 including: - A history of HTML versions leading to the development of HTML5. - Instructions for getting started with HTML5 including browser compatibility and development tools. - New HTML5 structural tags like <header>, <nav>, <section>, and <article>. - Enhanced form features in HTML5 like email, URL, number, and date field types. - Multimedia additions like playing audio and video natively in the browser. - Scripting APIs including Canvas for drawing graphics, local storage for client-side data, and Geolocation for detecting the user's location.
![Solution IE<9
<!--[if lt IE 9]>
<script type="text/javascript" >
document.createElement("nav" );
document.createElement("header" );
document.createElement("footer" );
document.createElement("section" );
document.createElement("aside" );
document.createElement("article" );
</script>
<![endif]-->
11
coretechies HTML 5 @himmsrathore](https://image.slidesharecdn.com/ccc4c7cd-8cba-401d-974f-f45093b44328-150810044407-lva1-app6892/85/HTML-5-11-320.jpg)
![User-Friendly web Forms
we’ll cover the following features
Email field [<input type="email">]
URL field [<input type="url">]
Telephone field [<input type="tel">]
Search field [<input type="search“>]
Slider (range) [<input type="range">]
Number [<input type="number">]
12
coretechies HTML 5 @himmsrathore](https://image.slidesharecdn.com/ccc4c7cd-8cba-401d-974f-f45093b44328-150810044407-lva1-app6892/85/HTML-5-12-320.jpg)
![ Date fields [<input type="date">]
Dates with Times [<input type="datetime">]
Color [<input type="color">]
Autofocus support [<input type="text" autofocus>]
Placeholder support [<input type="email"
placeholder="me@example.com">]
In-place editing support [<p contenteditable>lorem
ipsum</p>]
13
coretechies HTML 5 @himmsrathore](https://image.slidesharecdn.com/ccc4c7cd-8cba-401d-974f-f45093b44328-150810044407-lva1-app6892/85/HTML-5-13-320.jpg)
HTML 5
- 1. C O R E T E C H I E S ™ HTML 5 1 coretechies HTML 5 @himmsrathore
- 2. content History overview Getting Started With HTML5 Structure of a Web Page Forms Attribute Audio and Video HTML5 Canvas Introduction to Data Storage Introduction to Geo location http://localhost/Html5App/Html5Test/public_html/test08.html 2 coretechies HTML 5 @himmsrathore
- 3. An Overview of HTML5 Tim Berners-Lee invented the "World Wide Web" in 1989. From 1991 to 1998, HTML developed from version 1 to version 4. In 2000, the World Wide Web Consortium (W3C) recommended XHTML 1.0. In 2008, the first HTML5 public draft was released The W3C HTML5 recommendation was released 28. October 2014. 3 coretechies HTML 5 @himmsrathore
- 4. Getting Started With HTML5 requirement Modern browsers such as Firefox 3.5 +, IE9, chrome, safari For Development Any IDE or Notepad W3C World Wide Web Consortium WHATWG Web Hypertext Application Technology Working Group SGML:Standard generalized markup language 4 coretechies HTML 5 @himmsrathore
- 5. Compared to the rather verbose XHTML 1.0 Transitional doctype used <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN” "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd" > HTML5 doctype is very simple: <!DOCTYPE html> 5 coretechies HTML 5 @himmsrathore
- 6. Some Tags become History Basefont big center Font S Strike tt U • frame • frameset • noframes 6 coretechies HTML 5 @himmsrathore
- 7. • acronym gets replaced by abbr. • applet gets replaced by object. • dir gets replaced by ul. 7 coretechies HTML 5 @himmsrathore
- 8. deprecated elements • align • link, vlink, alink, and text attributes on the body tag • bgcolor • height and width • scrolling on the iframe element • valign • hspace and vspace • cellpadding, cellspacing, and border on table Be sure to validateyour pages with the W3C Validator service 8 coretechies HTML 5 @himmsrathore
- 9. New Structural Tagsand Attributes Basic Attribute <header> <nav> <section> <article> <aside> <footer> “Sections can have many articles, and articles can also have many sections.” 9 coretechies HTML 5 @himmsrathore
- 10. coretechies HTML 5 @himmsrathore 10
- 11. Solution IE<9 <!--[if lt IE 9]> <script type="text/javascript" > document.createElement("nav" ); document.createElement("header" ); document.createElement("footer" ); document.createElement("section" ); document.createElement("aside" ); document.createElement("article" ); </script> <![endif]--> 11 coretechies HTML 5 @himmsrathore
- 12. User-Friendly web Forms we’ll cover the following features Email field [<input type="email">] URL field [<input type="url">] Telephone field [<input type="tel">] Search field [<input type="search“>] Slider (range) [<input type="range">] Number [<input type="number">] 12 coretechies HTML 5 @himmsrathore
- 13. Date fields [<input type="date">] Dates with Times [<input type="datetime">] Color [<input type="color">] Autofocus support [<input type="text" autofocus>] Placeholder support [<input type="email" placeholder="me@example.com">] In-place editing support [<p contenteditable>lorem ipsum</p>] 13 coretechies HTML 5 @himmsrathore
- 14. <Progress> <progress value="60" max="100">60%</progress> <Meter> <meter min="0" max="10" value="8">8 of 10</meter> <Figure> <Mark> The mark <mark> element represents a run </mark>of text in one document marked or highlighted 14 coretechies HTML 5 @himmsrathore
- 15. Autocomplete Novalidate Autofocus Formaction Formmethod formnovalidate Note: The formaction attribute is used with type="submit" and type="image“ Formtarget Note: The formnovalidate attribute can be used with type="submit". 15 coretechies HTML 5 @himmsrathore
- 16. Required Readonly Multiple DataList <input list="Country"> <datalist id="Country"> <option value="India"> <option value="Italy"> <option value="Iran"> <option value="Israel"> <option value="Indonesia"> </datalist> 16 coretechies HTML 5 @himmsrathore
- 17. coretechies HTML 5 @himmsrathore 17 Keygen Output <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>
- 18. Advance HTML 5 Audio & Video Canvas & SVG GeoLocation LocalStorage 18 coretechies HTML 5 @himmsrathore
- 19. Audio coretechies HTML 5 @himmsrathore 19 HTML5 supports audio and video without the need for Flash. <audio controls autoplay> <source src=“sound/audio.ogg" type="audio/ogg" /> <source src=“sound/audio.wav" type="audio/wav" /> </audio>
- 20. coretechies HTML 5 @himmsrathore 20 Autoplay This boolean attribute if specified, the audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data. Autobuffer This boolean attribute if specified, the audio will automatically begin buffering even if it's not set to automatically play. Controls If this attribute is present, it will allow the user to control audio playback, including volume, seeking, and pause/resume playback. loop This boolean attribute if specified, will allow audio automatically seek back to the start after reaching at the end. Preload This attribute specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present. Src The URL of the audio to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed
- 21. Video coretechies HTML 5 @himmsrathore 21 video formats browsers should support in the video tag OGG MP4 mpeg4 <video width="300" height="200" controls autoplay> <source src="/html5/foo.ogg" type="video/ogg" /> <source src="/html5/foo.mp4" type="video/mp4" /> </video> Autoplay ,autobuffer, controls ,height, loop, preload ,poster, src ,width
- 22. Scalable Vector Graphics SVG coretechies HTML 5 @himmsrathore 22 SVG is mostly useful for vector type diagrams ,2D graphs in an X,Y coordinate system etc. HTML5 allows embeding SVG directly using <svg>...</svg> tag <svg xmlns="http://www.w3.org/2000/svg"> ... </svg>
- 23. Canvas coretechies HTML 5 @himmsrathore 23 HTML5 element <canvas> gives you an easy and powerful way to draw graphics using JavaScript. moveTo(x,y) defines the starting point of the line lineTo(x,y) defines the ending point of the line createLinearGradient(x,y,x1,y1) - Creates a linear gradient createRadialGradient(x,y,r,x1,y1,r1) - Creates a radial/circular gradient
- 24. local storage coretechies HTML 5 @himmsrathore 24 HTML5 introduces two mechanisms, similar to HTTP session cookies, for storing structured data on the client side and to overcome following drawbacks. Cookies are included with every HTTP request, thereby slowing down your web application by transmitting the same data. Cookies are included with every HTTP request, thereby sending data unencrypted over the internet. Cookies are limited to about 4 KB of data . Not enough to store required data. The two storages are session storage and local storage and they would be used to handle different situations.
- 25. coretechies HTML 5 @himmsrathore 25 <!DOCTYPE HTML> <html> <body> <script type="text/javascript"> if( sessionStorage.hits ){ sessionStorage.hits = Number(sessionStorage.hits) +1; }else{ sessionStorage.hits = 1; } document.write("Total Hits :" + sessionStorage.hits ); </script> </body> </html>
- 26. GeoLocation coretechies HTML 5 @himmsrathore 26 Geolocation determines a person’s whereabouts by looking at their computer’s IP address, MAC address, Wi-Fi hotspot location, or even GPS coordinates if available. Although not strictly part of HTML5 navigator.geolocation.getCurrentPosition(function(position) { showLocation(position.coords.latitude, position.coords.longitude); });
- 27. coretechies HTML 5 @himmsrathore 27