Html5
Download as PPTX, PDF
0 likes447 views
HTML5 introduces several new features that reduce the need for plugins, make error handling easier, and allow for more semantic markup. Some key features include the <canvas> element for drawing, <video> and <audio> elements for media playback, and local storage support. HTML5 also includes new form controls and content elements like <article>, <header>, <nav>, and <section>. The <figure> element specifies self-contained content like images. HTML5 aims to be device-independent and have a more visible development process.
Html5
- 2. What is HTML 5 ??
- 3. HTML vs HTML5 NO NEED FOR MORE PLUGIN
- 4. Some Rule . The need for external plugins (like Flash) should be reduced Error handling should be easier than in previous versions Scripting has to be replaced by more markup HTML5 should be device-independent The development process should be visible to the public
- 5. HTML5 - New Features Some of the most interesting new features in HTML5 are: The <canvas> element for 2D drawing The <video> and <audio> elements for media playback
- 6. HTML5 - New Features Support for local storage New content-specific elements, like <article>, <footer>, <header>, <nav>, <section> New form controls, like calendar, date, time, email, url, search
- 7. HTML VS HTML5: NEW FEATURES HTML5
- 8. DOCTYPE HTML5 <!DOCTYPE html> HTML <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
- 9. HTML Tags <div> <p> <dl>,*<dt>,*<dd> <ol>,*<ul>,*<li> <fieldset> <input> HTML5 Tags <article> <aside> <section> <header>,*<hgroup> <nav> <footer> <datalist> <progress> <time>
- 11. <Figure> The <figure> tag specifies self- contained content, like illustrations, diagrams, photos, code listings, etc.
- 12. <Figure> HTML5 <figure> <img src=/slideshow/html5-34473353/34473353/"path/to/image" alt="About image" /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure> HTML N/A
- 13. Type Links & Js HTML5 Not necessary <script src=/slideshow/html5-34473353/34473353/"path/to/script.js"></script> HTML Necessary <script src="path/to/script.js type=text/javascript></script>
- 14. IDs & Classes HTML5 Not necessary <p class=myClass id=someId> HTML Necessary <p class=myClass id=someId>
- 15. UL Editable HTML5 <ul contenteditable=true> HTML N/A
- 16. Type=Email HTML5 <input id="email" name="email" type="email" /> HTML N/A
- 17. Placeholders HTML5 <input name="email" type="email" placeholder=mail@domain.com" /> HTML N/A
- 18. Semantic Tags HTML5 <Nav> <Header> <Article> <Section> <Aside> <Footer> HTML N/A
- 19. html5 Recursiveness HTML5 allows for multiple sections and articles within a single page. Each section/article can have its own header, footer, aside and nav.
- 20. Required The required attribute is a boolean attribute. HTML5 <input type="text" name="someInput" required> HTML N/A
- 21. Autofocus HTML5 <input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus> HTML N/A
- 22. HTML5 Registration Form <form> <input name="Full Name" placeholder="Enter your full4name" Autofocus required> <input type="email name="Email" placeholder="Enter your email address" required> <input type="url name="URL" placeholder="Whats your website address?"> <input type="submit value="Register"> </form>
- 24. Audio HTML5 <audio autoplay="autoplay" controls="controls"> <source src=/slideshow/html5-34473353/34473353/"file.ogg" /> <source src="file.mp3" /> <a href="file.mp3">Download this file.</a> </audio> HTML N/A
- 26. Video HTML5 <video controls preload> <source src=/slideshow/html5-34473353/34473353/video.ogv" type="video/ogg" /> <source src=video.mp4" type="video/mp4/> <p> Your browser is old. <a href=video.mp4">Download this video instead.</a> </p> </video> HTML N/A
- 28. Demo