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.
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>
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
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
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.
24. Event Attributes
• Window Event Attributes
• Form Events
• Keyboard Events
• Mouse Events
• Media Events
25.
26.
27.
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
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