SlideShare une entreprise Scribd logo
1  sur  39
1
1
2
3
4
5
6
7
“How can I start using HTML5 if older browsers don’t support it?” But the question
itself is misleading. HTML5 is not one big thing; it is a collection of individual
features.




                                                                                     8
you can’t detect “HTML5 support,” because that doesn’t make any sense. But you can
detect support for individual features, like canvas, video, or geolocation.




                                                                                     9
You may think of HTML as tags and angle brackets. That’s an important part of it, but
it’s not the whole story. The HTML5 specification also defines how those angle
brackets interact with JavaScript, through the Document Object Model (DOM).


HTML5 doesn’t just define a <video> tag; there is also a corresponding DOM API for
video objects in the DOM. You can use this API to detect support for different video
formats, play a video, pause, mute audio, track how much of the video has been
downloaded, and everything else you need to build a rich user experience around the
<video> tag itself.




                                                                                        10
Unlike previous versions of HTML and XHTML, which are defined in terms
of their syntax, HTML 5 is being defined in terms of the Document Object
Model (DOM)—the tree representation used internally by browsers to
represent the document.


Every XML and HTML document in an HTML UA is represented by a
Document object.


The advantage of defining HTML 5 in terms of the DOM is that the language
itself can be defined independently of the syntax. There are primarily two
syntaxes that can be used to represent HTML documents: the HTML
serialisation (known as HTML 5) and the XML serialisation (known as
XHTML 5).




                                                                             11
12
13
14
15
16
17
Map of HTML 5




                18
19
20
<section> A section, or section of a chapter of text, or a book.


<header> The page header. This is not the same as the <head> element.


<footer> The footer of the page. Typically where all the legal crapola goes.


<nav> Navigation links to other pages. You could put your websites navigation
in this for example.


<article> A blog article could be encapsulated by this for example.


<aside>The aside tag can be used to provide extra information for a block of
text. Much like sidebar material in books etc


<figure>The <figure> element can be used to annotate your main text with
diagrams, which aren’t necessarily imperative to the text.




                                                                                21
22
23
24
25
26
27
28
29
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)




                                                                    30
Modernizr is an open source, MIT-licensed JavaScript library that detects
support for many HTML5 and CSS3 features. At the time of writing, the latest
version is 1.1. You should always use the latest version. To do so, include the
following <script> element at the top of your page:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dive into HTML5</title>
<script src="modernizr.min.js"></script>
</head> <body> ...
</body> </html>




                                                                                  31
32
33
34
35
36
37
38
39

Contenu connexe

Tendances

How to keep working technically interesting
How to keep working technically interestingHow to keep working technically interesting
How to keep working technically interestingKenichi Murahashi
 
Building your first d8 theme
Building your first d8 themeBuilding your first d8 theme
Building your first d8 themeMario Hernandez
 
Web Components
Web ComponentsWeb Components
Web ComponentsFITC
 
Very basic intro to HTML
Very basic intro to HTMLVery basic intro to HTML
Very basic intro to HTMLkmcintyre3
 
Webcomponents TLV October 2014
Webcomponents TLV October 2014Webcomponents TLV October 2014
Webcomponents TLV October 2014Dmitry Bakaleinik
 
Ndim1 2009 Web Design
Ndim1 2009 Web DesignNdim1 2009 Web Design
Ndim1 2009 Web Designguest0121dcd7
 
Don’t Flash Your Audience: How to Build Dynamic yet Accessible Sites(11nten508)
Don’t Flash Your Audience: How to Build Dynamic yet Accessible Sites(11nten508)Don’t Flash Your Audience: How to Build Dynamic yet Accessible Sites(11nten508)
Don’t Flash Your Audience: How to Build Dynamic yet Accessible Sites(11nten508)Miminten
 
Forms as Structured Content
Forms as Structured Content Forms as Structured Content
Forms as Structured Content dotCMS
 
Working with External CSS
Working with External CSSWorking with External CSS
Working with External CSSdavereece
 
HTML5 ★ Boilerplate
HTML5 ★ BoilerplateHTML5 ★ Boilerplate
HTML5 ★ BoilerplateMohammed Arif
 

Tendances (20)

Lecture2 CSS1
Lecture2  CSS1Lecture2  CSS1
Lecture2 CSS1
 
How to keep working technically interesting
How to keep working technically interestingHow to keep working technically interesting
How to keep working technically interesting
 
Building your first d8 theme
Building your first d8 themeBuilding your first d8 theme
Building your first d8 theme
 
Web Components
Web ComponentsWeb Components
Web Components
 
NEPA BlogCon 2013 - HTML5/CSS3 for Bloggers
NEPA BlogCon 2013 -  HTML5/CSS3 for BloggersNEPA BlogCon 2013 -  HTML5/CSS3 for Bloggers
NEPA BlogCon 2013 - HTML5/CSS3 for Bloggers
 
Gwt Presentation 1
Gwt Presentation 1Gwt Presentation 1
Gwt Presentation 1
 
Very basic intro to HTML
Very basic intro to HTMLVery basic intro to HTML
Very basic intro to HTML
 
1. html introduction
1. html introduction1. html introduction
1. html introduction
 
HTML to FTP
HTML to FTPHTML to FTP
HTML to FTP
 
Webcomponents TLV October 2014
Webcomponents TLV October 2014Webcomponents TLV October 2014
Webcomponents TLV October 2014
 
HTML 101
HTML 101HTML 101
HTML 101
 
Basic html
Basic htmlBasic html
Basic html
 
HTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 TemplateHTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 Template
 
