1 / 42

Comprehensive Guide to HTML5: New Tags, Attributes, and JavaScript APIs

Explore the extensive features of HTML5 in this detailed guide. Delve into its new structural tags like `<header>`, `<footer>`, and `<section>`, as well as the enhanced media capabilities with `<audio>` and `<video>` tags. Learn about the new form elements, input types, and validation techniques introduced in HTML5. This overview also discusses the evolution of HTML from its inception to the powerful capabilities of the current version, aiming to reduce reliance on external plugins and enhance web application performance.

dionne
Télécharger la présentation

Comprehensive Guide to HTML5: New Tags, Attributes, and JavaScript APIs

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. http://schoolacademy.telerik.com HTML 5 New Tags, New Attributes, New JavaScript APIs, Forms, Validation, Audio, Video, SVG, Canvas Doncho Minkov Telerik Corporation www.telerik.com

  2. Table of Contents • Introduction to HTML 5 • Changed Old Tags • New Tags • Audio and Video Tags • New Structural Tags (<header>, <footer>, …) • New Form Elements • Forms Validation • New Attributes

  3. Table of Contents (2) • New CSS Styles • New JavaScript APIs • Working with SVG and Canvas

  4. Introduction to HTML 5 What the … is HTML 5?

  5. What is HTML 5? • HTML5 – the next major revision of the HTML • Currently under development • Far away from final version • Developed under the HTML 5 working group of the World Wide Web Consortium (W3C) in 2007 • First Public Working Draft of the specification • January 22, 2008 • Parts of HTML5 are being implemented in browsers before the whole specification is ready

  6. HTML – Past, Present, Future • 1991 – HTML first mentioned – Tim Berners-Lee – HTML tags • 1993 – HTML (first public version, published at IETF) • 1993 – HTML 2 draft • 1995 – HTML 2 – W3C • 1995 – HTML 3 draft • 1997 – HTML 3.2 – “Wilbur” • 1997 – HTML 4 – ”Cougar” – CSS • 1999 – HTML 4.01 (final) • 2000 – XHTML draft • 2001 – XHTML (final) • 2008 – HTML5 / XHTML5 draft • 2011 – feature complete HTML5 • 2022 – HTML5 – final specification

  7. HTML 5 Goals • Latest version is HTML5 • Aimed to have all of the power of native applications • Run on any platform (Windows, Linux, iPhone, Android, etc.) • New features should be based on HTML, CSS, DOM and JavaScript • Reduce the need for external plugins • Better error handling • More markup to replace scripting

  8. Designer Outlook What a Designer Should Know?

  9. Changed Old Tags • Doctype tag: • HTML tag: • Meta tag: • Link tag: <!DOCTYPE html> <html lang="en" xml:lang="en"> <meta charset="utf-8"> <link rel="stylesheet" href="style-original.css">

  10. New Layout Sctucture • Better layout structure: new structural elements • <section> • <header> • <nav> • <article> • <aside> • <footer> <header> <nav> <section> <aside> <header> <article> <footer> <footer>

  11. New Layout Sctucture (2) • Elements like header and footer are not meant to be only at the top and bottom of the page • Header and footer of each document section • Not very different from <DIV> tag but are more semantically well defined in the document structure

  12. New Layout Sctucture – Example <body> <header> <hgroup> <h1>HTML 5 Presentation</h1> <h2>New Layout Structure</h2>     </hgroup> </header> <nav>     <ul> Lecture     </ul> <ul> Demos     </ul> <ul> Trainers     </ul> </nav>

  13. New Layout Sctucture – Example (2) <section> <article> <header>         <h1>First Paragraph</h1>       </header> <section> Some text </section> </article> </section> <aside> <a href="http://academy.telerik.com"> more info</a> </aside> <footer> Done by Doncho Minkov, (c) 2011, Telerik Academy </footer> </body>

  14. New Layout Structure Tags Live Demo

  15. New Tags • <article> • For external content, like text from a news-article, blog, forum, or any other external source • <aside> • For content aside from (but related to) the content it is placed in • <details> • For describing details about a document, or parts of a document • <summary> • A caption, or summary, inside the details element

  16. New Tags (2) • <mark> • For text that should be highlighted • <nav> • For a section of navigation • <section> • For a section in a document (e.g. chapters, headers, footers) • <wbr> • Word break. For defining an appropriate place to break a long word or sentence • Other tags • <command>,<datalist>, <details>,<progress>, etc.

  17. New Media Tags • Media Tags • <audio> • Attributes: autoplay, controls, loop, src • <video> • Attributes: autoplay, controls, loop, height, width, src <audio width="360" height="240" controls= "controls" > <source src="someSong.mp3" type="audio/mp3"> </source> Audio tag is not supported </audio>

  18. Playing Audio Live Demo

  19. Embed Tag – New Syntax • <embed> • Defines embedded content, such as a plug-in • Attributes • src="url", type="type" <embed src="helloworld.swf" />

  20. New Attributes • New attributes

  21. New <input> Types • New <input>type(s)

  22. New Form Tags:<input type="range"> Live Demo

  23. Built-In Forms Validation Live Demo

  24. New JavaScript APIs What a programmer must know?

  25. JavaScript APIs • UI APIs • Canvas • Drag and Drop • Offline Applications • Local Storage • Extension to HTMLDocument

  26. Canvas • Canvas • Dynamic, Scriptable rendering of 2D images • Uses JavaScript to draw • Resolution-dependent bitmap • Can draw text as well <canvas id="ExampleCanvas" width="200" height="200"> This text is displayed if your browser does not support HTML5 Canvas. </canvas> var example = document.getElementById('ExampleCanvas'); var context = example.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50);

  27. Canvas Properties and Methods • fillStyle • Sets the drawing color • Default fillStyle is solid black • but you can set it to whatever you like • fillRect(x,y,width,height) • Draws a rectangle • Filled with the current fillStyle

  28. Canvas Properties and Methods (2) • strokeStyle • Sets the stroke color • strokeRect(x,y,width,height) • Draws an rectangle with the current strokeStyle • strokeRectdoesn’t fill in the middle • It just draws the edges • clearRect(x,y,width,height)clears the pixels in the specified rectangle

  29. Canvas Paths • What is a Path? • Something that is about to be drawn • It is not drawn yet context.beginPath(); context.moveTo(0, 40); context.lineTo(240, 40); context.moveTo(260, 40); context.lineTo(500, 40); context.moveTo(495, 35); context.lineTo(500, 40); context.lineTo(495, 45);

  30. Canvas Live Demo

  31. Drag and Drop • Drag and Drop • <element> attribute draggable="true" • Events: dragstart, dragstop

  32. Offline Applications • Offline Applications • Cache manifest file • Every page of your web application needs a manifest attribute • Points to the cache manifest for the entire application • Manifest file should contain Content-Type header (text/cache-manifest) • Forcible cache update • applicationCache.updated()

  33. Local Storage • Local Storage • Store data locally • Similar to cookies, but can store much larger amount of data • Same Origin Restrictions • localStorage.setItem(key, value) • localStorage.getItem(key) • SQL Storage • Easier access to SQL Storage

  34. HTML Storage • Local Storage openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024, function (db) {db.changeVersion('', '1.0', function (t) { t.executeSql('CREATE TABLE docIds (id, name)'); }, error); }); function saveState(text){ localStorage["localStorageDemo"] = text; } function restoreState(){ return localStorage["localStorageDemo"]; } • SQL Web

  35. HTML DOM Extensions • HTML DOM Extensions: • getElementsByClassName() • innerHTML • hasFocus • getSelection()

  36. New CSS

  37. New CSS • New selectors (usable in JavaScript also) • Web Fonts • Text wrapping/overflow • Columns • Opacity, Gradients, Rounded Corners, Shadows • Transitions, Transforms, Animations

  38. End User Outlook What is the Advantage to the End User?

  39. HTML 5 – End User Outlook • Provides a very rich user experience without Plug-ins • RIA replacement? • Better Performance • Leverages GPU for better graphical experience

  40. How to Detect HTML5? • HTML5 is not a thing someone can detect • It consists of many elements that can be detected • <canvas>, <video>, etc. • The HTML5 specification defines how tags interact with JavaScript • Through the Document Object Model (DOM) • HTML5 doesn’t just define a <video>tag • There is also a corresponding DOM API for video objects in the DOM • You can use this API to detect support for different video formats, etc.

  41. HTML 5 – Showcases and Resources • HTML 5 Rocks – Examples, Demos, Tutorials • http://www.html5rocks.com/ • HTML 5 Demos • http://html5demos.com/ • Internet Explorer 9 Test Drive for HTML 5 • http://ie.microsoft.com/testdrive/ • Apple Safari HTML 5 Showcases • http://www.apple.com/html5/showcase/

  42. HTML 5 ? ? Questions? ? ? ? ? ? ? ? ? ?

More Related