SlideShare a Scribd company logo

Html5

•Download as PPTX, PDF•
•
Nisa Soomro
Nisa Soomro

The document provides an overview of HTML5, including its history, new features, and elements. Some key points: - HTML5 is intended to be the new standard for HTML, updating the previous HTML 4.01 from 1999 for modern web use. - New features in HTML5 include elements for drawing graphics (<canvas>), media playback (<video> and <audio>), local storage, and improved form handling. - HTML5 aims to reduce the need for plugins like Flash and provide a common standard for multimedia, applications, and offline web apps across devices. - Major browsers continue adding support for new HTML5 features, though it remains a work in progress not yet fully standardized.

Related slideshows

Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
 
Html5
Html5Html5
Html5
 
1 of 35
Web Engineering http://www.slideshare.net/nisa1207/
HTML5  HTML5 Intro  HTML5 input type  HTML5 Video  HTML5 Audio 2
What is HTML5? • HTML5 will be the new standard for HTML. • The previous version of HTML, HTML 4.01, came in 1999. The internet has changed significantly since then. • HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML. • HTML5 is designed to deliver almost everything you want to do online without requiring additional plugins. It does everything from animation to apps, music to movies, and can also be used to build complicated applications that run in your browser. • HTML5 is also cross-platform (it does not care whether you are using a tablet or a smartphone, a netbook, notebook or a Smart TV). • HTML5 can also be used to write web applications that still work when you are not online. • The HTML 5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and hundreds of other vendors. • HTML5 is still a work in progress. However, all major browsers support many of the new HTML5 elements and APIs. 3
How Did HTML5 Get Started? • 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. Some rules for HTML5 were established:  New features should be based on HTML, CSS, DOM, and JavaScript  The need for external plugins (like Flash) needs to 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 4
HTML5 is The New HTML Standard • New Elements • New Attributes • Full CSS3 Support • Video and Audio • 2D/3D Graphics • Local Storage • Local SQL Database • Web Applications 5
The HTML5 <!DOCTYPE> In HTML5 there is only one <!doctype> declaration, and it is very simple: <!DOCTYPE html> 6
HTML5 - New Features Some of the most interesting new features in HTML5:  The <canvas> element for 2D drawing  The <video> and <audio> elements for media playback  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
Browser Support for HTML5  HTML5 is not yet an official standard, and no browsers have full HTML5 support.  But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions. 8
HTML5 New Elements • The internet, and the use of the internet, has changed a lot since HTML 4.01 became a standard in 1999. • Today, several elements in HTML 4.01 are obsolete, never used, or not used the way they were intended. All those elements are removed or re-written in HTML5. • To better handle today's internet use, HTML5 also includes new elements for drawing graphics, adding media content, better page structure, better form handling, and several APIs to drag/drop elements, find Geolocation, include web storage, application cache, web workers, etc. 9
Removed Elements The following HTML 4.01 elements are removed from HTML5: • <applet> • <big> • <center> • <font> • <frame> • <frameset> • <noframes> • <strike> • <tt> 10
HTML5 New Elements <canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript) <audio> Defines sound content <video> Defines a video or movie <source> Defines multiple media resources for <video> and <audio> <embed> Defines a container for an external application or interactive content (a plug-in) <keygen> Defines a key-pair generator field (for forms) 11
HTML5 Input Types HTML5 has several new input types for forms. These new features allow better input control and validation.  color  date  datetime  datetime-local <input type=“ typeOfControl” name=“anyName” >  email  month  number  range  search  tel  time  url  week 12
Input Type: color • The color type is used for input fields that should contain a color. <!DOCTYPE html> <html> <body> <form action="demo_form.php"> Select your favorite color: <input type="color" name="favcolor"><br> <input type="submit"> </form> </body> </html> 13
Input Type: date • The date type allows the user to select a date. <html> <body> <form action="demo_form.php"> Date: <input type="date" name="bday"> <input type="submit"> </form> </body> </html> 14 Pervious practice for mentioning date
Input Type: datetime The datetime type allows the user to select a date and time (with time zone). <html> <body> <form action="demo_form.php"> Date Time: <input type="datetime" name="bday"> <input type="submit"> </form> </body> </html> 15
Input Type: datetime-local The datetime-local type allows the user to select a date and time (no time zone). <html> <body> <form action="demo_form.php"> Birthday: <input type="datetime-local" name="dateTime"> <input type="submit"> </form> </body> </html> 16
Input Type: email • The email type is used for input fields that should contain an e-mail address. <html> <body> <form action="demo_form.php"> E-mail: <input type=“email" name=“email"> <input type="submit"> </form> </body> </html> 17
Input Type: month • The month type allows the user to select a month and year. <html> <body> <form action="demo_form.php"> Birthday: <input type=“month" name=“month"> <input type="submit"> </form> </body> </html> 18
Input Type: number • The number type is used for input fields that should contain a numeric value. • You can also set restrictions on what numbers are accepted: <form action="demo_form.php"> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form> 19
Input Type: number Cont… Use the following attributes to specify restrictions: • max - specifies the maximum value allowed • min - specifies the minimum value allowed • step - specifies the legal number intervals • value - Specifies the default value <input type="number" name="quantity" min="0" max="10" step="2" value="2"> 20
Input Type: range The range type is used for input fields that should contain a value from a range of numbers. • You can also set restrictions on what numbers are accepted. <form action="demo_form.php"> Points: 0<input type="range" name="points" min="1" max="10">10 <input type="submit"> </form> 21
Input Type: time • The time type allows the user to select a time. <form action="demo_form.asp"> Select a time: <input type="time" name="usr_time"> <input type="submit"> </form> 22
Input Type: url • The url type is used for input fields that should contain a URL address. • The value of the url field is automatically validated when the form is submitted. <form action="demo_form.asp"> Add your homepage: <input type="url" name="homepage"><br> <input type="submit"> </form> 23
Input Type: week • The week type allows the user to select a week and year. <form action="demo_form.asp"> Select a week: <input type="week" name="year_week"> <input type="submit"> </form> 24
The placeholder attribute • HTML5 introduced a new attribute called placeholder. This attribute on <input> and <textarea> elements provides a hint to the user of what can be entered in the field. <input type="text" placeholder="search the web"/> 25
The autofocus attribute • This is a simple one-step pattern, easily programmed in JavaScript at the time of document load, automatically focus one particular form field. • HTML5 introduced a new attribute called autofocus which would be used as follows: <input type="text" name="search" autofocus/> 26
The required attribute • Now you do not need to have javascript for client side validations like empty text box would never be submitted because HTML5 introduced a new attribute called required which would be used as follows and would insist to have a value: • <input type="text" name="search" required/> 27
HTML5 Video Video on the Web • Until now, there has not been a standard for showing a video/movie on a web page. • Today, most videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins. • HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element. 28
HTML5 Video <video width="320" height="240" controls> <source src="movie.mp4" > Your browser does not support the video tag. </video> 29
HTML5 Video 30
HTML5 Audio • HTML5 provides a standard for playing audio files. • Until now, there has not been a standard for playing audio files on a web page. • Today, most audio files are played through a plug-in (like flash). However, different browsers may have different plug-ins. • HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element. 31
HTML5 Audio • <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio> 32
HTML5 Audio 33
Assignment 1. What is W3C and WHATWG? What are their Job responsibilities ? 2. Create a Sing-up web page which consist following Fields 1. User Name 2. ID 3. Password 4. Gender 5. Date of Birth 3. Create Sign in Web page. 4. Create a Web page which deals with video 5. Create a web page which deals with Audio 34
References • http://www.w3schools.com/tags/ref_html_dtd.asp 35

