As many conceive it, its not a programming language. It’s a markup language. *Slidecontecnt* I’m coming to tags. Its on the next slide.
The most reason version html4, has been on for over a decade now. And, it hasn't really seen a major update. Sure there's XHTML, but that did little more than make things slightly stricter - making you write better quality code if you were at all concerned with compliance. The main area that was not been addressed yet was web application. To give authors more flexibility and enable more interactive websites, html5 was introduced.Critics say that html5 could actually kill flash and silverlight.
HTML 5<br />Karthik Madhavan<br />S7, CS (2006-2010)<br />
HTML : An Outline<br />Stands for Hyper Text Markup Language.<br />Not a programming language, it is a markup language.<br />A markup language is a set of markup tags.<br />Markup tags are used to describe web pages.<br />3<br />
TAGS<br />Keywords surrounded by angle brackets < > like <html><br />They come in pairs like <b> and </b><br />Common tags are :-<br /><html><br /><head><br /><div><br /><body><br /><a><br /><p><br /><h1><br />4<br />
Document Object Model<br />Cross platform, language independent model<br />Represents and interacts with objects in HTML documents<br />6<br />
Why HTML5 ?<br />HTML4 hasn’t been updated for about 10 years.<br />XHTML was introduced but it made things stricter and not easier.<br />Embedding audio/video was dependent on flash etc.<br />New websites have to be interactive.<br />7<br />
HTML4 - drawbacks<br />It does not adequately support web applications.<br />Complex structuring of web pages.<br />Complex DTDs<br />Need plug-ins to embed audio and video.<br />Does not support drag and drop features, editing, drawing, error handling etc<br />8<br />
An Overview<br /><ul><li>HTML5 (referred to as Web Applications 1.0) is an improvement of HTML4.0 and XHTML1.0
<dialog></li></li></ul><li>Multimedia Elements<br />17<br /><ul><li><canvas></li></ul> a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.<br /> 2D drawing area controlled by JS.<br />set of functions in ‘canvas API’ for drawing shapes, defining paths, transformations etc<br /> Scripting enabled environment.<br />
<video><br />Embed video in web pages<br /> Does not require 3rd party plug-ins like Apple QuickTime or Adobe Flash Player.<br /> No detection script required<br /> Attributes like src, autoplay, loop etc<br /> JS to fall back to plug-ins if browser does not support <video><br />19<br />
url </li></li></ul><li>25<br />auto focus and omission of attributes<br /><form action="" method="get"> <br /> <p><label>Search: <input name=search type="text“ id="search"></label></p> <br /> <script> document.getElementById('search').focus() </script> <br /><!-- the rest of the form --></form><br />can be replaced by<br /><form> <br /> <p><label>Search: <input name=search autofocus></label><br /> </p> <br /> <!-- the rest of the form --><br />
28<br />Attributes<br /><ul><li> contenteditable attribute indicates that the element is an editable area.
contextmenu attribute can be used to point to a context menu provided by the author.
draggable attribute can be used together with the new drag & drop API.
hidden attribute indicates that an element is not yet, or is no longer, relevant.
spellcheck attribute allows for hinting whether content can be checked for spelling or not.</li></li></ul><li>29<br />Local Storage<br /><ul><li>A mechanism for websites to store data locally and retrieve them.