html5 n css3

33
Introduction to HTML 5 & CSS 3 Jindal Gohil TechnoTUX

Upload: jindal-gohil

Post on 16-May-2015

2.078 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: Html5 n css3

Introduction to HTML 5 & CSS 3

Jindal Gohil TechnoTUX

Page 2: Html5 n css3

A g e n d a

• Introduction to HTML5 & CSS3.• New Elements .• New Features.• Browser Supports.• Tutorials.• Live demos.

Page 3: Html5 n css3

A more powerful web

> 4

Page 4: Html5 n css3

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.

Page 5: Html5 n css3
Page 6: Html5 n css3

New Features

Page 7: Html5 n css3

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>

Page 8: Html5 n css3

• The canvas element.

Page 9: Html5 n css3
Page 10: Html5 n css3

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>

Page 11: Html5 n css3

Attributes : video

Page 12: Html5 n css3

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

Page 13: Html5 n css3

Browser supports : Audio

Page 14: Html5 n css3
Page 15: Html5 n css3

New Input Types

• email• url• number• range• Date pickers (date, month, week, time,

datetime, datetime-local)• search• color

Page 16: Html5 n css3

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" />

Page 17: Html5 n css3

Browser supports

Page 18: Html5 n css3

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

Page 19: Html5 n css3

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…

Page 20: Html5 n css3

• form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)

• height and width• list• min, max and step• multiple• pattern (regexp)• placeholder• required

Page 21: Html5 n css3

 Web Storage

Page 22: Html5 n css3

• 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.

Page 23: Html5 n css3

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>

Page 24: Html5 n css3

Event Attributes

• Window Event Attributes• Form Events• Keyboard Events• Mouse Events• Media Events

Page 25: Html5 n css3
Page 26: Html5 n css3
Page 27: Html5 n css3
Page 28: Html5 n css3

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

Page 29: Html5 n css3

How to use css in html.

• External style sheet• Internal style sheet• Inline style

Page 30: Html5 n css3

New Features : CSS3 Animations

Page 31: Html5 n css3

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

Page 32: Html5 n css3
Page 33: Html5 n css3