More Related Content

Html5

  • 2. HTML5  HTML5 Intro  HTML5 input type  HTML5 Video  HTML5 Audio 2
  • 3. What is HTML5? • HTML5 will be the new standard for HTML. • The previous version of HTML, HTML 4.01, came in 1999. The internet has changed significantly since then. • HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML. • HTML5 is designed to deliver almost everything you want to do online without requiring additional plugins. It does everything from animation to apps, music to movies, and can also be used to build complicated applications that run in your browser. • HTML5 is also cross-platform (it does not care whether you are using a tablet or a smartphone, a netbook, notebook or a Smart TV). • HTML5 can also be used to write web applications that still work when you are not online. • The HTML 5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and hundreds of other vendors. • HTML5 is still a work in progress. However, all major browsers support many of the new HTML5 elements and APIs. 3
  • 4. How Did HTML5 Get Started? • 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. Some rules for HTML5 were established:  New features should be based on HTML, CSS, DOM, and JavaScript  The need for external plugins (like Flash) needs to 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 4
  • 5. HTML5 is The New HTML Standard • New Elements • New Attributes • Full CSS3 Support • Video and Audio • 2D/3D Graphics • Local Storage • Local SQL Database • Web Applications 5
  • 6. The HTML5 <!DOCTYPE> In HTML5 there is only one <!doctype> declaration, and it is very simple: <!DOCTYPE html> 6
  • 7. HTML5 - New Features Some of the most interesting new features in HTML5:  The <canvas> element for 2D drawing  The <video> and <audio> elements for media playback  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
  • 8. Browser Support for HTML5  HTML5 is not yet an official standard, and no browsers have full HTML5 support.  But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions. 8
  • 9. HTML5 New Elements • The internet, and the use of the internet, has changed a lot since HTML 4.01 became a standard in 1999. • Today, several elements in HTML 4.01 are obsolete, never used, or not used the way they were intended. All those elements are removed or re-written in HTML5. • To better handle today's internet use, HTML5 also includes new elements for drawing graphics, adding media content, better page structure, better form handling, and several APIs to drag/drop elements, find Geolocation, include web storage, application cache, web workers, etc. 9
  • 10. Removed Elements The following HTML 4.01 elements are removed from HTML5: • <applet> • <big> • <center> • <font> • <frame> • <frameset> • <noframes> • <strike> • <tt> 10
  • 11. HTML5 New Elements <canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript) <audio> Defines sound content <video> Defines a video or movie <source> Defines multiple media resources for <video> and <audio> <embed> Defines a container for an external application or interactive content (a plug-in) <keygen> Defines a key-pair generator field (for forms) 11
  • 12. HTML5 Input Types HTML5 has several new input types for forms. These new features allow better input control and validation.  color  date  datetime  datetime-local <input type=“ typeOfControl” name=“anyName” >  email  month  number  range  search  tel  time  url  week 12
  • 13. Input Type: color • The color type is used for input fields that should contain a color. <!DOCTYPE html> <html> <body> <form action="demo_form.php"> Select your favorite color: <input type="color" name="favcolor"><br> <input type="submit"> </form> </body> </html> 13
  • 14. Input Type: date • The date type allows the user to select a date. <html> <body> <form action="demo_form.php"> Date: <input type="date" name="bday"> <input type="submit"> </form> </body> </html> 14 Pervious practice for mentioning date
  • 15. Input Type: datetime The datetime type allows the user to select a date and time (with time zone). <html> <body> <form action="demo_form.php"> Date Time: <input type="datetime" name="bday"> <input type="submit"> </form> </body> </html> 15
  • 16. Input Type: datetime-local The datetime-local type allows the user to select a date and time (no time zone). <html> <body> <form action="demo_form.php"> Birthday: <input type="datetime-local" name="dateTime"> <input type="submit"> </form> </body> </html> 16
  • 17. Input Type: email • The email type is used for input fields that should contain an e-mail address. <html> <body> <form action="demo_form.php"> E-mail: <input type=“email" name=“email"> <input type="submit"> </form> </body> </html> 17
  • 18. Input Type: month • The month type allows the user to select a month and year. <html> <body> <form action="demo_form.php"> Birthday: <input type=“month" name=“month"> <input type="submit"> </form> </body> </html> 18
  • 19. Input Type: number • The number type is used for input fields that should contain a numeric value. • You can also set restrictions on what numbers are accepted: <form action="demo_form.php"> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form> 19
  • 20. Input Type: number Cont… Use the following attributes to specify restrictions: • max - specifies the maximum value allowed • min - specifies the minimum value allowed • step - specifies the legal number intervals • value - Specifies the default value <input type="number" name="quantity" min="0" max="10" step="2" value="2"> 20
  • 21. Input Type: range The range type is used for input fields that should contain a value from a range of numbers. • You can also set restrictions on what numbers are accepted. <form action="demo_form.php"> Points: 0<input type="range" name="points" min="1" max="10">10 <input type="submit"> </form> 21
  • 22. Input Type: time • The time type allows the user to select a time. <form action="demo_form.asp"> Select a time: <input type="time" name="usr_time"> <input type="submit"> </form> 22
  • 23. Input Type: url • The url type is used for input fields that should contain a URL address. • The value of the url field is automatically validated when the form is submitted. <form action="demo_form.asp"> Add your homepage: <input type="url" name="homepage"><br> <input type="submit"> </form> 23
  • 24. Input Type: week • The week type allows the user to select a week and year. <form action="demo_form.asp"> Select a week: <input type="week" name="year_week"> <input type="submit"> </form> 24
  • 25. The placeholder attribute • HTML5 introduced a new attribute called placeholder. This attribute on <input> and <textarea> elements provides a hint to the user of what can be entered in the field. <input type="text" placeholder="search the web"/> 25
  • 26. The autofocus attribute • This is a simple one-step pattern, easily programmed in JavaScript at the time of document load, automatically focus one particular form field. • HTML5 introduced a new attribute called autofocus which would be used as follows: <input type="text" name="search" autofocus/> 26
  • 27. The required attribute • Now you do not need to have javascript for client side validations like empty text box would never be submitted because HTML5 introduced a new attribute called required which would be used as follows and would insist to have a value: • <input type="text" name="search" required/> 27
  • 28. HTML5 Video Video on the Web • Until now, there has not been a standard for showing a video/movie on a web page. • Today, most videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins. • HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element. 28
  • 29. HTML5 Video <video width="320" height="240" controls> <source src="movie.mp4" > Your browser does not support the video tag. </video> 29
  • 31. HTML5 Audio • HTML5 provides a standard for playing audio files. • Until now, there has not been a standard for playing audio files on a web page. • Today, most audio files are played through a plug-in (like flash). However, different browsers may have different plug-ins. • HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element. 31
  • 32. HTML5 Audio • <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio> 32
  • 34. Assignment 1. What is W3C and WHATWG? What are their Job responsibilities ? 2. Create a Sing-up web page which consist following Fields 1. User Name 2. ID 3. Password 4. Gender 5. Date of Birth 3. Create Sign in Web page. 4. Create a Web page which deals with video 5. Create a web page which deals with Audio 34