Downloaded 11 times
Uploaded byHarshana Weerasinghe
Html5 + css3+ java script for future - HTML5
This document provides an overview of HTML5, including its new semantic tags, forms, audio/video capabilities, canvas and SVG graphics. It discusses the evolution of HTML5 from previous versions and its development as a cooperation between W3C and WHATWG. Examples are given of how to include audio, video, canvas and SVG in HTML5, along with reasons to use HTML5 like accessibility, mobile support and cleaner code. References for further information on HTML5 are also included.
More Related Content
Similar to Html5 + css3+ java script for future - HTML5
Html5 + css3+ java script for future - HTML5
- 1.
- 2. HTML5 Semantic Tags Forms Audio/Video Canvas SVG
- 3. A lot of versions http://en.wikipedia.org/wiki/HTML http://www.evolutionoftheweb.com The Evolution of Web Design
- 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. 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.
- 8. <!DOCTYPE html> <html> <head> <title>Title ofthe document</title> </head> <body> The content of the document...... </body> </html>
- 12. <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" />
- 16. 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 the audio element. </audio>
- 17. 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 video element. </video>
- 18. 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.
- 19. 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
- 20. 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
- 21. 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!
- 23. 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