Your SlideShare is downloading. ×
0
Introduction of html5
Introduction of html5
Introduction of html5
Introduction of html5
Introduction of html5
Introduction of html5
Introduction of html5
Introduction of html5
Introduction of html5
Introduction of html5
Introduction of html5
Introduction of html5
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

Introduction of html5

1,035

Published on

Published in: Education, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,035
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
45
Comments
0
Likes
1
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 <ul><li>Its a new standard for html,xhtml. It is widely used in web applications. </li></ul><ul><li>It should be based on html,css and Javascript. </li></ul><ul><li>It reduce the need for external plugins (like flash) </li></ul><ul><li>Better error handling. </li></ul><ul><li>More markup to replace scripting. </li></ul><ul><li>Html5 should be device independent. </li></ul>
  • 2. NEW FEATURES <ul><li>Most interesting new features in html5. </li></ul><ul><li>The canvas element for drawing. </li></ul><ul><li>The video and audio elements for media playback. </li></ul><ul><li>Better support for local offline storage. </li></ul><ul><li>New content specific elements like calender,date,time,email,url,search. </li></ul>
  • 3. NEW ELEMENTS <ul><li>Html 5 includes new elements for better source,drawing,media content and better from handling. </li></ul><ul><li>New elements like article,audio,source,embed,canvas,datalist,keygen,output etc. </li></ul><ul><li>New input type attribute values for better input control before sending the datas. </li></ul>
  • 4. NEW ATTRIBUTES <ul><li>Some of the new attributes values are : </li></ul><ul><li>Tel – input value for telphone numbers </li></ul><ul><li>Email – input value for email id. </li></ul><ul><li>Time – input value for timings </li></ul><ul><li>Date – input value of changing the dates </li></ul><ul><li>Month – input value of changing the month. </li></ul><ul><li>Color – input value of changing the colour. </li></ul>
  • 5. VIDEOS <ul><li>Many modern websites shows videos. HTML5 provides a standard for showing them. </li></ul><ul><li>Today, most videos are shown through a plugin (like flash). However, not all browsers have the same plugins. </li></ul><ul><li>HTML5 specifies a standard way to include video, with the video element. </li></ul>
  • 6. How It Works <ul><li>To show a video in HTML5, this is all you need: </li></ul><ul><li><video src=&quot;movie.ogg&quot; controls=&quot;controls&quot;> </li></ul><ul><li></video> </li></ul><ul><li>The control attribute is for adding play, pause, and volume controls. </li></ul><ul><li>It is also always a good idea to include the width and height attributes. </li></ul><ul><li>Insert content between the <video> and </video> tags for browsers that do not support the video element: </li></ul>
  • 7. AUDIOS <ul><li>HTML5 provides a standard for playing audio. </li></ul><ul><li>Until now, there has never been a standard for playing audio on a web page. </li></ul><ul><li>Today, most audio are played through a plugin (like flash). However, not all browsers have the same plugins. </li></ul><ul><li>HTML5 specifies a standard way to include audio, with the audio element. </li></ul><ul><li>The audio element can play sound files, or an audio stream. </li></ul>
  • 8. CANVAS <ul><li>The canvas element is used to draw graphics on a web page. </li></ul><ul><li>The HTML5 canvas element uses JavaScript to draw graphics on a web page. </li></ul><ul><li>A canvas is a rectangular area, and you control every pixel of it. </li></ul><ul><li>The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images. </li></ul>
  • 9. Create a Canvas Element <ul><li>Add a canvas element to the HTML5 page. </li></ul><ul><li>Specify the id, width, and height of the element: </li></ul><ul><li><canvas id=&quot;myCanvas&quot; width=&quot;200&quot; height=&quot;100&quot;></canvas> </li></ul><ul><li>The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript. </li></ul>
  • 10. WEB STORAGE <ul><li>Storing Data on the Client </li></ul><ul><li>HTML5 offers two new methods for storing data on the client: </li></ul><ul><li>* localStorage - stores data with no time limit </li></ul><ul><li>* sessionStorage - stores data for one session </li></ul><ul><li>Earlier, this was done with cookies. Cookies are not suitable for large amounts of data, because they are passed on by EVERY request to the server, making it very slow and in-effective. </li></ul>
  • 11. HTML5 STORAGE <ul><li>In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. </li></ul><ul><li>It is possible to store large amounts of data without affecting the website's performance. </li></ul><ul><li>The data is stored in different areas for different websites, and a website can only access data stored by itself. </li></ul><ul><li>HTML5 uses JavaScript to store and access the data. </li></ul>
  • 12. DETAILS <ul><li>Prepared by: </li></ul><ul><li>T.Kokila, </li></ul><ul><li>Email id : [email_address] </li></ul><ul><li>Blog: http: </li></ul><ul><li>Reference: Html5 reference. </li></ul>

×