Your SlideShare is downloading. ×
HTML 5
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

HTML 5

312
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
312
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
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. HTML 5 Bhargav Pavra ©Bhargav Pavra
    • 2. Topic To be Covered: • Introduction • Multimedia • Graphics • Applications • Semantics and Forms • CSS 3 ©Bhargav Pavar
    • 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. ©Bhargav Pavar
    • 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"> ©Bhargav Pavar
    • 5. HTML5 Multimedia •With HTML5, playing video and audio is easier than ever. • <video> • <audio> ©Bhargav Pavar
    • 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> ©Bhargav Pavar
    • 7. ©Bhargav Pavar
    • 8. Browser Supports(video Format)Browser Supports(audio Format) ©Bhargav Pavar
    • 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). •The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. ©Bhargav Pavar
    • 10. ©Bhargav Pavar
    • 11. HTML5 Applications With HTML5, web application development is easier than ever. •Web Storage •App Cache •Web Worker •SSE ©Bhargav Pavar
    • 12. • Web Storage • With HTML5, web pages can store data locally within the users 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. ©Bhargav Pavar
    • 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 theyre 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 documents <html> tag,It’s simple text file. • Example: <html manifest="demo.appcache"> CACHE MANIFEST NETWORK FALLBACK ©Bhargav Pavar
    • 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. ©Bhargav Pavar
    • 15. • SSE-(Server-Sent Event)• HTML5 Server-Sent Events allow a web page automatically gets updatesfrom a server.•This was also possible before, but the web page would have to ask if anyupdates were available. With server-sent events, the updates comeautomatically.•Examples: Facebook/Twitter updates, stock price updates, newsfeeds, sport results, etc.•Server-Sent Events are supported in all major browsers, except InternetExplorer.•Example: var source=new EventSource("demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br>"; }; ©Bhargav Pavar
    • 16. New Input Types • color • datetime • email • month • number • range • url ©Bhargav Pavar
    • 17. • 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 ©Bhargav Pavar
    • 18. • 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 ©Bhargav Pavar
    • 19. <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> ©Bhargav Pavar
    • 20. <keygen>•The purpose of the <keygen> element is to provide a secure way toauthenticate users.•The <keygen> tag specifies a key-pair generator field in a form.•When the form is submitted, two keys are generated, one private andone public.•The private key is stored locally, and the public key is sent to the server.The public key could be used to generate a client certificate toauthenticate the user in the future.•Example:<form action="demo_keygen.asp" method="get">Username: <input type="text" name="usr_name">Encryption: <keygen name="security"><input type="submit"></form> ©Bhargav Pavar
    • 21. <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> ©Bhargav Pavar
    • 22. •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"> ©Bhargav Pavar
    • 23. <progress> Tag•Show completion progress of a taskProgress bars are widely used inother 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> ©Bhargav Pavar
    • 24. <meter> Tag •Representing scalar measurements or fractional values. •Useful for: User Ratings (e.g. YouTube Videos) Search Result Relevance Disk Quota Usage •Example <meter value="2" min="0" max="10">2 out of 10</meter><br> <meter value="0.6">60%</meter> ©Bhargav Pavar
    • 25. <mark> Tag•Marked or Highlighted text•Indicates point of interest or relevanceUseful 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. ©Bhargav Pavar
    • 26. •HOW WELL DOES YOUR BROWSER SUPPORT HTML5? Source: www.Html5test.com Where ,Score Out of 500 ©Bhargav Pavar
    • 27. THANKS ©Bhargav Pavar

    ×