Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Disclaimer: This presentation is prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring Partner Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
  2. 2. HTML 5 Jaseena A P Muhammed A P me 9539443588
  3. 3. What is HTML 5  HTML5 is the standard for HTML  Use of internet changed a lot since HTML 4.01 (1999)  Several HTML 4.01 elements are never used or never used the way they were intended  To better handle todays internet, HTML5 brings new changes: New elements for drawing graphics, adding media content, better page structure, better form handling, and several APIs to drag/drop elements, find Geolocation, include web storage, application cache, web workers, etc.
  4. 4. How Did HTML5 Get Started?  Cooperation between World Wide Web Consortium (W3C) and Web Hypertext Application Technology Working Group (WHATWG)
  5. 5. Some rules of HTML5 …. New features should be based on HTML, CSS, DOM, and JavaScript Reduce the need for external plugins (like Flash) Better error handling More markup to replace scripting HTML5 should be device independent The development process should be visible to the public.
  6. 6. New features in HTML5: The canvas element for drawing The video and audio elements for media playback Better support for local offline storage New content specific elements, like article, footer, header, nav, section New form controls, like calendar, date, time, email, url.
  7. 7. New Markup elements <HEADER>  Specifies a group of navigation elements for the document.  All major browsers support <Header> Tag. How <Header> works?? <Header> <h1>Welcome to my website</h1> <p>This is just an example</p> </Header>
  8. 8. New Markup elements <FOOTER>  All major browsers support <FOOTER> Tag.  defines the footer of a section or document.  contains the name of the author, the date the document was written and/or contact information.
  9. 9. New Markup elements How <Footer> works:- <!DOCTYPE HTML> <html> <body> <footer><p>This document was written in 2013</p> <p> all copyright reserved &copy; Jaseena ap</p> </footer> </body></html>
  10. 10. New Markup elements <ARTICLE>  An article should make sense on its own and it should be possible to distribute.  Examples of possible articles: forum post newspaper article blog entry  All major browsers support <Article> Tag.
  11. 11. New Markup elements How <Article> works:- <article> if I don't initialize a variable with DEFAULT or SET, then it's NULL, and adding 1 to NULL always yields NULL. </article>
  12. 12. New Markup elements <ASIDE>  Defines some content aside from the content it is placed in.  The aside content should be related to the surrounding content.  All major browsers support <Aside> Tag. How <Aside> works:- <p>Govt Engg college Idukki is situated in painavu,the major town in Idukki district.</p> <aside> <h4>Idukki Dam</h4> Asia’s largest arch dam. Just 3km away from GECI . </aside>
  13. 13. New Markup elements <SECTION>  Defines sections in a document like :- Chapters.  All major browsers support <Section> Tag
  14. 14. HTML5 VIDEO Video on the Web:-  Until now, there has never been a standard for showing video on a web page.  Today, most videos are shown through a plugin (like flash). However, not all browsers have the same plugins.  HTML5 specifies a standard way to include video, with the video element. Video Formats:- (Ogg , MPEG 4 , WebM).
  15. 15. HTML5 VIDEO How can we use it?? <video src="C:UsersJaseenaDownloadsVideovideo1.mp4" width="320" height="240" controls="controls"> </video>
  16. 16. HTML5 VIDEO All <video> Attributes:- ValueAttribute mutedaudio autoplayautoplay controlscontrols pixelsheight looploop urlposter preloadpreload urlsrc pixelswidth
  17. 17. HTML5 AUDIO Audio on the Web:-  Until now, there has never been a standard for playing audio on a web page.  Today, most audio are played through a plugin (like flash). However, not all browsers have the same plugins.  HTML5 specifies a standard way to include audio, with the audio element.  The audio element can play sound files, or an audio stream. Audio Formats:- (Ogg Vorbis, MP3, Wav).
  18. 18. HTML5 AUDIO How can we use it?? <audio src="C:UsersJaseenaDownloadsMusicsong1.mp3“ controls="controls"> </audio>
  19. 19. HTML5 AUDIO All <audio> Attributes:- ValueAttribute auto playauto play controlscontrols looploop preloadpreload urlsrc
  20. 20. HTML CANVAS What is Canvas?? <canvas> tag is used to display graphics. it is only a container for graphics, we must use a script to actually paint graphics. All major browsers support <Canvas> Tag.
  21. 21. HTML CANVAS How <Canvas> works:- <canvas id="myCanvas">your browser does not support the canvas tag </canvas> <script type="text/javascript"> varcanvas=document.getElementById('myCanv'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script> ValueAttribute pixelsheight pixelswidth
  22. 22. HTML5 INPUT TYPES  HTML5 has several new input types for forms. These new features allow better input control and validation.  color  date  datetime  datetime-local  email  month  number  range  search  tel  time  url  week
  23. 23. HTML5 FORM ELEMENTS HTML5 has the following new form elements: - <datalist> - <keygen> - <output>
  24. 24. HTML5 FORM ELEMENTS <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.  Use the <input> element's list attribute to bind it together with a <datalist> element.
  25. 25. HTML5 FORM ELEMENTS <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
  26. 26. HTML5 FORM ELEMENTS  <keygen>  The purpose of the <keygen> element is to provide a secure way to authenticate users.  The <keygen> tag specifies a key-pair generator field in a form.  When the form is submitted, two keys are generated, one private and one 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 to authenticate the user in the future.
  27. 27. HTML5 FORM ELEMENTS <form action=“ " method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"> </form>
  28. 28. HTML5 FORM ELEMENTS  <output> The <output> element represents the result of a calculation (like one performed by a script). <form oninput="x.value=parseInt(a.value)+parseInt (b.value)">0 <input type="range" id="a" value="50">100 + <input type="number" id="b" value="50">= <output name="x" for="a b"></output> </form>
  30. 30. THANK YOU
  31. 31. If this presentation helped you, please visit our page and like it. Thanks in advance. | |
  32. 32. Contact Us Emarald Mall (Big Bazar Building) Mavoor Road, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 NC Complex, Near Bus Stand Mukkam, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 Start up Village Eranakulam, Kerala, India. Email: