SlideShare ist ein Scribd-Unternehmen logo
1 von 16
By –
BALLY CHOHAN
Contents
 Introduction to HTML.
 Why HTML5?
 HTML 5 an overview
 HTML5 features
 Difference between HTML4 and HTML5
 Future scope
 Conclusion
 -Bally Chohan
2
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
-Bally Chohan
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
-Bally Chohan
5-Bally Chohan
Document Object Model
 Cross platform, language independent model
 Represents and interacts with objects in HTML
documents
6
-Bally Chohan
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
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. 9
…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.
10
-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
Structural elements
12
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
 <canvas> 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
Queries !!
16
- By Bally Chohan

Weitere ähnliche Inhalte

Was ist angesagt?

Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first course
Vlad Posea
 
Javascript variables and datatypes
Javascript variables and datatypesJavascript variables and datatypes
Javascript variables and datatypes
Varun C M
 

Was ist angesagt? (20)

Basics of JavaScript
Basics of JavaScriptBasics of JavaScript
Basics of JavaScript
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Css3
Css3Css3
Css3
 
Php Presentation
Php PresentationPhp Presentation
Php Presentation
 
PHP Presentation
PHP PresentationPHP Presentation
PHP Presentation
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first course
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
Introduction to JavaScript Basics.
Introduction to JavaScript Basics.Introduction to JavaScript Basics.
Introduction to JavaScript Basics.
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
 
Html 5
Html 5Html 5
Html 5
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)
 
Javascript 101
Javascript 101Javascript 101
Javascript 101
 
Javascript variables and datatypes
Javascript variables and datatypesJavascript variables and datatypes
Javascript variables and datatypes
 
Window object
Window objectWindow object
Window object
 
Php operators
Php operatorsPhp operators
Php operators
 
Html events with javascript
Html events with javascriptHtml events with javascript
Html events with javascript
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 Canvas
 

Ähnlich wie Html 5 tutorial - By Bally Chohan

UMK Lecture 5 - HTML5 latest v7
UMK Lecture 5 - HTML5 latest v7UMK Lecture 5 - HTML5 latest v7
UMK Lecture 5 - HTML5 latest v7
Hisham Mat Hussin
 
IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...
ijceronline
 
Cgs html 5-service
Cgs html 5-serviceCgs html 5-service
Cgs html 5-service
Constient
 

Ähnlich wie Html 5 tutorial - By Bally Chohan (20)

HTML5 New Tags
HTML5 New TagsHTML5 New Tags
HTML5 New Tags
 
UMK Lecture 5 - HTML5 latest v7
UMK Lecture 5 - HTML5 latest v7UMK Lecture 5 - HTML5 latest v7
UMK Lecture 5 - HTML5 latest v7
 
IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...
 
INTRUDUCTION TO HTML 5
INTRUDUCTION TO HTML 5INTRUDUCTION TO HTML 5
INTRUDUCTION TO HTML 5
 
Html5
Html5Html5
Html5
 
What is future of web with reference to html5 will it devalue current present...
What is future of web with reference to html5 will it devalue current present...What is future of web with reference to html5 will it devalue current present...
What is future of web with reference to html5 will it devalue current present...
 
Html.pptx
Html.pptxHtml.pptx
Html.pptx
 
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
 
What are new added in HTML5?
What are new added in HTML5?What are new added in HTML5?
What are new added in HTML5?
 
Developing with HTML5
Developing with HTML5Developing with HTML5
Developing with HTML5
 
HTML ppt
HTML pptHTML ppt
HTML ppt
 
Report html5
Report html5Report html5
Report html5
 
Cgs html 5-service
Cgs html 5-serviceCgs html 5-service
Cgs html 5-service
 
Html 5
Html 5Html 5
Html 5
 
Html5
Html5Html5
Html5
 
Html 5 Features And Benefits
Html 5 Features And Benefits  Html 5 Features And Benefits
Html 5 Features And Benefits
 
Top 10 major benefits of html 5
Top 10 major benefits of html 5Top 10 major benefits of html 5
Top 10 major benefits of html 5
 
Chapter 2 introduction to html5
Chapter 2 introduction to html5Chapter 2 introduction to html5
Chapter 2 introduction to html5
 
HTML5 - The Future in a Flash
HTML5 - The Future in a FlashHTML5 - The Future in a Flash
HTML5 - The Future in a Flash
 
Michael(tm) Smith: HTML5 at Web Directions South 2008
Michael(tm) Smith: HTML5 at Web Directions South 2008Michael(tm) Smith: HTML5 at Web Directions South 2008
Michael(tm) Smith: HTML5 at Web Directions South 2008
 

Mehr von ballychohanuk (6)

Bally chohan yoga | Best Yoga Classes in UK
Bally chohan yoga | Best Yoga Classes in UKBally chohan yoga | Best Yoga Classes in UK
Bally chohan yoga | Best Yoga Classes in UK
 
Bally Chohan Job Portal UK
Bally Chohan Job Portal UKBally Chohan Job Portal UK
Bally Chohan Job Portal UK
 
Ballychohan yoga 1
Ballychohan yoga 1Ballychohan yoga 1
Ballychohan yoga 1
 
Wordpress tutorial- By Bally Chohan
Wordpress tutorial- By Bally ChohanWordpress tutorial- By Bally Chohan
Wordpress tutorial- By Bally Chohan
 
jQuery Tutorial - By Bally Chohan
jQuery Tutorial - By Bally ChohanjQuery Tutorial - By Bally Chohan
jQuery Tutorial - By Bally Chohan
 
php tutorial - By Bally Chohan
php tutorial - By Bally Chohanphp tutorial - By Bally Chohan
php tutorial - By Bally Chohan
 

Kürzlich hochgeladen

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Kürzlich hochgeladen (20)

Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 

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 2
  • 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. 3 -Bally Chohan
  • 4. 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 -Bally Chohan
  • 6. Document Object Model  Cross platform, language independent model  Represents and interacts with objects in HTML documents 6 -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. 7
  • 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 8
  • 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. 9
  • 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. 10 -Bally Chohan
  • 11. 11 HTML5 FEATURES  New elements Structural elements Multi-media elements Inline elements  New input types  New attributes  Local Storage  New APIs -Bally Chohan
  • 14. 14 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 -Bally Chohan
  • 15. 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. Queries !! 16 - By Bally Chohan

Hinweis der Redaktion

  1. 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.
  2. Common tags you’ll find in an html source code are And &lt;p&gt;,&lt;h1&gt; etc&lt;head&gt; includes the external files which u may include in ur html doc such as a css or a javascript file&lt;div&gt; divides the page into sections upon ur need&lt;body&gt; defines the main body of ur division, it consists of several sub tags such as &lt;a&gt; &lt;p&gt; etc etcI think that’s all the basics you need to know to understand further.
  3. The most reason version html4, has been on for over a decade now. And, it hasn&apos;t really seen a major update. Sure there&apos;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.