What is HTML5?
7 likes3,131 views
The document provides an overview of HTML5, highlighting its features, new elements, and improvements over previous versions such as HTML 4.01 and XHTML 1.0. It details the collaborative effort between W3C and WHATWG and outlines new capabilities like audio/video support and better offline storage. Additionally, it compares HTML5 with technologies like Flash and Silverlight, emphasizing its open-source nature and SEO advantages while noting current limitations regarding complete browser support.
What is HTML5?
- 1. HYPERTEXT MARKUP LANGUAGE VERSION 5 A N A S A B U D AYA H www.abudayah.com
- 2. Rough Timeline of Web Technologies 1991 HTML 1994 HTML 2 1996 CSS + JavaScript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2002 Tableless Web Design 2005 AJAX 2009 HTML 5* + CSS 3*
- 3. What is HTML5? • Its open source • Standard technology (WHATWG + W3C) HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). • Successor of HTML v4.01 & XHTML v1.0
- 4. Rules: • More markup to replace scripting. • HTML5 should be device independent. • The development process should be visible to the public.
- 5. New Features: Some of the most interesting new features in HTML5: • The canvas element for drawing. • The video and 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..
- 6. New Elements in HTML5: New Markup Elements <header>, <nav>, <aside>, <footer>… New Media Elements <Audio>, <video>, <source>, <embed>. The Canvas Element <canvas> New Form Elements <datalist>, <keygen>… New Input Type Attribute Values Tel, search, url, email, datetime, color, number… HTML5 Standard Attributes: item{empty/url}, subject{id}, draggable{true/false/auto}..
- 7. New Event Attributes: Window Event: Onafterprint, onerror, ononline, onoffline… Form Events *onreset event was deleted Oninput, oninvalid, onforminput… Keybord Events No new events.. Mouse Events Ondragstart, ondrag, ondrop.. Media Events Onplay, onpause, onprogress.. More: http://www.w3schools.com/html5/html5_reference.asp
- 9. HTML4 Page layout: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <div id=“header”> "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <div id=“nav”> <html> <body> <div id=“header”> <div id=“article”> <h1>header</h1> </div> <div id=“aside”> <div id=“header”> <div id=“section”> <a href=“home.html”>Home</a> <a href=“about.html”>About</a> </div> <div id=“article”> <h1>Article title..</h1> <div id=“footer”> <p>Text…..</p> </div> <div id=“section”> <p>Section1</p> </div> <div id=“aside”> <p>About us…<p> </div> <div id=“footer”> <p>All rights received</p> </div> </body> </html>
- 10. HTML5 Page layout: <!DOCTYPE HTML> <html> <header> <body> <header> <nav> <h1>Title</h1> </header> <nav> <article> <a href=“home.html”>Home</a> <a href=“about.html”>About</a> <aside> </nav> <section> <article> <h1>Article title..</h1> <p>Text…..</p> </article> <section> <footer> <p>Section1</p> </section> <aside> <p>About us…<p> <header> Defines a header for a section or page </aside> <nav> Defines navigation links <footer> <p>All rights received</p> <aside> Defines content aside from the page content </footer> </body> <article> Defines an article </html> <section> Defines a section <footer> Defines a footer for a section or page
- 12. HTML5 vs. Flash/Silverlight: HTML5 FLASH / Silverlight Property + Open source - Proprietary (Adobe). - not yet implemented everywhere. + Flash present on almost every Prevalence computers. + no need for embed code - need for embed code Multimedia - Dose not use a specific format. + use default format (FLV,MP3). + not need for external plugins. - need for external plugins. Browsers - no browser fully support for HTML5. - Crashes browser. - Not support for navigation keys like Back button. + faster - Slower Capacity/load - Take much requirements on CPU. SEO + friendly with search engines. - Not friendly with search engines. Chart on Flash and html5 canvas: http://www.zingchart.com/flash-and-html5-canvas/
- 13. HTML5 Examples: 1. Basic page. Basic web page using header & nav & aside elements. http://abudayah.com/files/html5/basicpage/ 2. Multimedia Audio & Video http://abudayah.com/files/html5/multimedia/ 3. Drag and Drop Drag and drop demo in a HTML document, using the HTML5 drag and drop API. http://abudayah.com/files/html5/dragdrop/ 4. Canvas: Drawing Graphics with Canvas http://abudayah.com/files/html5/canvas/
- 14. HTML5 Examples: Slides: http://slides.html5rocks.com Get Location: http://html5demos.com/geo Upload Files: http://email.jeeran.com Image gallery: http://www.apple.com/html5/showcase/gallery More: http://www.apple.com/html5 interactive comic: http://www.nevermindthebullets.com/ CAPMAN http://www.kesiev.com/akihabara/demo/game-capman.html Google smash: http://mrdoob.com/92/Google_Gravity_HTML5 Canvas Video: http://craftymind.com/factory/html5video/CanvasVideo.html
- 15. Is it possible to build sites on HTML5 now? NO!.. Because: 1. is not completed. 2. Not fully browser support. 3. DRM issues. How can we move forward ? • It is a good time for learning. • Build web pages HTML4/XHTML + html5 + JS • Building browser-specific apps. • Focusing on the mobile.
- 16. Thank you :) Anas AbuDayah Front-end Web Developer Twitter: @abudayah www.abudayah.com Last update: 11 Aug 2011