HTML : An Outline Stands for Hyper Text Markup Language. Not a programming language, it is a markup language. A markup language is a set of markup tags. Markup tags are used to describe web pages. 3
TAGS Keywords surrounded by angle brackets < > like <html> They come in pairs like <b> and </b> Common tags are :- <html> <head> <div> <body> <a> <p> <h1> 4
Document Object Model Cross platform, language independent model Represents and interacts with objects in HTML documents 6
Why HTML5 ? HTML4 hasn’t been updated for about 10 years. XHTML was introduced but it made things stricter and not easier. Embedding audio/video was dependent on flash etc. New websites have to be interactive. 7
HTML4 - drawbacks It does not adequately support web applications. Complex structuring of web pages. Complex DTDs Need plug-ins to embed audio and video. Does not support drag and drop features, editing, drawing, error handling etc 8
HTML5 (referred to as Web Applications 1.0) is an improvement of HTML4.0 and XHTML1.0
Work started in 2003 by W3C and WHATWG
Released a draft version in 2008.
A change from document markup language to a web application language.
An attempt to enhance the functionality and flexibility of the web.
New features like form control, APIs, multimedia, structure semantics , local storage etc.
Consistent and defined error handling
Internal data storage.
11 HTML5 FEATURES
Structural elements Multi-media elements Inline elements
New input types
Structural elements 12 Structuring in HTML4
13 Structuring in HTML5;
16 Structural Tags
Multimedia Elements 17
a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly. 2D drawing area controlled by JS. set of functions in ‘canvas API’ for drawing shapes, defining paths, transformations etc Scripting enabled environment.
<video> Embed video in web pages Does not require 3rd party plug-ins like Apple QuickTime or Adobe Flash Player. No detection script required Attributes like src, autoplay, loop etc JS to fall back to plug-ins if browser does not support <video> 19
<audio> sound or audio stream attributes like src, auto buffer, loop, controls etc audio = new audio( [ url ] ) creates an audio element ,assigns arc=url 22
Inline Elements 23
<mark> -denoted a bit of text that is marked in someway
<time> - denoted time or date in a block
<meter> - to indicate the measure or count. Multiple attributes like min, max, low, high etc possible.
<progress> - progress bar
24 New Form Input Types
25 auto focus and omission of attributes <form action="" method="get"> <p><label>Search: <input name=search type="text“ id="search"></label></p> <script> document.getElementById('search').focus() </script> <!-- the rest of the form --></form> can be replaced by <form> <p><label>Search: <input name=search autofocus></label> </p> <!-- the rest of the form -->
Form Validation 26
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.
29 Local Storage
A mechanism for websites to store data locally and retrieve them.
Like cookies, but for larger data.
Data stays in the local system and can access using JS after page load.
Provides offline capabilities (Google Gears) in the browser.
2D drawing API that can be using with the canvas element.
API for playing of video and audio which can be used with the new video and audio elements.
An API that enables offline Web applications.
Editing API in combination with a new global contenteditableattribute.
33 HTML5 vs. HTML4
Support of multimedia
Language for web applications rather than document markup language
Localized data speeding up caching .searching etc
<canvas> tag for 2D graphics
APIs for in-browser application allowing editing, drag and drop etc
34 Future Scope
Can get rid of proprietary add-ons (like Flash/Silverlight/JAVAFX)
Web apps faster with better user experience
Difference between desktop and web apps blurred.
Standard for web applications
A preview of HTML5, Lachlan Hunt, (2007) ‘A LIST APART’.
HTML5 Introduction, Richard Keyes (2009) ‘An introduction to HTML5 and its features; The Code Project’
Difference b/w HTML5 and HTML4, Anne van Keesteren (2008); Opera Software OSA