SlideShare a Scribd company logo
HTML5
New things
Mohammed Qasem
• What is HTML 5 ??
HTML vs HTML5
• NO NEED FOR MORE PLUGIN
Some Rule ….
• The need for external plugins (like Flash)
should be reduced
• Error handling should be easier than in
previous versions
• Scripting has to be replaced by more markup
• HTML5 should be device-independent
• The development process should be visible
to the public
HTML5 - New Features
• Some of the most interesting new features in
HTML5 are:
• The <canvas> element for 2D drawing
• The <video> and <audio> elements for
media playback
HTML5 - New Features
• Support for local storage
• New content-specific elements, like
<article>, <footer>, <header>, <nav>,
<section>
• New form controls, like calendar, date, time,
email, url, search
HTML VS HTML5: NEW
FEATURES
HTML5
DOCTYPE
• HTML5
– <!DOCTYPE html>
• HTML
– <!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
• HTML Tags
• <div>
• <p>
• <dl>,*<dt>,*<dd>
• <ol>,*<ul>,*<li>
• <fieldset>
• <input>
• HTML5 Tags
• <article>
• <aside>
• <section>
• <header>,*<hgroup>
• <nav>
• <footer>
• <datalist>
• <progress>
• <time>
<Figure>
• The <figure> tag specifies self-
contained content, like illustrations,
diagrams, photos, code listings, etc.
<Figure>
• HTML5
– <figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
– </figure>
• HTML
– N/A
“Type” – Links & Js
• HTML5
– Not necessary
• <script src="path/to/script.js"></script>
• HTML
– Necessary
• <script src="path/to/script.js“
type=“text/javascript”></script>
“” – ID’s & Classes
• HTML5
– Not necessary
• <p class=myClass id=someId>
• HTML
– Necessary
• <p class=“myClass” id=“someId”>
UL Editable
• HTML5
– <ul contenteditable=true>
• HTML
– N/A
Type=“Email”
• HTML5
– <input id="email" name="email" type="email" />
• HTML
– N/A
Placeholders
• HTML5
– <input name="email" type="email"
placeholder=“mail@domain.com" />
• HTML
– N/A
Semantic Tags
• HTML5
– <Nav>
– <Header>
– <Article>
• <Section>
– <Aside>
– <Footer>
• HTML
– N/A
html5 Recursiveness
• HTML5 allows for multiple sections and articles
within a single page. Each section/article can have
its own header, footer, aside and nav.
Required
• The required attribute is a boolean attribute.
• HTML5
– <input type="text" name="someInput" required>
• HTML
– N/A
Autofocus
• HTML5
– <input type="text" name="someInput"
placeholder="Douglas Quaid" required
autofocus>
• HTML
– N/A
HTML5 Registration Form
• <form>
• <input name="Full Name"
• placeholder="Enter your full4name"
• Autofocus required>
• <input type="email“ name="Email"
• placeholder="Enter your email address"
• required>
• <input type="url“ name="URL"
• placeholder="What’s your website
• address?">
• <input type="submit“ value="Register">
• </form>
Audio
• HTML5
– <audio autoplay="autoplay"
controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a href="file.mp3">Download this file.</a>
– </audio>
• HTML
– N/A
Audio
• Supported formats
Video
• HTML5
– <video controls preload>
<source src=“video.ogv" type="video/ogg" />
<source src=“video.mp4" type="video/mp4”/>
<p> Your browser is old. <a
href=“video.mp4">Download this video instead.</a>
</p>
– </video>
• HTML
– N/A
Video
• Supported formats
Demo
More help
• http://joshduck.com/periodic-table.html

More Related Content

What's hot

Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
Jacob Nelson
 
Intro to HTML
Intro to HTMLIntro to HTML
HTML5 CSS3 Basics
HTML5 CSS3 Basics HTML5 CSS3 Basics
HTML5 CSS3 Basics
Srinivas Tamada
 
Training HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPBTraining HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPB
Wahyu Putra
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSS
TJ Stalcup
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlanta
Thinkful
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
Nir Elbaz
 
Artistic Web Applications - Week3 - Part 3
Artistic Web Applications - Week3 - Part 3Artistic Web Applications - Week3 - Part 3
Artistic Web Applications - Week3 - Part 3
Katherine McCurdy-Lapierre, R.G.D.
 
Kick start @ html5
Kick start @ html5Kick start @ html5
Kick start @ html5
Umesh Agarwal
 
Html:css crash course (4:5)
Html:css crash course (4:5)Html:css crash course (4:5)
Html:css crash course (4:5)
Thinkful
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS Frameworks
Mike Crabb
 
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
 
