SlideShare ist ein Scribd-Unternehmen logo
1 von 21
Downloaden Sie, um offline zu lesen
HTML5




           Tushar A Deshmukh
Abstract
The web is constantly evolving. New and innovative websites are being
created every day, pushing the boundaries of HTML in every direction.
HTML 4 has been around for nearly a decade now, and publishers
seeking new techniques to provide enhanced functionality are being held
back by the constraints of the language and browsers.
To give authors more flexibility and interoperability, and enable more
interactive and exciting websites and applications, HTML 5 introduces
and enhances a wide range of features including form controls, APIs,
multimedia, structure, and semantics.


                                               Continued …
Abstract
Continued …

Work on HTML 5, which commenced in 2004, is currently being
carried out in a joint effort between the W3C HTML WG and the
WHATWG. Many key players are participating in the W3C effort
including representatives from the four major browser vendors: Apple,
Mozilla, Opera, and Microsoft; and a range of other organisations and
individuals with many diverse interests and expertise.
Note that the specification is still a work in progress and quite a long
way from completion. As such, it is possible that any feature discussed
in this article may change in the future. This article is intended to
provide a brief introduction to some of the major features as they are in
the current draft.
STRUCTURE
HTML 5 introduces a whole set of new elements that make it much
easier to structure pages. Most HTML 4 pages include a variety of
common structures, such as headers, footers and columns and today, it
is fairly common to mark them up using div elements, giving each a
descriptive id or class.
                                         Diagram illustrates a typical
                                         two-column layout marked
                                         up using divs with id and
                                         class attributes. It contains a
                                         header, footer, and
                                         horizontal navigation bar
                                         below the header. The main
                                         content contains an article
                                         and sidebar on the right.
STRUCTURE
The use of div elements is largely because current versions of HTML
4 lack the necessary semantics for describing these parts more
specifically. HTML 5 addresses this issue by introducing new
elements for representing each of these different sections.

                                         The div elements can be
                                         replaced with the new
                                         elements: header, nav,
                                         section, article, aside, and
                                         footer.
                                         The markup for that
                                         document could look like the
                                         following:
Topics:

  • Tags
  • GeoLocation
  • Graphics - Canvas & SVG
  • Video/Audio
  • Storage
Tags:

HTML5 contains a rich set of proposed tags.
The goal of these new tags is to bring richer semantic meaning to content.
Tags - <header>:

 "a group of introductory or navigational aids. A header element
 typically contains the section’s heading (an h1–h6 element or
 an hgroup element), but can also contain other content, such as
 a table of contents, a search form, or any relevant logos."




  <header>
           <h1>Main Header</h1>
           <p class="tagline">Tagline</p>
  </header>
Tags - <nav>:
"Not all groups of links on a page need to be in a nav element
only sections that consist of major navigation blocks are
appropriate for the nav element."




       <nav role="navigation">
             <ul>
                <li>
                   <a href="#" title="link">link</a>
                </li>
             </ul>
          </nav>
Tags - <article>:
 "a composition that forms an independent part of a document,
 page, application, or site. This could be a forum post, a
 magazine or newspaper article, a Web log entry ..."



            <article>
              <h2>Item</h2>
              <p>Some content here.</p>
            </article>
Tags - <section>:

"section is a blob of content that you could store as an individual
record in a database."


           <section id="foo">
             <h2>Foo</h2>
             <p>
                Content here
             </p>
           </section>
Tags - <article> vs. <section>:

"Authors are encouraged to use the article element instead of the
section element when it would make sense to syndicate the
contents of the element."

"Section is used when there is naturally a heading at the start of
the section."
Tags - <footer>:

"The footer element represents a footer for its nearest ancestor
sectioning content or sectioning root element. A footer typically
contains information about its section such as who wrote it, links
to related documents, copyright data, and the like."
  <footer role="contentinfo">
             <p> Footer </p>
             <nav>
               <h5>Quick Links</h5>
               <ul role="navigation">
                  <li> <a href="#">link</a></li>
               </ul>
             </nav>
          </footer>
