HTML5
Er. Pradip Kharbuja
HTML5
• a revised code set that builds upon HTML4 to add new capabilities.
• has bunch of new elements & attributes that c...
Why Code in HTML5?
• It enables cleaner, easier-to-write code.
• Better rendering on devices that vary in size from mobile...
HTML5 Capabilities
• Integration of Audio & Video
• Drag & Drop
• Using the new Elements
• Drawing with Canvas Elements
• ...
New Web Form Controls
Type Control Type Type Control Type
color A color picker range A slider control
date A date control ...
OUTPUT
Some new attributes in HTML5
accept pattern formnovalidate formmethod
required placeholder spellcheck multiple
autofocus l...
Drawbacks of HTML5
• All features of HTML5 are not supported in all browsers.
• Requires JavaScript for some features like...
Example of HTML5
Block Elements - Headings
• <h1> to <h6>
• The Block Elements <hgroup> is new element to HTML 5
• It allows us to group he...
The HTML 5 <nav> Element
The HTML 5 <nav> Element
• HTML 5 introduces a new <nav> element for grouping together hyperlinks.
• NOT all links of a do...
The HTML5 <video> and <audio> Elements
• HTML5 provides <video> and <audio> elements to easily embed media into a web
page...
The HTML5 <video> Elements
• Different browsers support different video file formats.
• The <video> element can feature ne...
The HTML5 <audio> Element
• The <audio> element works in a very similar way to the <video> element.
• Again we need differ...
Accessibility and Media
HTML5 New Form Elements
• HTML 5 provides some new form controls (e.g. date, time, email, etc.) and
attributes (e.g. place...
HTML5 - Attributes
• The autofocus attribute places the user’s cursor in a form control when the
page loads.
• The placeho...
HTML5 – Number Types
• The number type defines a ‘spinbox’.
• The range type defines a ‘slider’.
• The min and max attribu...
HTML5 – Date Picker
• We can specify a type of date, datetime, month,
week or time.
• Previously, we have had to rely on J...
HTML5 – The email and url Types
• These types allow browsers to validate user input.
• Check the user has entered a valid ...
New HTML5 Semantic Elements
• Semantic elements = Elements with meaning.
• <div>, <span> tell nothing about content.
• HTM...
New HTML5 Semantic Elements
CSS3
• CSS3 is the latest standard for CSS.
• CSS3 specification is still under development by W3C.
• Some important CSS3 ...
CSS3 Media Queries
• Media Queries is a CSS3 module allowing content rendering to adapt to
conditions such as screen resol...
References
• http://webdesignerwall.com/tutorials/css3-media-queries
• https://developer.mozilla.org/en-US/docs/Web/Guide/...
Upcoming SlideShare
Loading in...5
×

HTML5

386

Published on

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
386
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
147
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5

  1. 1. HTML5 Er. Pradip Kharbuja
  2. 2. HTML5 • a revised code set that builds upon HTML4 to add new capabilities. • has bunch of new elements & attributes that can be accessed through scripting • adds some important new tags to make audio, video, and application integration smoother and more reliable. e.g. <audio>, <video>, <canvas>, etc. • removes support for some of the older tags. <font>, <frame>, <frameset>, etc.
  3. 3. Why Code in HTML5? • It enables cleaner, easier-to-write code. • Better rendering on devices that vary in size from mobile phones to huge desktop monitors • Better images, more interactivity, video, audio, animations, and better support for various image and file formats • Supports drag & drop, canvas using JavaScript • Clean Document Type <!DOCTYPE html>
  4. 4. HTML5 Capabilities • Integration of Audio & Video • Drag & Drop • Using the new Elements • Drawing with Canvas Elements • Getting Data with New Web Form Controls • Remember with Browser History • Edit Pages on the Fly • Inter document Messaging • Making use of Web Storage • Geolocation API
  5. 5. New Web Form Controls Type Control Type Type Control Type color A color picker range A slider control date A date control tel A text field datetime A date and time control time A time control email A text field url A text field month A month control week A week control number A text field
  6. 6. OUTPUT
  7. 7. Some new attributes in HTML5 accept pattern formnovalidate formmethod required placeholder spellcheck multiple autofocus list (datalist) step formaction max min autocomplete novalidate
  8. 8. Drawbacks of HTML5 • All features of HTML5 are not supported in all browsers. • Requires JavaScript for some features like drag & drop.
  9. 9. Example of HTML5
  10. 10. Block Elements - Headings • <h1> to <h6> • The Block Elements <hgroup> is new element to HTML 5 • It allows us to group headings together • For a heading and sub-heading • It can only contain <h1> - <h6> elements. hgroup has now been removed from the HTML5 specification
  11. 11. The HTML 5 <nav> Element
  12. 12. The HTML 5 <nav> Element • HTML 5 introduces a new <nav> element for grouping together hyperlinks. • NOT all links of a document should be inside a <nav> element. • The <nav> element is intended only for major block of navigation links.
  13. 13. The HTML5 <video> and <audio> Elements • HTML5 provides <video> and <audio> elements to easily embed media into a web page. • Both elements can feature attributes for controlling playback. • auto play, preload, looping • Doesn’t depend on external media players • Only modern browsers support these elements
  14. 14. The HTML5 <video> Elements • Different browsers support different video file formats. • The <video> element can feature nested <source> elements. • Each source element specifies a different file format. • The browser uses the format they can play.
  15. 15. The HTML5 <audio> Element • The <audio> element works in a very similar way to the <video> element. • Again we need different <source> elements for different browsers.
  16. 16. Accessibility and Media
  17. 17. HTML5 New Form Elements • HTML 5 provides some new form controls (e.g. date, time, email, etc.) and attributes (e.g. placeholder, required, etc.). • Few browsers support all these new features. • If a browser does not recognize the new input type, it will display a plain text field. • HTML5 doesn’t required JavaScript for validation.
  18. 18. HTML5 - Attributes • The autofocus attribute places the user’s cursor in a form control when the page loads. • The placeholder attribute is used to place some descriptive text in a form control. • The required attribute means the user has to fill in the form before it gets sent to the server.
  19. 19. HTML5 – Number Types • The number type defines a ‘spinbox’. • The range type defines a ‘slider’. • The min and max attributes allow us to restrict the numbers that can be entered.
  20. 20. HTML5 – Date Picker • We can specify a type of date, datetime, month, week or time. • Previously, we have had to rely on JavaScript to create these features on a web page.
  21. 21. HTML5 – The email and url Types • These types allow browsers to validate user input. • Check the user has entered a valid email address/URL • Useful for smart phones • Dynamically changes the keyboard for the input type. • The keyboard features the @ symbol when the input type is email.
  22. 22. New HTML5 Semantic Elements • Semantic elements = Elements with meaning. • <div>, <span> tell nothing about content. • HTML 5 features new semantic elements we can use instead of the <div>. 1. <header> 2. <article> 3. <footer> 4. <aside> 5. <nav> 6. <figure> 7. <section> 8. <summary>
  23. 23. New HTML5 Semantic Elements
  24. 24. CSS3 • CSS3 is the latest standard for CSS. • CSS3 specification is still under development by W3C. • Some important CSS3 modules are : 1. Animation 2. Text Effects 3. Gradient 4. Transitions 5. Transformation 6. Backgrounds 7. Fonts 8. Borders
  25. 25. CSS3 Media Queries • Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen). • CSS 3 extends the concept of media queries. • Provide different style sheets based on screen resolution.
  26. 26. References • http://webdesignerwall.com/tutorials/css3-media-queries • https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries • http://en.wikipedia.org/wiki/Media_queries
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×