Html5 n css3
2 likes1,441 views
This document provides an introduction and overview of HTML5 and CSS3. It begins with an agenda that will cover new elements, features, browser support, tutorials and demos. The document then discusses several new features in HTML5, including the canvas element, audio/video elements, new input types, forms elements and attributes, and web storage. It also covers new features in CSS3, such as animations, backgrounds/borders, text effects, transformations, and multiple column layout. The document describes how to use CSS in HTML and some new user interface properties in CSS3.
Html5 n css3
- 1. Introduction to HTML 5 & CSS 3 Jindal Gohil TechnoTUX
- 2. A g e n d a • Introduction to HTML5 & CSS3. • New Elements . • New Features. • Browser Supports. • Tutorials. • Live demos.
- 3. A more powerful web >4
- 4. HTML5 • HTML5 is the next generation of HTML. • The previous version of HTML came in 1999. • HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). • WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.
- 6. New Features
- 7. Canvas Element • The HTML5 canvas element uses JavaScript to draw graphics on a web page. • A canvas is a rectangular area, and you control every pixel of it. <canvas id="my Canvas" width="200" height="100"></canvas>
- 8. • The canvas element.
- 10. Audio & video • Today, most audio & videos are played through a plugin (like flash). However, not all browsers have the same plugins. • HTML5 specifies a standard way to include these, with the audio & video elements. • <audio src="song.ogg" controls="controls"> </audio> • <video src="movie.ogg" controls="controls"> </video>
- 12. Browser supports : Video •Ogg = Ogg files with Theora video codec and Vorbis audio codec •MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec •WebM = WebM files with VP8 video codec and Vorbis audio codec
- 13. Browser supports : Audio
- 15. New Input Types • email • url • number • range • Date pickers (date, month, week, time, datetime, datetime-local) • search • color
- 16. elements • <input type="email" name="user_email" /> • <input type="url" name="user_url" /> • <input type="number" name="points" min="1" max="10" /> • <input type="range" name="points" min="1" max="10" /> • <input type="date" name="user_date" /> • <input type="color" name="user_color" />
- 17. Browser supports
- 18. New Form Elements & Attributes • HTML5 has several new elements and attributes for forms. • Datalist The datalist element specifies a list of options for an input field. • Keygen The purpose of the keygen element is to provide a secure way to authenticate users. • Output
- 19. New Form Attributes • This chapter covers some of the new attributes for <form> and <input>. • New form attributes: • autocomplete • novalidate • New input attributes: • autocomplete • autofocus • Form cont…
- 20. • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) • height and width • list • min, max and step • multiple • pattern (regexp) • placeholder • required
- 21. Web Storage
- 22. • HTML5 offers two new objects for storing data on the client: • localStorage - stores data with no time limit • sessionStorage - stores data for one session • 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. • HTML5 uses JavaScript to store and access the data.
- 23. Cont.. • <script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script> • <script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script>
- 24. Event Attributes • Window Event Attributes • Form Events • Keyboard Events • Mouse Events • Media Events
- 28. CSS3 • Its stands for Cascading Style Sheet. • CSS3 is completely backwards compatible, so you will not have to change existing designs. Browsers will always support CSS2. • CSS3 is split up into "modules". The old specification has been split into smaller pieces, and new ones are also added. • Animations • Backgrounds and Borders • Text Effects • 2D/3D Transformations • Multiple Column Layout • others
- 29. How to use css in html. • External style sheet • Internal style sheet • Inline style
- 30. New Features : CSS3 Animations
- 31. CSS3 User Interface • In CSS3, some of the new user interface features are resizing elements, box sizing, and outlining. • user interface properties: resize box-sizing outline-offset