Web 101 intro to html
Web 101  intro to htmlWeb 101  intro to html
Web 101 intro to html
Hawkman Academy
 
Web Development
Web DevelopmentWeb Development
Web Development
Harshdeep Singh
 
LecWeek2 lecture-whatiswebdesign-part2
LecWeek2 lecture-whatiswebdesign-part2LecWeek2 lecture-whatiswebdesign-part2
LecWeek2 lecture-whatiswebdesign-part2
Katherine McCurdy-Lapierre, R.G.D.
 
05 RD PoSD Tutorial_xhtml_to_html5_2016
05 RD PoSD Tutorial_xhtml_to_html5_201605 RD PoSD Tutorial_xhtml_to_html5_2016
05 RD PoSD Tutorial_xhtml_to_html5_2016
Rich Dron
 
Basics of HTML
Basics of HTMLBasics of HTML
Basics of HTML
Anshuman Tandon
 

What's hot (20)

Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
 
Intro to HTML
Intro to HTMLIntro to HTML
Intro to HTML
 
HTML5 CSS3 Basics
HTML5 CSS3 Basics HTML5 CSS3 Basics
HTML5 CSS3 Basics
 
HTML5 & CSS3
HTML5 & CSS3 HTML5 & CSS3
HTML5 & CSS3
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
 
Training HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPBTraining HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPB
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSS
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlanta
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
 
Artistic Web Applications - Week3 - Part 3
Artistic Web Applications - Week3 - Part 3Artistic Web Applications - Week3 - Part 3
Artistic Web Applications - Week3 - Part 3
 
Kick start @ html5
Kick start @ html5Kick start @ html5
Kick start @ html5
 
Html:css crash course (4:5)
Html:css crash course (4:5)Html:css crash course (4:5)
Html:css crash course (4:5)
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS Frameworks
 
HTML/CSS Lecture 1
HTML/CSS Lecture 1HTML/CSS Lecture 1
HTML/CSS Lecture 1
 
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
 
Web 101 intro to html
Web 101  intro to htmlWeb 101  intro to html
Web 101 intro to html
 
Web Development
Web DevelopmentWeb Development
Web Development
 
LecWeek2 lecture-whatiswebdesign-part2
LecWeek2 lecture-whatiswebdesign-part2LecWeek2 lecture-whatiswebdesign-part2
LecWeek2 lecture-whatiswebdesign-part2
 
05 RD PoSD Tutorial_xhtml_to_html5_2016
05 RD PoSD Tutorial_xhtml_to_html5_201605 RD PoSD Tutorial_xhtml_to_html5_2016
05 RD PoSD Tutorial_xhtml_to_html5_2016
 
Basics of HTML
Basics of HTMLBasics of HTML
Basics of HTML
 

Similar to Html5

HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
Dave Ross
 
HTML5 & Front-end overview
HTML5 & Front-end overviewHTML5 & Front-end overview
HTML5 & Front-end overviewAshish Mukherjee
 
Html5 Brown Bag
Html5 Brown BagHtml5 Brown Bag
Html5 Brown Bag
stuplum
 
Html,CSS & UI/UX design
Html,CSS & UI/UX designHtml,CSS & UI/UX design
Html,CSS & UI/UX design
Karthikeyan Dhanasekaran CUA
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)
François Massart
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential Training
Kaloyan Kosev
 
Html5
Html5Html5
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
Christopher Schmitt
 
Html&Browser
Html&BrowserHtml&Browser
Html&Browser
Alipay
 
Intro to HTML
Intro to HTMLIntro to HTML
Intro to HTML
aakash choudhary
 
Intro to polymer-Devfest Yaoundé 2013
Intro to polymer-Devfest Yaoundé 2013Intro to polymer-Devfest Yaoundé 2013
Intro to polymer-Devfest Yaoundé 2013gdgyaounde
 
Intro JavaScript
Intro JavaScriptIntro JavaScript
Intro JavaScript
koppenolski
 
HTML5
HTML5HTML5

Similar to Html5 (20)

HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
 
HTML5 & Front-end overview
HTML5 & Front-end overviewHTML5 & Front-end overview
HTML5 & Front-end overview
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
 
Html5 Brown Bag
Html5 Brown BagHtml5 Brown Bag
Html5 Brown Bag
 
Demystifying HTML5
Demystifying HTML5Demystifying HTML5
Demystifying HTML5
 
HTML 5
HTML 5HTML 5
HTML 5
 
Html,CSS & UI/UX design
Html,CSS & UI/UX designHtml,CSS & UI/UX design
Html,CSS & UI/UX design
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)
 
