26
HTML5 Er. Pradip Kharbuja
| Date post: | 18-Jan-2015 |
| Category: |
Education |
| Upload: | pradip-kharbuja |
| View: | 293 times |
| Download: | 3 times |
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
OUTPUT
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
• 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
![HTML5 and Digital Signatures - vrk.fi · HTML5 AND DIGITAL SIGNATURES 1 Introduction This specification describes a method to generate digital signatures in HTML5 applications [HTML5]](https://static.documents.pub/doc/80x56/5c90e74609d3f2a94f8cd84f/html5-and-digital-signatures-vrkfi-html5-and-digital-signatures-1-introduction.jpg)