SlideShare une entreprise Scribd logo
1  sur  24
Harshana Weerasinghe
http://about.me/harshana
February, 2013
   HTML5
   Semantic Tags
   Forms
   Audio/Video
   Canvas
   SVG
   A lot of versions
    http://en.wikipedia.org/wiki/HTML
   http://www.evolutionoftheweb.com
   The Evolution of Web Design
   HTML5 is The New HTML Standard.
   The previous version of HTML, HTML 4.01,
    came in 1999. The web has changed a lot
    since then.
   HTML5 is still a work in progress. However,
    the major browsers support many of the new
    HTML5 elements and APIs.
   HTML5 is a cooperation between the World
    Wide Web Consortium (W3C) and the Web
    Hypertext Application Technology Working
    Group (WHATWG).
   WHATWG was working with web forms and
    applications, and W3C was working with
    XHTML 2.0. In 2006, they decided to
    cooperate and create a new version of HTML.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
<input id="FullName" type="text" required="required" />


<input id=“mail" type=“email" required="required" />


<input id=“company" type="text" />


<input id=“zip" type=“number" />


<input id=“phone" type=“tel" />
   Only Support .MP3, .OGG, .WAV
<audio src="resources/fileName.mp3"
controls="controls" />
OR
<audio controls="controls">
    <source
         src="resources/fileName.mp3“
         type="audio/mpeg" />
    Your browser does not support the
audio element.
</audio>
   Only Support .MP4, WebM, .OGG

<video src="resources/Wildlife.MP4"
controls="controls"/>
OR
<video controls="controls">
   <source src="resources/Wildlife.MP4"
           type="video/mp4" />
   Your browser does not support the video
element.
</video>
   Used to draw graphics, on the fly, via
    scripting (usually JavaScript).
   The <canvas> element is only a container for
    graphics. You must use a script to actually
    draw the graphics 
   several methods for drawing paths, boxes,
    circles, characters, and adding images.
   SVG stands for Scalable Vector Graphics
   SVG is used to define vector-based graphics
    for the Web
   SVG defines the graphics in XML format
   SVG graphics do NOT lose any quality if they
    are zoomed or resized
   Every element and every attribute in SVG
    files can be animated
   SVG is a W3C recommendation
   Save file as a .svg
   <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle cx="100" cy="50" r="40" stroke="black"
     stroke-width="2" fill="red" />
    </svg>

 Can be Embeded SVG With the <embed>,
  <object>, <iframe> or <a> Tag or inline in HTML
 More E.G.
  http://www.w3schools.com/svg/svg_examples.a
  sp
   Accessibility
   Video And Audio Support (no flash )
   Simple Doctype
   Cleaner Code
   Better Interactions
   Game Development
   Legacy/Cross Browser Support
   Mobile, Mobile, Mobile
   It’s The Future, Get With It!
   http://en.wikipedia.org/wiki/Html5
   http://channel9.msdn.com/Series/Developing
    -HTML-5-Apps-Jump-Start
   http://www.w3schools.com/html/html5_intro
    .asp
   http://www.w3schools.com/svg/default.asp
Html5 + css3+ java script for future - HTML5

Contenu connexe

Tendances

Html part 2
Html part 2Html part 2
Html part 2lokenra
 
Ursuline College Library Video Databases
Ursuline College Library Video Databases Ursuline College Library Video Databases
Ursuline College Library Video Databases Teresa Potter
 
Word press development for non developers
Word press development for non developers Word press development for non developers
Word press development for non developers Jessica C. Gardner
 
Front end optimization
Front end optimizationFront end optimization
Front end optimizationAbhishek Anand
 
Vídeo.1
Vídeo.1Vídeo.1
Vídeo.1home
 
HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)博史 高木
 
Wp responsive-theme-framework
Wp responsive-theme-frameworkWp responsive-theme-framework
Wp responsive-theme-frameworkDamien Oh
 
Administer WordPress with WP-CLI
Administer WordPress with WP-CLIAdminister WordPress with WP-CLI
Administer WordPress with WP-CLISuwash Kunwar
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themesopenchamp
 
UXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UXUXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UXStoian Dipchikov
 
Building a tvOS Application
Building a tvOS ApplicationBuilding a tvOS Application
Building a tvOS ApplicationMichiel De Mey
 
Banners
BannersBanners
Bannersamogom
 
Accessibility and Your Blog
Accessibility and Your BlogAccessibility and Your Blog
Accessibility and Your BlogDomanique Alicia
 
Static site gen talk
Static site gen talkStatic site gen talk
Static site gen talkBen Adam
 

Tendances (20)

Html part 2
Html part 2Html part 2
Html part 2
 
Video
VideoVideo
Video
 
Ursuline College Library Video Databases
Ursuline College Library Video Databases Ursuline College Library Video Databases
Ursuline College Library Video Databases
 
Word press development for non developers
Word press development for non developers Word press development for non developers
Word press development for non developers
 
Front end optimization
Front end optimizationFront end optimization
Front end optimization
 
Paky
PakyPaky
Paky
 
Vídeo.1
Vídeo.1Vídeo.1
Vídeo.1
 
Object width
Object widthObject width
Object width
 
HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)
 
Video Of Tajmahal
Video Of TajmahalVideo Of Tajmahal
Video Of Tajmahal
 
