Html5 + css3+ java script for future - HTML5

Post on 04-Jul-2015

236 views 7 download

description

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

Transcript of Html5 + css3+ java script for future - HTML5

Harshana Weerasinghehttp://about.me/harshanaFebruary, 2013

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!