Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5 n css3


Published on

Published in: Technology, Design

Html5 n css3

  1. 1. Introduction toHTML 5 & CSS 3 Jindal Gohil TechnoTUX
  2. 2. A g e n d a• Introduction to HTML5 & CSS3.• New Elements .• New Features.• Browser Supports.• Tutorials.• Live demos.
  3. 3. A more powerful web >4
  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.
  5. 5. New Features
  6. 6. 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>
  7. 7. • The canvas element.
  8. 8. 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>
  9. 9. Attributes : video
  10. 10. 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
  11. 11. Browser supports : Audio
  12. 12. New Input Types• email• url• number• range• Date pickers (date, month, week, time, datetime, datetime-local)• search• color
  13. 13. 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" />
  14. 14. Browser supports
  15. 15. 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
  16. 16. 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…
  17. 17. • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)• height and width• list• min, max and step• multiple• pattern (regexp)• placeholder• required
  18. 18.  Web Storage
  19. 19. • 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.
  20. 20. 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>
  21. 21. Event Attributes• Window Event Attributes• Form Events• Keyboard Events• Mouse Events• Media Events
  22. 22. 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
  23. 23. How to use css in html.• External style sheet• Internal style sheet• Inline style
  24. 24. New Features : CSS3 Animations
  25. 25. 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