html 5
DESCRIPTION
TRANSCRIPT
HTML 5
Karthik MadhavanS7, CS (2006-2010)
2
Contents Introduction to HTML.
Why HTML5?
HTML 5 an overview
HTML5 features
Difference between HTML4 and HTML5
Future scope
Conclusion
3
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.
4
TAGSKeywords surrounded by angle brackets < > like <html>They come in pairs like <b> and </b>Common tags are :-
<html><head><div><body>
• <a>• <p>• <h1>
5
6
Document Object ModelCross platform, language independent modelRepresents and interacts with objects in HTML
documents
7
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.
8
HTML4 - drawbacksIt 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
9
An Overview• 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.
10
…contd.• Provides interoperability.
• Backward compatible
• New features like form control, APIs, multimedia, structure semantics , local storage etc.
• Consistent and defined error handling
• Internal data storage.
11
HTML5 FEATURESNew elements Structural elements
Multi-media elements Inline elementsNew input typesNew attributesLocal StorageNew APIs
12
Structural elements
Structuring in HTML4
13
Structuring in HTML5;
14
15
16
<section>
<article>
<aside>
<header>
<footer>
<nav>
<dialog>
Structural Tags
17
Multimedia Elements
<canvas> 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.
18
19
<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>
20
21
22
<audio>
sound or audio stream
attributes like src, auto buffer, loop, controls etc
audio = new audio( [ url ] ) creates an audio element ,assigns arc=url
23
Inline Elements
<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
datetime date month week time number range email url
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 -->
26
Form Validation
27
28
Attributes 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 StorageA 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.
30
APIs
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 contenteditable attribute.
31
32
33
HTML5 vs. HTML4
Support of multimediaLanguage for web applications rather than document
markup languageLocalized data speeding up caching .searching etc<canvas> tag for 2D graphicsAPIs for in-browser application allowing editing, drag and
drop etc
34
Future ScopeCan 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
35
36
ReferencesA 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 OSAHTML5 Reference, Lachlan Hunt (2009), W3CHTML5 and After, Paul Krill (2009), InfoWorld
37
Thank you..
Queries !!