Html5 n css3
Html5 n css3Html5 n css3
Html5 n css3
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential Training
 
Html5
Html5Html5
Html5
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
 
Html&Browser
Html&BrowserHtml&Browser
Html&Browser
 
Intro to HTML
Intro to HTMLIntro to HTML
Intro to HTML
 
Intro to polymer-Devfest Yaoundé 2013
Intro to polymer-Devfest Yaoundé 2013Intro to polymer-Devfest Yaoundé 2013
Intro to polymer-Devfest Yaoundé 2013
 
Html5 public
Html5 publicHtml5 public
Html5 public
 
Intro JavaScript
Intro JavaScriptIntro JavaScript
Intro JavaScript
 
HTML5
HTML5HTML5
HTML5
 
Rohit&kunjan
Rohit&kunjanRohit&kunjan
Rohit&kunjan
 
Html presentation
Html presentationHtml presentation
Html presentation
 

Recently uploaded

zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofszkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
Alex Pruden
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
nkrafacyberclub
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
SOFTTECHHUB
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
sonjaschweigert1
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Aggregage
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 

Recently uploaded (20)

zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofszkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 

Html5

  • 2. • What is HTML 5 ??
  • 3. HTML vs HTML5 • NO NEED FOR MORE PLUGIN
  • 4. Some Rule …. • The need for external plugins (like Flash) should be reduced • Error handling should be easier than in previous versions • Scripting has to be replaced by more markup • HTML5 should be device-independent • The development process should be visible to the public
  • 5. HTML5 - New Features • Some of the most interesting new features in HTML5 are: • The <canvas> element for 2D drawing • The <video> and <audio> elements for media playback
  • 6. HTML5 - New Features • Support for local storage • New content-specific elements, like <article>, <footer>, <header>, <nav>, <section> • New form controls, like calendar, date, time, email, url, search
  • 7. HTML VS HTML5: NEW FEATURES HTML5
  • 8. DOCTYPE • HTML5 – <!DOCTYPE html> • HTML – <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
  • 9. • HTML Tags • <div> • <p> • <dl>,*<dt>,*<dd> • <ol>,*<ul>,*<li> • <fieldset> • <input> • HTML5 Tags • <article> • <aside> • <section> • <header>,*<hgroup> • <nav> • <footer> • <datalist> • <progress> • <time>
  • 10.
  • 11. <Figure> • The <figure> tag specifies self- contained content, like illustrations, diagrams, photos, code listings, etc.
  • 12. <Figure> • HTML5 – <figure> <img src="path/to/image" alt="About image" /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> – </figure> • HTML – N/A
  • 13. “Type” – Links & Js • HTML5 – Not necessary • <script src="path/to/script.js"></script> • HTML – Necessary • <script src="path/to/script.js“ type=“text/javascript”></script>
  • 14. “” – ID’s & Classes • HTML5 – Not necessary • <p class=myClass id=someId> • HTML – Necessary • <p class=“myClass” id=“someId”>
  • 15. UL Editable • HTML5 – <ul contenteditable=true> • HTML – N/A
  • 16. Type=“Email” • HTML5 – <input id="email" name="email" type="email" /> • HTML – N/A
  • 17. Placeholders • HTML5 – <input name="email" type="email" placeholder=“mail@domain.com" /> • HTML – N/A
  • 18. Semantic Tags • HTML5 – <Nav> – <Header> – <Article> • <Section> – <Aside> – <Footer> • HTML – N/A
  • 19. html5 Recursiveness • HTML5 allows for multiple sections and articles within a single page. Each section/article can have its own header, footer, aside and nav.
  • 20. Required • The required attribute is a boolean attribute. • HTML5 – <input type="text" name="someInput" required> • HTML – N/A
  • 21. Autofocus • HTML5 – <input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus> • HTML – N/A
  • 22. HTML5 Registration Form • <form> • <input name="Full Name" • placeholder="Enter your full4name" • Autofocus required> • <input type="email“ name="Email" • placeholder="Enter your email address" • required> • <input type="url“ name="URL" • placeholder="What’s your website • address?"> • <input type="submit“ value="Register"> • </form>
  • 23.
  • 24. Audio • HTML5 – <audio autoplay="autoplay" controls="controls"> <source src="file.ogg" /> <source src="file.mp3" /> <a href="file.mp3">Download this file.</a> – </audio> • HTML – N/A
  • 26. Video • HTML5 – <video controls preload> <source src=“video.ogv" type="video/ogg" /> <source src=“video.mp4" type="video/mp4”/> <p> Your browser is old. <a href=“video.mp4">Download this video instead.</a> </p> – </video> • HTML – N/A
  • 28. Demo