Table Of Content

HTML5 HTML5 About the Tutorial HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming language, but rather a markup language. In this tutorial, we will discuss the features of HTML5 and how to use it in practice. Audience This tutorial has been designed for beginners in HTML5 to make them understand the basic- to-advanced concepts of the subject. Prerequisites Before starting this tutorial, you should have a basic understanding of HTML and its tags. Disclaimer & Copyright  Copyright 2016 by Tutorials Point (I) Pvt. Ltd. All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute, or republish any contents or a part of contents of this e-book in any manner without written consent of the publisher. We strive to update the contents of our website and tutorials as timely and as precisely as possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd. provides no guarantee regarding the accuracy, timeliness, or completeness of our website or its contents including this tutorial. If you discover any errors on our website or in this tutorial, please notify us at [email protected] HTML5 Execute HTML5 Online For most of the examples given in this tutorial you will find Try it option, so just make use of this option to execute your HTML5 programs at the spot and enjoy your learning. Try following example using Try it option available at the top right corner of the below sample code box − <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutorials Point</title> </head> <body> <header role="banner"> <h1>HTML5 Document Structure Example</h1> <p>This page should be tried in safari, chrome or Mozila.</p> </header> <footer> <p>Created by <a href="http://tutorialspoint.com/">Tutorials Point</a></p> </footer> </body> </html> HTML5 Table of Contents About the Tutorial ................................................................................................................................... 1 Audience ................................................................................................................................................. 1 Prerequisites ........................................................................................................................................... 1 Execute HTML5 Online ............................................................................................................................ 2 Table of Contents .................................................................................................................................... 3 1. HTML5 − OVERVIEW ............................................................................................................ 9 Browser Support ..................................................................................................................................... 9 New Features .......................................................................................................................................... 9 Backward Compatibility ........................................................................................................................ 10 2. HTML5 − SYNTAX ............................................................................................................... 11 The DOCTYPE ........................................................................................................................................ 11 Character Encoding ............................................................................................................................... 11 The <script> tag ..................................................................................................................................... 11 The <link> tag ........................................................................................................................................ 12 HTML5 Elements ................................................................................................................................... 12 HTML5 Attributes .................................................................................................................................. 12 HTML5 Document ................................................................................................................................. 13 3. HTML5 − ATTRIBUTES ........................................................................................................ 16 Standard Attributes ............................................................................................................................... 16 Custom Attributes ................................................................................................................................. 17 4. HTML5 − EVENTS ............................................................................................................... 18 5. HTML5 − WEB FORMS 2.0 ................................................................................................. 21 HTML5 The <input> element in HTML4 ............................................................................................................. 21 The <input> element in HTML5 ............................................................................................................. 22 HTML5 - datetime ................................................................................................................................. 23 HTML5 - datetime local ......................................................................................................................... 24 HTML5 – date ........................................................................................................................................ 24 HTML5 – month..................................................................................................................................... 25 HTML5 - week ....................................................................................................................................... 26 HTML5 – time ........................................................................................................................................ 27 HTML5 – number ................................................................................................................................... 27 HTML5 – range ...................................................................................................................................... 28 HTML5 - email ....................................................................................................................................... 29 HTML5 – URL ......................................................................................................................................... 30 The <output> element ........................................................................................................................... 30 The placeholder attribute...................................................................................................................... 32 The autofocus attribute ........................................................................................................................ 32 The required attribute ........................................................................................................................... 33 6. HTML5 − SVG ..................................................................................................................... 35 Viewing SVG Files .................................................................................................................................. 35 Embedding SVG in HTML5 ..................................................................................................................... 35 HTML5 − SVG Circle ............................................................................................................................... 36 HTML5 − SVG Rectangle ........................................................................................................................ 36 HTML5 − SVG Line ................................................................................................................................. 37 HTML5 − SVG Ellipse .............................................................................................................................. 38 HTML5 − SVG Polygon ........................................................................................................................... 39 HTML5 − SVG Polyline ........................................................................................................................... 40 HTML5 HTML5 − SVG Gradients ........................................................................................................................ 40 HTML5 − SVG Star ................................................................................................................................. 42 7. HTML5 − MATHML ............................................................................................................ 44 MathML Examples ................................................................................................................................ 44 Using MathML Characters ..................................................................................................................... 45 Matrix Presentation Examples .............................................................................................................. 47 8. HTML5 − WEB STORAGE .................................................................................................... 49 Session Storage ..................................................................................................................................... 49 Local Storage ......................................................................................................................................... 50 Delete Web Storage .............................................................................................................................. 51 9. HTML5 − WEB SQL DATABASE ........................................................................................... 54 The Core Methods ................................................................................................................................. 54 Opening Database ................................................................................................................................. 54 Executing queries .................................................................................................................................. 55 INSERT Operation .................................................................................................................................. 55 READ Operation .................................................................................................................................... 55 Final Example ........................................................................................................................................ 56 10. HTML5 − SERVER SENT EVENTS ......................................................................................... 58 Web Application for SSE ........................................................................................................................ 58 Server Side Script for SSE....................................................................................................................... 59 Handle Server-Sent Events .................................................................................................................... 60 11. HTML5 − WEBSOCKETS ..................................................................................................... 61 WebSocket Attributes ........................................................................................................................... 61 HTML5 WebSocket Events ................................................................................................................................. 62 WebSocket Methods ............................................................................................................................. 62 WebSocket Example .............................................................................................................................. 62 Client Side HTML & JavaScript Code ...................................................................................................... 62 Install pywebsocket .............................................................................................................................. 64 Start the Server ..................................................................................................................................... 64 12. HTML5 − CANVAS .............................................................................................................. 65 The Rendering Context .......................................................................................................................... 66 Browser Support ................................................................................................................................... 66 HTML5 Canvas Examples ....................................................................................................................... 66 HTML5 Canvas - Drawing Rectangles ..................................................................................................... 67 HTML5 Canvas - Drawing Paths ............................................................................................................. 69 HTML5 Canvas - Drawing Lines .............................................................................................................. 72 HTML5 Canvas - Drawing Bezier Curves ................................................................................................. 76 HTML5 Canvas - Drawing Quadratic Curves ........................................................................................... 78 HTML5 Canvas - Using Images ............................................................................................................... 81 HTML5 Canvas - Create Gradients ......................................................................................................... 83 HTML5 Canvas - Styles and Colors ......................................................................................................... 88 HTML5 Canvas - Text and Fonts ............................................................................................................. 92 HTML5 Canvas - Pattern and Shadow .................................................................................................... 94 HTML5 Canvas - Save and Restore States .............................................................................................. 98 HTML5 Canvas - Translation ................................................................................................................ 101 HTML5 Canvas - Rotation .................................................................................................................... 104 HTML5 Canvas - Scaling ....................................................................................................................... 106 HTML5 Canvas - Transforms ................................................................................................................ 109 HTML5 HTML5 Canvas - Composition .............................................................................................................. 112 HTML5 Canvas - Animations ................................................................................................................ 116 13. HTML5 − AUDIO & VIDEO ................................................................................................ 119 Embedding Video ................................................................................................................................ 119 Video Attribute Specification .............................................................................................................. 120 Embedding Audio ................................................................................................................................ 121 Audio Attribute Specification .............................................................................................................. 122 Handling Media Events........................................................................................................................ 122 Configuring Servers for Media Type .................................................................................................... 124 14. HTML5 − GEOLOCATION .................................................................................................. 125 Geolocation Methods .......................................................................................................................... 125 Geolocation getCurrentPosition() API ................................................................................................. 126 Geolocation watchPosition() API ......................................................................................................... 128 Geolocation clearWatch() API ............................................................................................................. 130 Location Properties ............................................................................................................................. 132 Handling Errors ................................................................................................................................... 133 Position Options .................................................................................................................................. 134 15. HTML5 − MICRODATA ..................................................................................................... 136 Example .............................................................................................................................................. 136 Global Attributes ................................................................................................................................. 137 Properties Datatypes........................................................................................................................... 137 Microdata API support ........................................................................................................................ 138 Defining Microdata Vocabulary ........................................................................................................... 138 16. HTML5 − DRAG & DROP .................................................................................................. 140 HTML5 Drag and Drop Events .......................................................................................................................... 140 The DataTransfer Object: .................................................................................................................... 141 Drag and Drop Process ........................................................................................................................ 142 17. HTML5 − WEB WORKERS ................................................................................................. 146 What is Web Workers?........................................................................................................................ 147 How Web Workers Work? ................................................................................................................... 148 Stopping Web Workers ....................................................................................................................... 149 Handling Errors ................................................................................................................................... 149 Checking for Browser Support ............................................................................................................. 150 18. HTML5 – INDEXEDDB ...................................................................................................... 152 19. HTML5 − WEB MESSAGING ............................................................................................. 160 20. HTML5 − CORS ................................................................................................................ 163 21. HTML5 − WEB RTC........................................................................................................... 167 1. HTML5 − OVERVIEW HTML5 HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web. HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears. Browser Support The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5. New Features HTML5 introduces a number of new elements and attributes that can help you in building modern websites. Here is a set of some of the most prominent features introduced in HTML5.  New Semantic Elements: These are like <header>, <footer>, and <section>.  Forms 2.0: Improvements to HTML web forms where new attributes have been introduced for <input> tag.  Persistent Local Storage: To achieve without resorting to third-party plugins.  WebSocket : A next-generation bidirectional communication technology for web applications.  Server-Sent Events: HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).  Canvas: This supports a two-dimensional drawing surface that you can program with JavaScript.  Audio & Video: You can embed audio or video on your webpages without resorting to third-party plugins.

