Upcoming SlideShare
Loading in...5







Total Views
Views on SlideShare
Embed Views



1 Embed 24 24


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

HTML5 HTML5 Presentation Transcript

  • HTML5 Er. Pradip Kharbuja
  • 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.
  • 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>
  • 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
  • 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
  • Some new attributes in HTML5 accept pattern formnovalidate formmethod required placeholder spellcheck multiple autofocus list (datalist) step formaction max min autocomplete novalidate
  • Drawbacks of HTML5 • All features of HTML5 are not supported in all browsers. • Requires JavaScript for some features like drag & drop.
  • Example of HTML5
  • 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
  • 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 document should be inside a <nav> element. • The <nav> element is intended only for major block of navigation links.
  • 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
  • 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.
  • 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.
  • Accessibility and Media
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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>
  • New HTML5 Semantic Elements
  • 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
  • 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.
  • References • • •