Ndim1 2009 Web Design
Ndim1 2009 Web DesignNdim1 2009 Web Design
Ndim1 2009 Web Design
 
Don’t Flash Your Audience: How to Build Dynamic yet Accessible Sites(11nten508)
Don’t Flash Your Audience: How to Build Dynamic yet Accessible Sites(11nten508)Don’t Flash Your Audience: How to Build Dynamic yet Accessible Sites(11nten508)
Don’t Flash Your Audience: How to Build Dynamic yet Accessible Sites(11nten508)
 
HTML 5
HTML 5HTML 5
HTML 5
 
Introduccion a HTML5
Introduccion a HTML5Introduccion a HTML5
Introduccion a HTML5
 
Forms as Structured Content
Forms as Structured Content Forms as Structured Content
Forms as Structured Content
 
Working with External CSS
Working with External CSSWorking with External CSS
Working with External CSS
 
HTML5 ★ Boilerplate
HTML5 ★ BoilerplateHTML5 ★ Boilerplate
HTML5 ★ Boilerplate
 

Similaire à HTML 5, CSS3 and ASP.NET Best Practices by Example

Is it time to start using HTML 5
Is it time to start using HTML 5Is it time to start using HTML 5
Is it time to start using HTML 5Ravi Raj
 
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
 
Sitepoint.com a basic-html5_template
Sitepoint.com a basic-html5_templateSitepoint.com a basic-html5_template
Sitepoint.com a basic-html5_templateDaniel Downs
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Paxcel Technologies
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete ReferenceEPAM Systems
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookScottperrone
 
WT Module-1.pdf
WT Module-1.pdfWT Module-1.pdf
WT Module-1.pdfRamyaH11
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5Manav Prasad
 
Introduction to html55
Introduction to html55Introduction to html55
Introduction to html55subrat55
 

Similaire à HTML 5, CSS3 and ASP.NET Best Practices by Example (20)

Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Is it time to start using HTML 5
Is it time to start using HTML 5Is it time to start using HTML 5
Is it time to start using HTML 5
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Html5 basics
Html5 basicsHtml5 basics
Html5 basics
 
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...
 
Sitepoint.com a basic-html5_template
Sitepoint.com a basic-html5_templateSitepoint.com a basic-html5_template
Sitepoint.com a basic-html5_template
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete Reference
 
Grade 10 COMPUTER
Grade 10 COMPUTERGrade 10 COMPUTER
Grade 10 COMPUTER
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - Ebook
 
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
 
WT Module-1.pdf
WT Module-1.pdfWT Module-1.pdf
WT Module-1.pdf
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
 
Introduction to html55
Introduction to html55Introduction to html55
Introduction to html55
 

Dernier

Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfPrecisely
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 

Dernier (20)

Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 

HTML 5, CSS3 and ASP.NET Best Practices by Example

  • 1. 1 1
  • 2. 2
  • 3. 3
  • 4. 4
  • 5. 5
  • 6. 6
  • 7. 7
  • 8. “How can I start using HTML5 if older browsers don’t support it?” But the question itself is misleading. HTML5 is not one big thing; it is a collection of individual features. 8
  • 9. you can’t detect “HTML5 support,” because that doesn’t make any sense. But you can detect support for individual features, like canvas, video, or geolocation. 9
  • 10. You may think of HTML as tags and angle brackets. That’s an important part of it, but it’s not the whole story. The HTML5 specification also defines how those angle brackets interact with JavaScript, through the Document Object Model (DOM). HTML5 doesn’t just define a <video> tag; there is also a corresponding DOM API for video objects in the DOM. You can use this API to detect support for different video formats, play a video, pause, mute audio, track how much of the video has been downloaded, and everything else you need to build a rich user experience around the <video> tag itself. 10
  • 11. Unlike previous versions of HTML and XHTML, which are defined in terms of their syntax, HTML 5 is being defined in terms of the Document Object Model (DOM)—the tree representation used internally by browsers to represent the document. Every XML and HTML document in an HTML UA is represented by a Document object. The advantage of defining HTML 5 in terms of the DOM is that the language itself can be defined independently of the syntax. There are primarily two syntaxes that can be used to represent HTML documents: the HTML serialisation (known as HTML 5) and the XML serialisation (known as XHTML 5). 11
  • 12. 12
  • 13. 13
  • 14. 14
  • 15. 15
  • 16. 16
  • 17. 17
  • 18. Map of HTML 5 18
  • 19. 19
  • 20. 20
  • 21. <section> A section, or section of a chapter of text, or a book. <header> The page header. This is not the same as the <head> element. <footer> The footer of the page. Typically where all the legal crapola goes. <nav> Navigation links to other pages. You could put your websites navigation in this for example. <article> A blog article could be encapsulated by this for example. <aside>The aside tag can be used to provide extra information for a block of text. Much like sidebar material in books etc <figure>The <figure> element can be used to annotate your main text with diagrams, which aren’t necessarily imperative to the text. 21
  • 22. 22
  • 23. 23
  • 24. 24
  • 25. 25
  • 26. 26
  • 27. 27
  • 28. 28
  • 29. 29
  • 31. Modernizr is an open source, MIT-licensed JavaScript library that detects support for many HTML5 and CSS3 features. At the time of writing, the latest version is 1.1. You should always use the latest version. To do so, include the following <script> element at the top of your page: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dive into HTML5</title> <script src="modernizr.min.js"></script> </head> <body> ... </body> </html> 31
  • 32. 32
  • 33. 33
  • 34. 34
  • 35. 35
  • 36. 36
  • 37. 37
  • 38. 38
  • 39. 39