ebook img

Download HTML5 Tutorial (PDF Version) - Tutorials Point PDF

23 Pages·2012·0.81 MB·English
by  Tutorials Point
Save to my drive
Quick download
Download
Upgrade Premium
Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.

Preview Download HTML5 Tutorial (PDF Version) - Tutorials Point

HTML5 HTML5 About the Tutorial HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming language, but rather a markup language. In this tutorial, we will discuss the features of HTML5 and how to use it in practice. Audience This tutorial has been designed for beginners in HTML5 to make them understand the basic- to-advanced concepts of the subject. Prerequisites Before starting this tutorial, you should have a basic understanding of HTML and its tags. Disclaimer & Copyright  Copyright 2016 by Tutorials Point (I) Pvt. Ltd. All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute, or republish any contents or a part of contents of this e-book in any manner without written consent of the publisher. We strive to update the contents of our website and tutorials as timely and as precisely as possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd. provides no guarantee regarding the accuracy, timeliness, or completeness of our website or its contents including this tutorial. If you discover any errors on our website or in this tutorial, please notify us at [email protected] HTML5 Execute HTML5 Online For most of the examples given in this tutorial you will find Try it option, so just make use of this option to execute your HTML5 programs at the spot and enjoy your learning. Try following example using Try it option available at the top right corner of the below sample code box − <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutorials Point</title> </head> <body> <header role="banner"> <h1>HTML5 Document Structure Example</h1> <p>This page should be tried in safari, chrome or Mozila.</p> </header> <footer> <p>Created by <a href="http://tutorialspoint.com/">Tutorials Point</a></p> </footer> </body> </html> HTML5 Table of Contents About the Tutorial ................................................................................................................................... 1 Audience ................................................................................................................................................. 1 Prerequisites ........................................................................................................................................... 1 Execute HTML5 Online ............................................................................................................................ 2 Table of Contents .................................................................................................................................... 3 1. HTML5 − OVERVIEW ............................................................................................................ 9 Browser Support ..................................................................................................................................... 9 New Features .......................................................................................................................................... 9 Backward Compatibility ........................................................................................................................ 10 2. HTML5 − SYNTAX ............................................................................................................... 11 The DOCTYPE ........................................................................................................................................ 11 Character Encoding ............................................................................................................................... 11 The <script> tag ..................................................................................................................................... 11 The <link> tag ........................................................................................................................................ 12 HTML5 Elements ................................................................................................................................... 12 HTML5 Attributes .................................................................................................................................. 12 HTML5 Document ................................................................................................................................. 13 3. HTML5 − ATTRIBUTES ........................................................................................................ 16 Standard Attributes ............................................................................................................................... 16 Custom Attributes ................................................................................................................................. 17 4. HTML5 − EVENTS ............................................................................................................... 18 5. HTML5 − WEB FORMS 2.0 ................................................................................................. 21 HTML5 The <input> element in HTML4 ............................................................................................................. 21 The <input> element in HTML5 ............................................................................................................. 22 HTML5 - datetime ................................................................................................................................. 23 HTML5 - datetime local ......................................................................................................................... 24 HTML5 – date ........................................................................................................................................ 24 HTML5 – month..................................................................................................................................... 25 HTML5 - week ....................................................................................................................................... 26 HTML5 – time ........................................................................................................................................ 27 HTML5 – number ................................................................................................................................... 27 HTML5 – range ...................................................................................................................................... 28 HTML5 - email ....................................................................................................................................... 29 HTML5 – URL ......................................................................................................................................... 30 The <output> element ........................................................................................................................... 30 The placeholder attribute...................................................................................................................... 32 The autofocus attribute ........................................................................................................................ 32 The required attribute ........................................................................................................................... 33 6. HTML5 − SVG ..................................................................................................................... 35 Viewing SVG Files .................................................................................................................................. 35 Embedding SVG in HTML5 ..................................................................................................................... 35 HTML5 − SVG Circle ............................................................................................................................... 36 HTML5 − SVG Rectangle ........................................................................................................................ 36 HTML5 − SVG Line ................................................................................................................................. 37 HTML5 − SVG Ellipse .............................................................................................................................. 38 HTML5 − SVG Polygon ........................................................................................................................... 39 HTML5 − SVG Polyline ........................................................................................................................... 40 HTML5 HTML5 − SVG Gradients ........................................................................................................................ 40 HTML5 − SVG Star ................................................................................................................................. 42 7. HTML5 − MATHML ............................................................................................................ 44 MathML Examples ................................................................................................................................ 44 Using MathML Characters ..................................................................................................................... 45 Matrix Presentation Examples .............................................................................................................. 47 8. HTML5 − WEB STORAGE .................................................................................................... 49 Session Storage ..................................................................................................................................... 49 Local Storage ......................................................................................................................................... 50 Delete Web Storage .............................................................................................................................. 51 9. HTML5 − WEB SQL DATABASE ........................................................................................... 54 The Core Methods ................................................................................................................................. 54 Opening Database ................................................................................................................................. 54 Executing queries .................................................................................................................................. 55 INSERT Operation .................................................................................................................................. 55 READ Operation .................................................................................................................................... 55 Final Example ........................................................................................................................................ 56 10. HTML5 − SERVER SENT EVENTS ......................................................................................... 58 Web Application for SSE ........................................................................................................................ 58 Server Side Script for SSE....................................................................................................................... 59 Handle Server-Sent Events .................................................................................................................... 60 11. HTML5 − WEBSOCKETS ..................................................................................................... 61 WebSocket Attributes ........................................................................................................................... 61 HTML5 WebSocket Events ................................................................................................................................. 62 WebSocket Methods ............................................................................................................................. 62 WebSocket Example .............................................................................................................................. 62 Client Side HTML & JavaScript Code ...................................................................................................... 62 Install pywebsocket .............................................................................................................................. 64 Start the Server ..................................................................................................................................... 64 12. HTML5 − CANVAS .............................................................................................................. 65 The Rendering Context .......................................................................................................................... 66 Browser Support ................................................................................................................................... 66 HTML5 Canvas Examples ....................................................................................................................... 66 HTML5 Canvas - Drawing Rectangles ..................................................................................................... 67 HTML5 Canvas - Drawing Paths ............................................................................................................. 69 HTML5 Canvas - Drawing Lines .............................................................................................................. 72 HTML5 Canvas - Drawing Bezier Curves ................................................................................................. 76 HTML5 Canvas - Drawing Quadratic Curves ........................................................................................... 78 HTML5 Canvas - Using Images ............................................................................................................... 81 HTML5 Canvas - Create Gradients ......................................................................................................... 83 HTML5 Canvas - Styles and Colors ......................................................................................................... 88 HTML5 Canvas - Text and Fonts ............................................................................................................. 92 HTML5 Canvas - Pattern and Shadow .................................................................................................... 94 HTML5 Canvas - Save and Restore States .............................................................................................. 98 HTML5 Canvas - Translation ................................................................................................................ 101 HTML5 Canvas - Rotation .................................................................................................................... 104 HTML5 Canvas - Scaling ....................................................................................................................... 106 HTML5 Canvas - Transforms ................................................................................................................ 109 HTML5 HTML5 Canvas - Composition .............................................................................................................. 112 HTML5 Canvas - Animations ................................................................................................................ 116 13. HTML5 − AUDIO & VIDEO ................................................................................................ 119 Embedding Video ................................................................................................................................ 119 Video Attribute Specification .............................................................................................................. 120 Embedding Audio ................................................................................................................................ 121 Audio Attribute Specification .............................................................................................................. 122 Handling Media Events........................................................................................................................ 122 Configuring Servers for Media Type .................................................................................................... 124 14. HTML5 − GEOLOCATION .................................................................................................. 125 Geolocation Methods .......................................................................................................................... 125 Geolocation getCurrentPosition() API ................................................................................................. 126 Geolocation watchPosition() API ......................................................................................................... 128 Geolocation clearWatch() API ............................................................................................................. 130 Location Properties ............................................................................................................................. 132 Handling Errors ................................................................................................................................... 133 Position Options .................................................................................................................................. 134 15. HTML5 − MICRODATA ..................................................................................................... 136 Example .............................................................................................................................................. 136 Global Attributes ................................................................................................................................. 137 Properties Datatypes........................................................................................................................... 137 Microdata API support ........................................................................................................................ 138 Defining Microdata Vocabulary ........................................................................................................... 138 16. HTML5 − DRAG & DROP .................................................................................................. 140 HTML5 Drag and Drop Events .......................................................................................................................... 140 The DataTransfer Object: .................................................................................................................... 141 Drag and Drop Process ........................................................................................................................ 142 17. HTML5 − WEB WORKERS ................................................................................................. 146 What is Web Workers?........................................................................................................................ 147 How Web Workers Work? ................................................................................................................... 148 Stopping Web Workers ....................................................................................................................... 149 Handling Errors ................................................................................................................................... 149 Checking for Browser Support ............................................................................................................. 150 18. HTML5 – INDEXEDDB ...................................................................................................... 152 19. HTML5 − WEB MESSAGING ............................................................................................. 160 20. HTML5 − CORS ................................................................................................................ 163 21. HTML5 − WEB RTC........................................................................................................... 167 1. HTML5 − OVERVIEW HTML5 HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web. HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears. Browser Support The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5. New Features HTML5 introduces a number of new elements and attributes that can help you in building modern websites. Here is a set of some of the most prominent features introduced in HTML5.  New Semantic Elements: These are like <header>, <footer>, and <section>.  Forms 2.0: Improvements to HTML web forms where new attributes have been introduced for <input> tag.  Persistent Local Storage: To achieve without resorting to third-party plugins.  WebSocket : A next-generation bidirectional communication technology for web applications.  Server-Sent Events: HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).  Canvas: This supports a two-dimensional drawing surface that you can program with JavaScript.  Audio & Video: You can embed audio or video on your webpages without resorting to third-party plugins.

See more

The list of books you might like

Upgrade Premium
Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.
DMCA & Copyright: Dear all, most of the website is community built, users are uploading hundred of books everyday, which makes really hard for us to identify copyrighted material, please contact us if you want any material removed.
Copyright @ PDFdrive.to, 2022 | We love our users