Html5 + css3+ java script for future - HTML5

292 views
210 views

Published on

Presentation I used for 4th Year Modern Topics in IT - HTML5 in SLIIT(http://www.sliit.lk/)

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

  • Be the first to like this

No Downloads
Views
Total views
292
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 + css3+ java script for future - HTML5

  1. 1. Harshana Weerasinghehttp://about.me/harshanaFebruary, 2013
  2. 2.  HTML5 Semantic Tags Forms Audio/Video Canvas SVG
  3. 3.  A lot of versions http://en.wikipedia.org/wiki/HTML http://www.evolutionoftheweb.com The Evolution of Web Design
  4. 4.  HTML5 is The New HTML Standard. The previous version of HTML, HTML 4.01, came in 1999. The web has changed a lot since then. HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.
  5. 5.  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.
  6. 6. <!DOCTYPE html><html><head><title>Title of the document</title></head><body>The content of the document......</body></html>
  7. 7. <input id="FullName" type="text" required="required" /><input id=“mail" type=“email" required="required" /><input id=“company" type="text" /><input id=“zip" type=“number" /><input id=“phone" type=“tel" />
  8. 8.  Only Support .MP3, .OGG, .WAV<audio src="resources/fileName.mp3"controls="controls" />OR<audio controls="controls"> <source src="resources/fileName.mp3“ type="audio/mpeg" /> Your browser does not support theaudio element.</audio>
  9. 9.  Only Support .MP4, WebM, .OGG<video src="resources/Wildlife.MP4"controls="controls"/>OR<video controls="controls"> <source src="resources/Wildlife.MP4" type="video/mp4" /> Your browser does not support the videoelement.</video>
  10. 10.  Used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics  several methods for drawing paths, boxes, circles, characters, and adding images.
  11. 11.  SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines the graphics in XML format SVG graphics do NOT lose any quality if they are zoomed or resized Every element and every attribute in SVG files can be animated SVG is a W3C recommendation
  12. 12.  Save file as a .svg <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> Can be Embeded SVG With the <embed>, <object>, <iframe> or <a> Tag or inline in HTML More E.G. http://www.w3schools.com/svg/svg_examples.a sp
  13. 13.  Accessibility Video And Audio Support (no flash ) Simple Doctype Cleaner Code Better Interactions Game Development Legacy/Cross Browser Support Mobile, Mobile, Mobile It’s The Future, Get With It!
  14. 14.  http://en.wikipedia.org/wiki/Html5 http://channel9.msdn.com/Series/Developing -HTML-5-Apps-Jump-Start http://www.w3schools.com/html/html5_intro .asp http://www.w3schools.com/svg/default.asp

×