Tags - Getting Started:

  • Small - Minor integration
    o Only modify the doctype

  • Medium - Thinking ahead
    o Modify the doctype, and include divs and
      classes that mimic HTML5 tags
  • Large - Full integration
     o Actually start using HTML5 tags
HTML5 - Doctype:

 <!DOCTYPE html>




 When browsers see this doctype, content is automatically
 switched into standards mode (as opposed to quirks
 mode). With this doctype, you can continue to write your
 markup as either HTML4 or XHTML1.0 Strict.

 What is quirks mode?
GeoLocation:

 • navigator.geolocation.getCurrentPosition() -
   obtain the user's current location
 • navigator.geolocation.watchPosition() -
   watches for changes in a user's location
Graphics: Canvas & SVG:


Canvas - is a new HTML element which can be used to draw
graphics using scripting (usually JavaScript).
Graphics: Canvas & SVG:

"SVG - Scalable Vector Graphics (SVG) is a standard from the
W3C which is built on top of XML. The SVG standard describes
ways that graphics can be drawn for use on the web."
(http://www.svgbasics.com/index.html)
Audio / Video:

• Offers the ability to easily embed media into HTML
  documents
• Media playback can be controlled via JS and media
  events
• A flash fallback could be provided for browsers that
  don't support HTML5 media
• Many issues surrounding codecs that I am
  intentionally not getting into.
   o http://diveintohtml5.org/video.html
Storage:

 • Session and Local Storage—provides a js
   interface to key-value storage.
 • Web Databases—RDBMS support for storing
   structured data inside the browser.
 • Application Cache—Local Cache
Web Forms:


 • strongly-typed input fields
 • new attributes for defining constraints
 • new DOM interfaces

Weitere ähnliche Inhalte

Was ist angesagt?

Castro Chapter 3
Castro Chapter 3Castro Chapter 3
Castro Chapter 3
Jeff Byrnes
 

Was ist angesagt? (20)

Grade 10 COMPUTER
Grade 10 COMPUTERGrade 10 COMPUTER
Grade 10 COMPUTER
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer Notes
 
Castro Chapter 3
Castro Chapter 3Castro Chapter 3
Castro Chapter 3
 
Html
HtmlHtml
Html
 
HTML5- Create divisions in a web page
HTML5- Create divisions in a web pageHTML5- Create divisions in a web page
HTML5- Create divisions in a web page
 
Html introduction
Html introductionHtml introduction
Html introduction
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
02 From HTML tags to XHTML
02 From HTML tags to XHTML02 From HTML tags to XHTML
02 From HTML tags to XHTML
 
Lecture1and2
Lecture1and2Lecture1and2
Lecture1and2
 
HTML5 - My First Webpage
HTML5 - My First Webpage HTML5 - My First Webpage
HTML5 - My First Webpage
 
Drupal 7 Search Engine Optimisation
Drupal 7 Search Engine OptimisationDrupal 7 Search Engine Optimisation
Drupal 7 Search Engine Optimisation
 
Dhtml ppt (2)
Dhtml ppt (2)Dhtml ppt (2)
Dhtml ppt (2)
 
Unit 2 dhtml
Unit 2 dhtmlUnit 2 dhtml
Unit 2 dhtml
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Ppt ch01
Ppt ch01Ppt ch01
Ppt ch01
 
Web Page Designing Using HTML
Web Page Designing Using HTMLWeb Page Designing Using HTML
Web Page Designing Using HTML
 
What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)
 
DHTML
DHTMLDHTML
DHTML
 
Basics of HTML
Basics of HTMLBasics of HTML
Basics of HTML
 
INFT132 093 04 HTML and XHTML
INFT132 093 04 HTML and XHTMLINFT132 093 04 HTML and XHTML
INFT132 093 04 HTML and XHTML
 

Ähnlich wie Html5 p resentation by techmodi

Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
Ashok Suragala
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
Jerry Wijaya
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
PL dream
 

Ähnlich wie Html5 p resentation by techmodi (20)

