Rohit&kunjan
Download as PPTX, PDF0 likes146 views
The document discusses HTML5 and provides information on several key aspects: 1) It introduces HTML5 and explains how it was developed as a cooperation between W3C and WHATWG with a focus on new features based on HTML, CSS, DOM and JavaScript. 2) It describes important multimedia elements like <video> and <audio> that allow embedding video and audio in a standard way, and covers supported formats in different browsers. 3) It outlines HTML5 graphics capabilities using <canvas> for drawing and inline SVG, as well as CSS3 effects. 4) It discusses HTML5 applications and features like web storage, app cache and web workers that improve application development and user experience.
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
- 7. ©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
- 10. ©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
- #6: %