Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Html 5

48 visualizaciones

Publicado el


Publicado en: Software
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Html 5

  1. 1. HTML 5 PRABHAKARAN V M, Department of CSE, KIT - Coimbatore
  2. 2. OVERVIEW • Why use HTML5 • HTML5 Basic • HTML5 Block Level Elements • HTML5 Multimedia • HTML5 Advance Tag • HTML5 Graphics
  3. 3. Why use Html5 • Html5 is more power full and easier than Html4. • It allows to play audio and video on browser • Using Html5 you can draw shapes like circle, rectangle, triangle. Which is not possible in Html previous version • In Html5 direct you can use header and footer tag for define Header and footer section • Here <nav> tag are available for declare navigation. • Html5 allow to run JavaScript code in background Using web workers. • It provides local storage in place of cookies.
  4. 4. HTML5 Basic
  5. 5. HTML Tags Html5 Tags Description <header> Defines a header for a document <footer> Defines a footer for a document <article> Defines an article in your document <aside> Defines content aside from the page content <audio> Allow to play audio on browser. <canvas> Used to draw Graphics on web. <figure> Specifies self-contained content <meter> Defines a scalar measurement within a known range <nav> Defines navigation links <section> Defines a section in a document <source> Defines multiple media resources for media elements (audio and video) <video> Defines a video or movie
  6. 6. HTML Tags Html5 Tags Description <progress> Represents the progress of a task <mark> Defines marked/highlighted text <details> Used to create an interactive widget that the user can open and close <bdi> Full form of BDI is Bi-Directional Isolation. This element is useful when embedding user- generated content with an unknown directionality. <summary> It specifies a visible heading for <detailed> element. <wbr> Used for possible line bread <time> Used for define date and time <track> Used for defines text tracks for media elements (<video> and <audio>) <source> Used for defines multiple media resources for media elements (<video> and <audio>) <ruby> Used for defines a ruby annotation <output> Used for represents the result of a calculation
  7. 7. Difference Between Html and Html5 Html Html5 Doctype declaration in Html is too longer <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""> DOCTYPE declaration in Html5 is very simple "<!DOCTYPE html> character encoding in Html is also longer <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> character encoding (charset) declaration is also very simple <meta charset="UTF-8"> Audio and Video are not part of HTML4 Audio and Videos are integral part of HTML5 e.g. <audio> and <video> tags. Vector Graphics is possible with the help of technologies such as VML, Silverlight, Flash etc Vector graphics is integral part of HTML5 e.g. SVG and canvas It is almost impossible to get true GeoLocation of user browsing any website especially if it comes to mobile devices. JS GeoLocation API in HTML5 helps identify location of user browsing any website (provided user allows it) Html5 use cookies. It provides local storage in place of cookies. Not possible to draw shapes like circle, rectangle, triangle. Using Html5 you can draw shapes like circle, rectangle, triangle. Does not allow JavaScript to run in browser. JS runs in same thread as browser interface. Allows JavaScript to run in background. This is possible due to JS Web worker API in HTML5 Works with all old browsers Supported by all new browser.
  8. 8. Doctype in Html5 Syntax <!doctype html> Example of using Doctype <!DOCTYPE> <html> <body> <p>This is my first Html5 code.</p></body></html> Result This is my first Html code.
  9. 9. Html5 Comment Syntax <!-- Html comment --> Example <html> <body> <!-- Html page --> <p>This is simple html page<p> <p>Html is simple and easy to learn<p> </body> </html> Result This is simple html page Html is simple and easy to learn
  10. 10. Multiline Comment Syntax <!-- Html Multi Line Comment --> Example <html> <body> <!-- Html page Start from here --> <p>This is simple html page<p> <p>Html is simple and easy to learn<p> </body> </html> Result This is simple html page Html is simple and easy to learn
  11. 11. Save and Compile in HTML 5: Save and Run Html5 code • Html5 code are save with .html or .htm extension. • For run Html5 code you need any web browser (chrome, firefox etc). No others software are required for run Html code web browser are enough. Compile Html5 Code • No need to compile manually Html5 code, When you open your code in any web browser then Html code are interpreted by browser interpreter.
  12. 12. HTML Block Level Elements
  13. 13. <Header> tag <!DOCTYPE> <html> <style> header { background:cyan; height:200px; } </style> <body> <header> <p>KIT- CSE</p> <p>Internet Programming</p> <p>Login</p> </header> </body> </html> OUTPUT
  14. 14. <Footer> Tag <!DOCTYPE> <html> <body> <h1>Content Section</h1> <p>This Paragraph in content section.</p> <footer> <p>Thanks for Visiting</p> <p>Contact us:</p> </footer> </body> </html> Result: Thanks for Visiting Contact us:
  15. 15. nav tag <!DOCTYPE> <html> <head> <style> nav { color:blue; } </style> </head> <body> <nav> <a href="#">Java</a> <a href="#">php</a> <a href="#">Html</a> </nav> </body> </html> OUTPUT
  16. 16. <main> tag <!DOCTYPE> <html> <body> <h3>Programming Language</h3> <main> <article> <h3>Html</h3> <p>Html is very simple to use and it is also easy to learn.</p> </article> <article> <h3>Java</h3> <p>Java is an object oriented programming language.</p> </article> <article> <h3>JavaScript</h3> <p>JavaScript is mainly used for client side validation.</p> </article> </main> </body> </html> OUTPUT
  17. 17. article tag <!DOCTYPE> <html> <head> <style> article { background:cyan; } </style> </head> <body> <article> <p>Tim Berners-Lee is known as father of Html. The first publicly available description of HTML was a document called "HTML Tags", first described, on the Internet by Berners-Lee in late 1991.</p> </article> </body> </html> OUTPUT
  18. 18. figure tag <!DOCTYPE> <html> <body> <p><strong>National Animal</strong> </p> <figure> <img src="F:Internet ProgrammingHTML 5tiger-new-wallpapers.jpeg" title="Tiger" alt="Save the nation"> </figure> </body> </html> OUTPUT
  19. 19. HTML5 Multimedia Audio format Video format
  20. 20. audio tag • Html <audio> tag defines sound, such as music or other audio streams. • Now, there are three supported audio file formats for the <audio> tag; those are given below; • MP3 • Wav • Ogg
  21. 21. <!DOCTYPE> <html> <body> <audio controls> <source src="E:Music cornerBGMBGM 1College Introduction Bgm.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio> </body> </html> OUTPUT
  22. 22. Video Tag in HTML5 • <video>tag are used to add video on web page. Html5 added new tag for add video files on web page, befor html5 it is achieve by using <embed> tag Attributes of meter • mp4 • webM • ogg
  23. 23. <!DOCTYPE html> <html> <body> <video controls> <source src="E:Video SongsVandhaai Ayya - Baahubali 2.mp4" type="video/mp4"> </video> </body> </html> OUTPUT
  24. 24. Attributes of Video Tag Atrribute Description controls Used to defines the video controls which is displayed with play/pause buttons. height Used to set the height of the video player. width Used to set the width of the video player. poster Used to specifies the image which is displayed on the screen when the video is not played. autoplay Used to specifies that the video will start playing as soon as it is ready. loop Used to specifies that the video file will start over again, every time when it is completed. muted Used to mute the video output. preload Used to specifies the author view to upload video file when the page loads. src Used to specifies the source URL of the video file.
  25. 25. Html5 plug-ins • A plug-ins are mainly used to extend the functionality of the Html browser. • Using html you can add or show your Youtube video on web page. • Steps to add video on web page. • Upload video on youtube. • get video id. • Define an <iframe> element in your web page. • Specify hight and width of iframe for display video.
  26. 26. HTML5 Advance Tag
  27. 27. Progress Tag in HTML5 • The <progress> tag is used to display the progress of a task. • Using this tag you van create a progress bar on web page. • The main purpose of this tag is to show file uploading progress. Attributes Description Value It is defined how much task has been completed. Max It define how much task required. Attributes of Progress Tag
  28. 28. <!doctype html> <html> <body> <progress></progess> </body> </html> OUTPUT
  29. 29. Example with value and max attribute <!doctype html> <html> <body> <p>Download progress:</p> <progress value="40" max="100"> </progess> </body> </html> OUTPUT
  30. 30. Set height and width of progress <!doctype html> <html> <head> <style> progress{ height: 40px; } </style> </head> <body> <p>Download progress:</p> <progress> </progess> </body> </html> OUTPUT
  31. 31. Meter Tag • <meter>tag are used to measure data within given range. This is also known as a gauge. • Uses of meter tag • Meter tag are use to measure disk usage, same like in you computer show how much a particular drive (on hard disk) full with data.
  32. 32. Attributes of meter Attributes value Description form form_id Specifies one or more forms the <meter> element belongs to low number Specifies the range that is considered to be a low value high number Specifies the range that is considered to be a high value max number Specifies the maximum value of the range min number Specifies the minimum value of the range optimum number Specifies what value is the optimal value for the gauge value number Required. Specifies the current value of the gauge
  33. 33. <!DOCTYPE html> <html> <body> <p>Display a gauge:</p> <meter value="2" min="20" max="100">2 out of 10</meter><br> <meter value="0.7">70%</meter> </body> </html> OUTPUT
  34. 34. <details> tag • Html <details> tag is used for specify the additional details about any contents on web page that the user can view or hide. <!DOCTYPE> <html> <body> <details> <h3>III CSE</h3> <p>Very Good and Hyperactive students</p> </details> </body> </html> OUTPUT
  35. 35. HTML5 Graphics
  36. 36. <canvas> tag • Html5 introduce new tag <canvas> which is used to draw graphics on the web page. It draw graphics on web by using JavaScript. • canvas is only a container for graphics you must need to write a script to draw graphics on web page. <!DOCTYPE> <html> <body> <canvas id="canvasid" width="200" height="100" style="border:3px solid #F00;"> </canvas> </body> </html> OUTPUT
  37. 37. <svg> tag • Html5 introduce new tag <svg>, SVG stands for Scalable Vector Graphics. It is used to define graphics for the Web. <svg> tag is container for SVG graphics. • SVG has several methods for drawing paths, boxes, circles, text, and graphic images. It is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X,Y coordinate system etc.
  38. 38. Draw circle using svg tag • To draw a circle you need <circle> tag with cx, cy and r attributes. <!DOCTYPE> <html> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" /> </svg> </body> </html> OUTPUT
  39. 39. Draw rectangle using svg tag • To draw a rectangle you need <rect> tag with it's attributes. <!DOCTYPE> <html> <body> <svg width="200" height="100"> <rect width="200" height="100" stroke="yellow" stroke-width="4" fill="red" /> </svg> </body> </html> OUTPUT
  40. 40. Draw polygon using svg tag • To draw a polygon you need <polygon> tag with points attribute of polygon tag. <!DOCTYPE> <html> <body> <svg width="210" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:blue;stroke:black;stroke-width:5;fill-rule:nonzero;" /> </svg> </body> </html> OUTPUT