HTML 5
2 likes2,064 views
HTML5 introduces many new elements that improve the semantics of HTML documents. These include new structural elements like <header>, <nav>, <article>, and <footer> that define different sections of a page. HTML5 also adds new form controls like <datalist> and <output>. It introduces multimedia elements <video> and <audio> to embed video and audio. The <canvas> element allows dynamic drawing via scripting, enabling 2D and 3D graphics. HTML5 provides a simpler way to structure pages compared to HTML4's <div> elements.
HTML 5
- 1. HTML5 By Yaowaluck Promdee, Dr.Sumonta Kasemvilas
- 2. Index What’s HTML5 New Selectors New Properties Animations 2D/3D
- 5. New Semantic/Structural Elements Tag Description <article> <aside> <bdi> <details> <dialog> <figcaption> Defines an article in the document Defines content aside from the page content Defines a part of text that might be formatted in a different direction from other text Defines a dialog box or window Defines a caption for a <figure> element <figure> Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
- 6. New Semantic/Structural Elements Tag Description <footer> <header> <main> <mark> <menuitem> <meter> Defines a footer for the document or a section Defines a header for the document or a section Defines the main content of a document Defines marked or highlighted text Defines a command/menu item that the user can invoke from a popup menu Defines a scalar measurement within a known range (a gauge)
- 7. New Semantic/Structural Elements Tag Description <nav> <progress> <rp> <rt> <ruby> <section> <summary> <time> <wbr> Defines navigation links in the document Defines the progress of a task Defines what to show in browsers that do not support ruby annotations Defines an explanation/pronunciation of characters (for East Asian typography) Defines a section in the document Defines a visible heading for a <details> element Defines a date/time Defines a possible line-break
- 8. New Form Elements Tag Description <datalist> <keygen> <output> Defines pre-defined options for input controls Defines a key-pair generator field (for forms) Defines the result of a calculation
- 9. New Media Elements Tag Description <audio> <embed> <source> <track> <video> Defines sound or music content Defines containers for external applications (like plug-ins) Defines sources for <video> and <audio> Defines sources for <video> and <audio> Defines video or movie content
- 10. HTML4 vs HTML5 HTML4 <div id=“header”> <div id=“menu”> <div id =“content”> <div id=“post”> <div id=“footer”> HTML5 <header> <nav> <section> <article> <footer>
- 11. Example1 div
- 12. Example1 div
- 13. Example2 HTML5 Try it! HTML5
- 14. Image Attribute <img src=“imagename.png” alt=“HTML5” style=“width:300px;height:300px”>
- 15. Adding New Element to HTML <script>document.createElement(“myCode”)</script> <style> myCode { display:block; background-color:#ddd; padding: 50px; font-size: 30px; } </style> You can also add any new element to HTML with a browser trick. This example adds a new element called <myCode> to HTML, and defines a display style for it >> <myCode>Adding New Element to HTML</myCode>
- 16. HTML Canvas <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> Your browser does not support the HTML5 canvas tag. </canvas> Result:
- 17. HTML Canvas (Cont.) <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75); </script> Result: <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </script> Result: x, y, width, height
- 18. HTML Canvas (Cont.) <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); </script> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50); </script>
- 19. HTML with Video/Audio <video width="400" controls> <source src=“videofile.mp4” type="video/mp4"> <source src=“videofile.ogg” type="video/ogg"> Your browser does not support HTML5 video. </video>
- 20. Assignment#2 Write HTML Code following the figure using HTML5 Canvas Video Image Canvas