SlideShare a Scribd company logo

Html5

•Download as PPTX, PDF•
•
G
gjoabraham

This document provides an introduction to HTML5 and its new features. It discusses HTML5 as the successor to HTML 4.01 and XHTML 1.1, bringing new tags, features, and APIs. These include new structural elements, forms and validation, native audio and video, Canvas API, web storage, offline applications, geolocation, and drag and drop. It also outlines some of the new and updated HTML5 elements and semantic elements such as article, aside, footer, nav, progress, and meter. Examples are given of how to implement these new features in HTML5.

Related slideshows

SEF2013 - Create a Business Solution, Step by Step, with No Managed Code
SEF2013 - Create a Business Solution, Step by Step, with No Managed CodeSEF2013 - Create a Business Solution, Step by Step, with No Managed Code
SEF2013 - Create a Business Solution, Step by Step, with No Managed Code
 
Intro to SharePoint Web Services
Intro to SharePoint Web ServicesIntro to SharePoint Web Services
Intro to SharePoint Web Services
 
#SPSTC Maximizing the SharePoint User Experience with Free 3rd Party jQuery L...
#SPSTC Maximizing the SharePoint User Experience with Free 3rd Party jQuery L...#SPSTC Maximizing the SharePoint User Experience with Free 3rd Party jQuery L...
#SPSTC Maximizing the SharePoint User Experience with Free 3rd Party jQuery L...
 
1 of 15
GETTING STARTED WITH HTML5 Presented By, Jijo Abraham
What Is HTML5? • Successor of HTML 4.01 and XHTML 1.1 • It comes with new tags, features and APIs • Below is a non exhaustive list of features that tend to be labelled as "HTML5" in the medias: • New structural elements (<header>, <footer>, <nav> and more) • Forms 2.0 and client-side validation • Native browser support for audio and video (<video>, <audio>) • Canvas API and SVG • Web storage • Offline applications • Geolocation • Drag & Drop • Web Workers • New communications API (Server Sent Events, Web Sockets, …)
New and Updated HTML5 Elements • HTML5 introduces 28 new elements: • <section>, <article>, <aside>, <hgroup>, <header>,<footer>, <nav>, <fig ure>, <figcaption>, <video>, <audio>, <source>, <embed>, <mark>,<progress> , <meter>, <time>, <ruby>, <rt>, <rp>,<wbr>, <canvas>, <command>, <details >,<summary>, <datalist>, <keygen> and <output> • An HTML page first starts with the DOCTYPE declaration • HTML5 also update some of the previous existing elements to better reflect how they are used on the Web or to make them more useful such as: • The <a> element can now also contain flow content instead of just phrasing content • The <hr> element is now representing a paragraph-level thematic break • The <cite> element only represent the title of a work • The <strong> element is now representing importance rather than strong emphasis
New Semantic Elements • <nav>: Represents a major navigation block. It groups links to other pages or to parts of the current page. <nav> does not have to be used in every place you can find links. For instance, footers often contains links to terms of service, copyright page and such, the <footer> element would be sufficient in that case • <aside>: The "aside" element is a section that somehow related to main content, but it can be separate from that content
New Semantic Elements • <article>: The web today contains a ocean of news articles and blog entries. That gives W3C a good reason to define an element for article instead of <div class="article">. • We should use article for content that we think it can be distributable. Just like news or blog entry can we can share in RSS feed • "article" element can be nested in another "article" element. • An article element doesn't just mean article content. You can have header andfooter element in an article. In fact, it is very common to have header as each article should have a title.
New Semantic Elements <footer>: Similarly to "header" element, "footer" element is often referred to the footer of a web page. Well, most of the time, footer can be used as what we thought. Please don't think you can only have one footer per web document, you can have a footer in every section, or every article.
New Semantic Elements <Progress>: The new "progress" element appears to be very similar to the "meter" element. It is created to indicate progress of a specific task. The progress can be either determinate OR interderminate. Which means, you can use "progress" element to indicate a progress that you do not even know how much more work is to be done yet.
New Semantic Elements <meter>: "Meter" is a new element in HTML5 which represenet value of a known range as a gauge. The keyword here is "known range". That means, you are only allowed to use it when you are clearly aware of its minimum value and maximum value. <mark>: The mark <mark> element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. Basically, it is used to bring the reader's attention to a part of the text that might not have been <figure>: The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document
Example: <!DOCTYPE html> <html lang="en"> <head> <title> </title> <meta charset="UTF-8"> <style> </style> // for header and article and img <script> </script> </head> <body> content: header, article for each site </body> </html>
New Features • Canvas element for drawing • Video/audio elements for media playback • Better support for local offline storage • New content specific elements, like article, footer, header, nav, section • New form controls, like calendar, date, time, email, url, search
Older versions Vs. HTML5 Old version: • It requires plug-ins like Flash to operate various music and video files. • It has been considered an interactive form that allows images and objects to be embedded. • HTML is a W3C recommendation that stands for World Wide Web Consortium. • It lacks canvas feature for drawing. • In HTML, cookies are used for storing login and web browsing history. For large amount of data storage cookies has not been considered suitable option.
Older versions Vs. HTML5 HTML5: • It can play audio-video files and supports various formats. • HTML5 includes interactive documents that functions for embedding graphics. • HTML 5 is not a W3C recommendation yet • It has initiated Canvas feature that uses JavaScript to draw graphics on a web page and is useful to control pixels. • Two new storage methods have also been introduced in HTML5 that include local storage and session storage. The data is not passed on by every server request, but used only when asked for. So, this makes it possible to store large amounts of data without affecting the website's performance.
Applications (HTML5 features ) • Favorite sites • Dice game: drawing arcs & rectangles • Bouncing ball: drawing, including gradient, form validation, timed events • Cannonball & Slingshot: drawing lines & images, mouse events, rotation & translation, programmer-defined objects • Memory polygons & pictures: drawing, mouse events (clicking on card), timing
Applications (HTML5 features ) • Quiz: dynamically created HTML markup, mouse events on elements, video • Mazes: mouse events, drawing, localStorage, radio buttons • Rock, Paper, Scissors: drawing, audio • Hangman: drawing lines and arcs (ovals), dynamic HTML markup • Blackjack: key events, drawing images, footer
Html5