Html5 semantics
Html5 semanticsHtml5 semantics
Html5 semantics
 
Html5 quick learning guide
Html5 quick learning guideHtml5 quick learning guide
Html5 quick learning guide
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
 
Html5 semantics
Html5 semanticsHtml5 semantics
Html5 semantics
 
Report html5
Report html5Report html5
Report html5
 
HTML 5 Fundamental
HTML 5 FundamentalHTML 5 Fundamental
HTML 5 Fundamental
 
Week 3 - Interactive News Editing and Producing
Week 3 - Interactive News Editing and ProducingWeek 3 - Interactive News Editing and Producing
Week 3 - Interactive News Editing and Producing
 
WT Module-1.pdf
WT Module-1.pdfWT Module-1.pdf
WT Module-1.pdf
 
Html5 tutorial
Html5 tutorialHtml5 tutorial
Html5 tutorial
 
Html5 tutorial
Html5 tutorialHtml5 tutorial
Html5 tutorial
 
Html5 tutorial
Html5 tutorialHtml5 tutorial
Html5 tutorial
 
Html5 tutorial
Html5 tutorialHtml5 tutorial
Html5 tutorial
 
Html5 tutorial
Html5 tutorialHtml5 tutorial
Html5 tutorial
 
#3 - Sectioning content and outline view
#3 - Sectioning content and outline view#3 - Sectioning content and outline view
#3 - Sectioning content and outline view
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQueryProgressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
 
Html5 tutorial
Html5 tutorialHtml5 tutorial
Html5 tutorial
 

Mehr von techmodi_India

Mehr von techmodi_India (15)

Home auction
Home auctionHome auction
Home auction
 
Hr and payroll
Hr and payrollHr and payroll
Hr and payroll
 
Online appointment booking_presentation _
Online appointment booking_presentation _Online appointment booking_presentation _
Online appointment booking_presentation _
 
Crowdfunding(2)
Crowdfunding(2)Crowdfunding(2)
Crowdfunding(2)
 
Mlm affiliate g roupon
Mlm affiliate g rouponMlm affiliate g roupon
Mlm affiliate g roupon
 
Ppt on business writing
Ppt on business writingPpt on business writing
Ppt on business writing
 
Document management
Document managementDocument management
Document management
 
3 tier structure asp dot net
3 tier structure asp dot net3 tier structure asp dot net
3 tier structure asp dot net
 
Communication skills
Communication skillsCommunication skills
Communication skills
 
Communication skills 737
Communication skills 737Communication skills 737
Communication skills 737
 
Auction presentation
Auction presentationAuction presentation
Auction presentation
 
Groupon presentation v 2.10
Groupon presentation v 2.10Groupon presentation v 2.10
Groupon presentation v 2.10
 
Hospital maangement system
Hospital maangement systemHospital maangement system
Hospital maangement system
 
3 tier structure asp dot net
3 tier structure asp dot net3 tier structure asp dot net
3 tier structure asp dot net
 
Facebook ads
Facebook adsFacebook ads
Facebook ads
 

Kürzlich hochgeladen

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Kürzlich hochgeladen (20)

Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
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
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
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...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
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
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 

