HTML 5 tutorial - By Bally Chohan

1
Introduction To HTML 5

• By
• BALLY CHOHAN

2
Contents

• Introduction to HTML.
• Why HTML5?
• HTML 5 an overview
• HTML5 features
• Difference between HTML4 and HTML5
• Future scope
• Conclusion
• 
  
  -Bally Chohan

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.

-Bally Chohan
4
TAGS

• Keywords surrounded by angle brackets lt gt like
  lthtmlgt
• They come in pairs like ltbgt and lt/bgt
• Common tags are -
• lthtmlgt
• ltheadgt
• ltdivgt
• ltbodygt
• ltagt
• ltpgt
• lth1gt

-Bally Chohan
5
-Bally Chohan
6
Document Object Model

• Cross platform, language independent model
• Represents and interacts with objects in HTML
  documents

-Bally Chohan
7
Why HTML5 ?

• HTML4 hasnt 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 - 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

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.

-Bally Chohan
11
HTML5 FEATURES

• New elements
• ?Structural elements
• ?Multi-media elements
• ?Inline elements
• New input types
• New attributes
• Local Storage
• New APIs

-Bally Chohan
12
Structural elements

• Structuring in HTML4

-Bally Chohan
13
Structuring in HTML5
14
HTML5 vs. HTML4

• Support of multimedia
• Language for web applications rather than
  document markup language
• Localized data speeding up caching .searching etc
• ltcanvasgt tag for 2D graphics
• APIs for in-browser application allowing editing,
  drag and drop etc

-Bally Chohan
15
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

-Bally Chohan
16
Thank you..

• Queries !!

- By Bally Chohan