More Related Content

Html5

  • 1. GETTING STARTED WITH HTML5 Presented By, Jijo Abraham
  • 2. What Is HTML5? • Successor of HTML 4.01 and XHTML 1.1 • It comes with new tags, features and APIs • Below is a non exhaustive list of features that tend to be labelled as "HTML5" in the medias: • New structural elements (<header>, <footer>, <nav> and more) • Forms 2.0 and client-side validation • Native browser support for audio and video (<video>, <audio>) • Canvas API and SVG • Web storage • Offline applications • Geolocation • Drag & Drop • Web Workers • New communications API (Server Sent Events, Web Sockets, …)
  • 3. New and Updated HTML5 Elements • HTML5 introduces 28 new elements: • <section>, <article>, <aside>, <hgroup>, <header>,<footer>, <nav>, <fig ure>, <figcaption>, <video>, <audio>, <source>, <embed>, <mark>,<progress> , <meter>, <time>, <ruby>, <rt>, <rp>,<wbr>, <canvas>, <command>, <details >,<summary>, <datalist>, <keygen> and <output> • An HTML page first starts with the DOCTYPE declaration • HTML5 also update some of the previous existing elements to better reflect how they are used on the Web or to make them more useful such as: • The <a> element can now also contain flow content instead of just phrasing content • The <hr> element is now representing a paragraph-level thematic break • The <cite> element only represent the title of a work • The <strong> element is now representing importance rather than strong emphasis
  • 4. New Semantic Elements • <nav>: Represents a major navigation block. It groups links to other pages or to parts of the current page. <nav> does not have to be used in every place you can find links. For instance, footers often contains links to terms of service, copyright page and such, the <footer> element would be sufficient in that case • <aside>: The "aside" element is a section that somehow related to main content, but it can be separate from that content
  • 5. New Semantic Elements • <article>: The web today contains a ocean of news articles and blog entries. That gives W3C a good reason to define an element for article instead of <div class="article">. • We should use article for content that we think it can be distributable. Just like news or blog entry can we can share in RSS feed • "article" element can be nested in another "article" element. • An article element doesn't just mean article content. You can have header andfooter element in an article. In fact, it is very common to have header as each article should have a title.
  • 6. New Semantic Elements <footer>: Similarly to "header" element, "footer" element is often referred to the footer of a web page. Well, most of the time, footer can be used as what we thought. Please don't think you can only have one footer per web document, you can have a footer in every section, or every article.
  • 7. New Semantic Elements <Progress>: The new "progress" element appears to be very similar to the "meter" element. It is created to indicate progress of a specific task. The progress can be either determinate OR interderminate. Which means, you can use "progress" element to indicate a progress that you do not even know how much more work is to be done yet.
  • 8. New Semantic Elements <meter>: "Meter" is a new element in HTML5 which represenet value of a known range as a gauge. The keyword here is "known range". That means, you are only allowed to use it when you are clearly aware of its minimum value and maximum value. <mark>: The mark <mark> element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. Basically, it is used to bring the reader's attention to a part of the text that might not have been <figure>: The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document
  • 9. Example: <!DOCTYPE html> <html lang="en"> <head> <title> </title> <meta charset="UTF-8"> <style> </style> // for header and article and img <script> </script> </head> <body> content: header, article for each site </body> </html>
  • 10. New Features • Canvas element for drawing • Video/audio elements for media playback • Better support for local offline storage • New content specific elements, like article, footer, header, nav, section • New form controls, like calendar, date, time, email, url, search
  • 11. Older versions Vs. HTML5 Old version: • It requires plug-ins like Flash to operate various music and video files. • It has been considered an interactive form that allows images and objects to be embedded. • HTML is a W3C recommendation that stands for World Wide Web Consortium. • It lacks canvas feature for drawing. • In HTML, cookies are used for storing login and web browsing history. For large amount of data storage cookies has not been considered suitable option.
  • 12. Older versions Vs. HTML5 HTML5: • It can play audio-video files and supports various formats. • HTML5 includes interactive documents that functions for embedding graphics. • HTML 5 is not a W3C recommendation yet • It has initiated Canvas feature that uses JavaScript to draw graphics on a web page and is useful to control pixels. • Two new storage methods have also been introduced in HTML5 that include local storage and session storage. The data is not passed on by every server request, but used only when asked for. So, this makes it possible to store large amounts of data without affecting the website's performance.
  • 13. Applications (HTML5 features ) • Favorite sites • Dice game: drawing arcs & rectangles • Bouncing ball: drawing, including gradient, form validation, timed events • Cannonball & Slingshot: drawing lines & images, mouse events, rotation & translation, programmer-defined objects • Memory polygons & pictures: drawing, mouse events (clicking on card), timing
  • 14. Applications (HTML5 features ) • Quiz: dynamically created HTML markup, mouse events on elements, video • Mazes: mouse events, drawing, localStorage, radio buttons • Rock, Paper, Scissors: drawing, audio • Hangman: drawing lines and arcs (ovals), dynamic HTML markup • Blackjack: key events, drawing images, footer