Transcript
Page 1: Html 5 tutorial - By Bally Chohan

Introduction To HTML 5

By –BALLY CHOHAN

Page 2: Html 5 tutorial - 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

Page 3: Html 5 tutorial - By 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

Page 4: Html 5 tutorial - By Bally Chohan

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>

-Bally Chohan

Page 5: Html 5 tutorial - By Bally Chohan

5 -Bally Chohan

Page 6: Html 5 tutorial - By Bally Chohan

6

Document Object ModelCross platform, language independent modelRepresents and interacts with objects in HTML

documents

-Bally Chohan

Page 7: Html 5 tutorial - By Bally Chohan

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.

Page 8: Html 5 tutorial - By Bally Chohan

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

Page 9: Html 5 tutorial - By Bally Chohan

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.

Page 10: Html 5 tutorial - By Bally Chohan

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

Page 11: Html 5 tutorial - By Bally Chohan

11

HTML5 FEATURESNew elements Structural elements

Multi-media elements Inline elementsNew input typesNew attributesLocal StorageNew APIs

-Bally Chohan

Page 12: Html 5 tutorial - By Bally Chohan

12

Structural elements

Structuring in HTML4

-Bally Chohan

Page 13: Html 5 tutorial - By Bally Chohan

13

Structuring in HTML5;

Page 14: Html 5 tutorial - By Bally Chohan

14

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

-Bally Chohan

Page 15: Html 5 tutorial - By Bally Chohan

15

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

-Bally Chohan

Page 16: Html 5 tutorial - By Bally Chohan

16

Thank you..

Queries !! - By Bally Chohan