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>

11. Attributes : 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