Your SlideShare is downloading. ×
0
What is HTML5?
What is HTML5?
What is HTML5?
What is HTML5?
What is HTML5?
What is HTML5?
What is HTML5?
What is HTML5?
What is HTML5?
What is HTML5?
What is HTML5?
What is HTML5?
What is HTML5?
What is HTML5?
What is HTML5?
What is HTML5?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

What is HTML5?

5,827

Published on

HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in 1999. The web has changed a lot since then. HTML5 is still a work in progress. However, most …

HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in 1999. The web has changed a lot since then. HTML5 is still a work in progress. However, most modern browsers have some HTML5 support.

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).

WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.

Published in: Education, Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,827
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
359
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 8. 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>
  • 9. 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
  • 10. 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/
  • 11. 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/
  • 12. 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
  • 13. 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.
  • 14. Thank you :) Anas AbuDayah Front-end Web Developer Twitter: @abudayah www.abudayah.comLast update: 11 Aug 2011

×