Html5 p resentation by techmodi

  • 1. HTML5  Tushar A Deshmukh
  • 2. Abstract The web is constantly evolving. New and innovative websites are being created every day, pushing the boundaries of HTML in every direction. HTML 4 has been around for nearly a decade now, and publishers seeking new techniques to provide enhanced functionality are being held back by the constraints of the language and browsers. To give authors more flexibility and interoperability, and enable more interactive and exciting websites and applications, HTML 5 introduces and enhances a wide range of features including form controls, APIs, multimedia, structure, and semantics. Continued …
  • 3. Abstract Continued … Work on HTML 5, which commenced in 2004, is currently being carried out in a joint effort between the W3C HTML WG and the WHATWG. Many key players are participating in the W3C effort including representatives from the four major browser vendors: Apple, Mozilla, Opera, and Microsoft; and a range of other organisations and individuals with many diverse interests and expertise. Note that the specification is still a work in progress and quite a long way from completion. As such, it is possible that any feature discussed in this article may change in the future. This article is intended to provide a brief introduction to some of the major features as they are in the current draft.
  • 4. STRUCTURE HTML 5 introduces a whole set of new elements that make it much easier to structure pages. Most HTML 4 pages include a variety of common structures, such as headers, footers and columns and today, it is fairly common to mark them up using div elements, giving each a descriptive id or class. Diagram illustrates a typical two-column layout marked up using divs with id and class attributes. It contains a header, footer, and horizontal navigation bar below the header. The main content contains an article and sidebar on the right.
  • 5. STRUCTURE The use of div elements is largely because current versions of HTML 4 lack the necessary semantics for describing these parts more specifically. HTML 5 addresses this issue by introducing new elements for representing each of these different sections. The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer. The markup for that document could look like the following:
  • 6. Topics: • Tags • GeoLocation • Graphics - Canvas & SVG • Video/Audio • Storage
  • 7. Tags: HTML5 contains a rich set of proposed tags. The goal of these new tags is to bring richer semantic meaning to content.
  • 8. Tags - <header>: "a group of introductory or navigational aids. A header element typically contains the section’s heading (an h1–h6 element or an hgroup element), but can also contain other content, such as a table of contents, a search form, or any relevant logos." <header> <h1>Main Header</h1> <p class="tagline">Tagline</p> </header>
  • 9. Tags - <nav>: "Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element." <nav role="navigation"> <ul> <li> <a href="#" title="link">link</a> </li> </ul> </nav>
  • 10. Tags - <article>: "a composition that forms an independent part of a document, page, application, or site. This could be a forum post, a magazine or newspaper article, a Web log entry ..." <article> <h2>Item</h2> <p>Some content here.</p> </article>
  • 11. Tags - <section>: "section is a blob of content that you could store as an individual record in a database." <section id="foo"> <h2>Foo</h2> <p> Content here </p> </section>
  • 12. Tags - <article> vs. <section>: "Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element." "Section is used when there is naturally a heading at the start of the section."
  • 13. Tags - <footer>: "The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like." <footer role="contentinfo"> <p> Footer </p> <nav> <h5>Quick Links</h5> <ul role="navigation"> <li> <a href="#">link</a></li> </ul> </nav> </footer>
  • 14. Tags - Getting Started: • Small - Minor integration o Only modify the doctype • Medium - Thinking ahead o Modify the doctype, and include divs and classes that mimic HTML5 tags • Large - Full integration o Actually start using HTML5 tags
  • 15. HTML5 - Doctype: <!DOCTYPE html> When browsers see this doctype, content is automatically switched into standards mode (as opposed to quirks mode). With this doctype, you can continue to write your markup as either HTML4 or XHTML1.0 Strict. What is quirks mode?
  • 16. GeoLocation: • navigator.geolocation.getCurrentPosition() - obtain the user's current location • navigator.geolocation.watchPosition() - watches for changes in a user's location
  • 17. Graphics: Canvas & SVG: Canvas - is a new HTML element which can be used to draw graphics using scripting (usually JavaScript).
  • 18. Graphics: Canvas & SVG: "SVG - Scalable Vector Graphics (SVG) is a standard from the W3C which is built on top of XML. The SVG standard describes ways that graphics can be drawn for use on the web." (http://www.svgbasics.com/index.html)
  • 19. Audio / Video: • Offers the ability to easily embed media into HTML documents • Media playback can be controlled via JS and media events • A flash fallback could be provided for browsers that don't support HTML5 media • Many issues surrounding codecs that I am intentionally not getting into. o http://diveintohtml5.org/video.html
  • 20. Storage: • Session and Local Storage—provides a js interface to key-value storage. • Web Databases—RDBMS support for storing structured data inside the browser. • Application Cache—Local Cache
  • 21. Web Forms: • strongly-typed input fields • new attributes for defining constraints • new DOM interfaces