Wp responsive-theme-framework
Wp responsive-theme-frameworkWp responsive-theme-framework
Wp responsive-theme-framework
 
Administer WordPress with WP-CLI
Administer WordPress with WP-CLIAdminister WordPress with WP-CLI
Administer WordPress with WP-CLI
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
 
UXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UXUXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UX
 
Lesson 4
Lesson 4Lesson 4
Lesson 4
 
Wordpress Shortcode
Wordpress ShortcodeWordpress Shortcode
Wordpress Shortcode
 
Building a tvOS Application
Building a tvOS ApplicationBuilding a tvOS Application
Building a tvOS Application
 
Banners
BannersBanners
Banners
 
Accessibility and Your Blog
Accessibility and Your BlogAccessibility and Your Blog
Accessibility and Your Blog
 
Static site gen talk
Static site gen talkStatic site gen talk
Static site gen talk
 

Similaire à Html5 + css3+ java script for future - HTML5

Web Directions @media 2010
Web Directions @media 2010Web Directions @media 2010
Web Directions @media 2010Patrick Lauke
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5Kevin DeRudder
 
HTML5: Markup Evolved
HTML5: Markup EvolvedHTML5: Markup Evolved
HTML5: Markup EvolvedBilly Hylton
 
HTML5 Multimedia
HTML5 MultimediaHTML5 Multimedia
HTML5 MultimediaSiddhi
 
Wordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The NextwebWordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The NextwebGeorge Kanellopoulos
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebGeorge Kanellopoulos
 
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...Patrick Lauke
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
 
Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Gill Cleeren
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)Shumpei Shiraishi
 

Similaire à Html5 + css3+ java script for future - HTML5 (20)

Html5 intro
Html5 introHtml5 intro
Html5 intro
 
Html5 Basics
Html5 BasicsHtml5 Basics
Html5 Basics
 
Web Directions @media 2010
Web Directions @media 2010Web Directions @media 2010
Web Directions @media 2010
 
Web Apps
Web AppsWeb Apps
Web Apps
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
HTML5: Markup Evolved
HTML5: Markup EvolvedHTML5: Markup Evolved
HTML5: Markup Evolved
 
HTML5 Multimedia
HTML5 MultimediaHTML5 Multimedia
HTML5 Multimedia
 
Wordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The NextwebWordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The Nextweb
 
HTML5 Refresher
HTML5 RefresherHTML5 Refresher
HTML5 Refresher
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
 
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
 
HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tourHTML5 - A Whirlwind tour
HTML5 - A Whirlwind tour
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!
 
Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 

Dernier

A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
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 MenDelhi Call girls
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...gurkirankumar98700
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard
 

Dernier (20)

A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
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
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
 

Html5 + css3+ java script for future - HTML5

  • 2. HTML5  Semantic Tags  Forms  Audio/Video  Canvas  SVG
  • 3. A lot of versions http://en.wikipedia.org/wiki/HTML  http://www.evolutionoftheweb.com  The Evolution of Web Design
  • 4. HTML5 is The New HTML Standard.  The previous version of HTML, HTML 4.01, came in 1999. The web has changed a lot since then.  HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.
  • 5. HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).  WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.
  • 6.
  • 7.
  • 8. <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
  • 9.
  • 10.
  • 11.
  • 12. <input id="FullName" type="text" required="required" /> <input id=“mail" type=“email" required="required" /> <input id=“company" type="text" /> <input id=“zip" type=“number" /> <input id=“phone" type=“tel" />
  • 13.
  • 14.
  • 15.
  • 16. Only Support .MP3, .OGG, .WAV <audio src="resources/fileName.mp3" controls="controls" /> OR <audio controls="controls"> <source src="resources/fileName.mp3“ type="audio/mpeg" /> Your browser does not support the audio element. </audio>
  • 17. Only Support .MP4, WebM, .OGG <video src="resources/Wildlife.MP4" controls="controls"/> OR <video controls="controls"> <source src="resources/Wildlife.MP4" type="video/mp4" /> Your browser does not support the video element. </video>
  • 18. Used to draw graphics, on the fly, via scripting (usually JavaScript).  The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics   several methods for drawing paths, boxes, circles, characters, and adding images.
  • 19. SVG stands for Scalable Vector Graphics  SVG is used to define vector-based graphics for the Web  SVG defines the graphics in XML format  SVG graphics do NOT lose any quality if they are zoomed or resized  Every element and every attribute in SVG files can be animated  SVG is a W3C recommendation
  • 20. Save file as a .svg  <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>  Can be Embeded SVG With the <embed>, <object>, <iframe> or <a> Tag or inline in HTML  More E.G. http://www.w3schools.com/svg/svg_examples.a sp
  • 21. Accessibility  Video And Audio Support (no flash )  Simple Doctype  Cleaner Code  Better Interactions  Game Development  Legacy/Cross Browser Support  Mobile, Mobile, Mobile  It’s The Future, Get With It!
  • 22.
  • 23. http://en.wikipedia.org/wiki/Html5  http://channel9.msdn.com/Series/Developing -HTML-5-Apps-Jump-Start  http://www.w3schools.com/html/html5_intro .asp  http://www.w3schools.com/svg/default.asp