html5 + css3+ java script for future - html5
DESCRIPTION
Presentation I used for 4th Year Modern Topics in IT - HTML5 in SLIIT(http://www.sliit.lk/)TRANSCRIPT
HTML5 Semantic Tags Forms Audio/Video Canvas SVG
A lot of versions http://en.wikipedia.org/wiki/HTML
http://www.evolutionoftheweb.com The Evolution of Web Design
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.
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.
<!DOCTYPE html><html><head><title>Title of the document</title></head>
<body>The content of the document......</body>
</html>
<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" />
Only Support .MP3, .OGG, .WAV
<audio src="resources/fileName.mp3"controls="controls" />OR<audio controls="controls">
<sourcesrc="resources/fileName.mp3“type="audio/mpeg" />
Your browser does not support the audio element.</audio>
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>
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.
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
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.asp
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!
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
