html5 project.pptx

1. Introduction Of HTML And HTML5 DY Patil University Pune, Ambi MCA Department Subject :- Essentials Of IT

2. Introduction To HTML HTML was originally developed at CERN (Conseil Européen pour la Recherche Nucleaire (European Organization for Nuclear Research) by Tim Berners-Lee in 1991.

3. HTML is not a programming language. It's a markup language. In fact, that is the technology's name: Hyper Text Markup Language. Hypertext defines the link between the web pages. A markup language is used to define the text document within tag which defines the structure of web pages. HTML stands for Hyper Text Mark-up Language. HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page. HTML consists of a series of elements,HTML elements tell the browser how to display the content HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

4. Example Explained :- The <!DOCTYPE html> declaration defines that this document is an HTML5 document The <html> element is the root element of an HTML page The <head> element contains meta information about the HTML page The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. The <h1> element defines a large heading. The <p> element defines a paragraph What is WWW :- The World Wide Web (WWW) is a network of online content that is formatted in HTML and accessed via HTTP. The term refers to all the interlinked HTML pages that can be accessed over the Internet. All HTML documents must start with a document type declaration: <!DOCTYPE html>.The HTML document itself begins with <html> and ends with </html>.The visible part of the HTML document is between <body> and </body> Common HTML:-

5. W3C WWW (World Wide Web) :- WWW is a huge collection of pages of information link with each other around the globe. Every page is a combination of text, pictures, audios, videos, animation and hyperlink etc. Tim Berners Lee is a father of www. W3C (World Wide Web Consortium) :- 1) Consortium is a community or a type of organization in which many companies come together and work on www. 2) W3C do not have a single headquarter.

6. Institutes of W3C :- 1) MIT in Cambridge, USA 2) Keio University in Tokyo, Japan 3) ERCIUM in France 4) Beijing University in Beijing, China Invention :- 1) Tim Berners Lee had invented the web. 2) He put a proposal to www in 1989. 3) He proposed to put some protocols on the www for the security, development and growth. Characteristics of W3C :- 1) Ensures the growth and development of website. 2) Develop standard for web scripting web application and other dynamics. 3) W3C uses the principle of simplicity, modularity and extensibility designing the web protocols.

7. Introduction To HTML5 HTML is Designed By Time Berners Lee in 1991. HTML is Maintained By W3C (WORLD WIDE WEB CONSORTISM). From 1991 to 1999 Many HTML Specification Were Released By W3C From HTML 1 to HTML 4. In 2004 WHATWG (WEB Hypertext Application Technology Working Group) a Group Of Experts started Observation on “how Web Designers or Developers are Developing Web Sites”. They Observed: Pattern Of Using Tags, Attributes ,Styles ,Class Value ,etc. Based On The Observation In 2008 WHATWG Released First Public Working Group. This Specification Defines New Features, New Tags, Removed Tags, Deprecated Tags / Attributes in Fifth Version Of HTML. In Model HTML Everything Should Be Syntactically and Semantically Meaningful To The Users and User Agents.

8. What Is HTML5 HTML Stands For (HYPERTEXT MARKUP LANGUAGE).and Then What Is HTML5 ? HTML5 Is Latest Specification Of HTML We Known That HTML Is Designed By Time Berners Lee In 1991. & HTML Maintained By W3C. Some New Deprecated Tags :- <header><nav><section><article><aside><footer><figcaption><figure><progress><c anvas><audio><source><track><video><hgroup> Remove Tags From HTML5:- <frameset> <big> <center> <strike> <No frame> <dir> Note :- HTML5 is a Latest Revision Or Latest Specification Of HTML. In 2014 HTML5 Is Released as Stable W3C Recommendation. 1. HTML5 Emphasizes On Creating Web Pages and Web Application , Which are Syntactically and Semantically Consistent and Meaningful To Users(Web Designers & Developers) As Well User Agents(Web Browsers). 2. HTML5 is still in the development phase; therefore, it might appear that a few features that worked before are not working now. Thus developers need to stay updated while using HTML5.

9. Features Of HTML5 With Audio and Video tags, developers can embed videos or audio into their websites. For styling the video tag, developers can use CSS and CSS3. 1) Audio & Video Tags :- Example :-

10. 2) Header :- The <header> element in HTML5 contains introductory content. It can include a set of introductory or navigational support on a website. Typically, the header element contains heading elements, logo or icons, a search form, author’s information, etc. Example:- 3) Footer :- The <footer> tag defines the footer of a document or a section. Typically, the footer contains information related to the author, copyright, contact information, sitemap, related documents, back to top links, etc. There can be more than one footer element in one document.

11. Example:- 4) Canvas Tag :- The canvas tag in HTML5 helps users draw graphics or images on the fly using JavaScript. We can use it for drawing paths, boxes, circles, adding images, etc. The canvas tag has two attributes: width and height for setting the width and height of the canvas. Example :-

12. 5) Mark :- The <mark> element highlights a particular text that is of special interest to the user in an HTML document. Example:- 6) Main Tag :- This tag defines the important content of the <body> of a d document. Example:-

13. 7) Progress Tag :- The progress tag helps users check the progress of a task during the execution. Users will need to define the dynamically changing values of the progress bar with the scripts (JavaScript). Example:- 8) Section Tag :- The <section> element defines specific sections and subsections in the document. Example:-

14. Introduction Of Web 2.0 And Web 3.0 Introduced in 2003-04 which is commaly used to encompass various novel phenomena on the world wide web. web 2.0 are popular type site allow its user to create their pages with a unique URL Website with interaction :- A website that communicate and allows for interaction with users. Read and write web :- The read/write web means that ordinary people can easily published their 2cents to the world wide web. Social web :- Blogs, wikis, Social Media, Video . Web 2.0

15. Advantages :- 1) Available at anytime any place 2) Variety of media 3) Easy to use 4) Dynamic 5) Real-time discussion Disadvantages :- 1) Information overload Too much information is daily posted by many people with different thoughts 2) Too many fake ids and spammers 3) Hackers commit crimes

16. The term web3.0 was coined by Polka dot founder & Ethereum Co-founder Gavin wood in 2014, referring to a "decentralized online ecosystem based on block chain. Web 3.0 Read write execute :- It is a version of web that gives users . The power to create & execute tools & Software rather than depending on other People for software. Semantic Web:- The term "semantic web" refers to WBC's Vision of the web of linked data Semantic web technologies enable people to Create data stores on the web, & write rules for handling data. Computer Can interpret information like human. Semantic searching knowledge Bases Artificial al intelligence, machine learning & machine to machine communication.

17. Crypto Currency :- Web 3.0 crypto coins are Cryptocurrencies that secure blockchain project that run on smart contracts over the internet. Ethereum slowly becoming the foundation of web 3. There is no possibility of web 3 without Ethereum... Ethereum is the base layer or Code that allows web 3 to function as Java script or HTML is for web 2.0

18. 3) Transparency :- The decentralized web will enable int users to track their data & look over the source code of platforms they decide to utilize. You will not need to rely on d middle man for access to this data. 4) Personalized web surfing experience! it will offer a more personalized internet Surfing experience as website will be better able to recognize our preferences web appl analyze our internet usage & habits to custo-mize themselves to fit best to our device, location etc. 2) Fewer Intermediaries :- Block chain based web s will connect Companies directly with customers. While the need fox adequate rules & regulations to monitor fairness will be there, we will see a Shift towards trustless & decentralized network, instead of centralized institution. 1) Data Ownership :- You will able to choose what information you want to share with business & advertising companies & make money from it Advantage :- How if Ethereum related to Web 3? Ethereum, refers to decentralized apps that gun on the blockchain apps that run on the blockchain. These apps that allow anyone to participate without monetizing their Personal data..

19. Disadvantage :- 1) It may be a bit Complicated to understand for beginners. 2) Difficult To Regulate :- Some experts also believe that decentralization will lead to difficulties in monitoring & regulating web 3. As a result, we could See arise in cybercrimes 3) Various technologies such as blockchain AI, and machine learning power Web 3. it will make Use of semantic data, 3d graphics & more likely less advanced devices will not be able to handle web 3. 4) Easy access to user's personal and public data webs is huge & interconnected, which is why it is easier for anyone to gain access to the public & private data that you share online.

20. What is the WHATWG The Web Hypertext Application Technology Working Group (WHATWG) is a community of people interested in evolving HTML and related technologies. The WHATWG was founded by individuals from Apple Inc., the Mozilla Foundation and Opera Software, leading Web browser vendors, in 2004. The central organizational membership and control of WHATWG today – its "Steering Group" – consists of Apple, Mozilla, Google, and Microsoft. WHATWG community members work with the editor of the specifications to ensure correct implementation.

21. On the HTML document you have often seen that there is a <!DOCTYPE html> declaration before the <html> tag. HTML <!DOCTYPE> tag is used to inform the browser about the version of HTML used in the document. It is called as the document type declaration (DTD). Technically <!DOCTYPE > is not a tag/element, it just an instruction to the browser about the document type. It is a null element which does not contain the closing tag, and must not include any content within it. HTML <!DOCTYPE> Supporting Browsers :- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> The syntax in HTML 4.01 Transitional is :-

22. Example:-

23. Getting Started With HTML5 In this tutorial you will learn how easy it is to create an HTML document or a web page Creating Your First HTML Document :- Let’s walk through the following steps:- Step 1: Creating The HTML file :- Open your computer visual studio code editor and create a new file. Step 2: Start with an empty window and type the following code :- Step 3: Saving the file :- Now save the file on your desktop as “filename.html”.

24. Support For Legacy Browsers Legacy browsers, by which we usually mean older versions of Internet Explorer , don't support HTML5 and therefore are unable to understand any of the HTML5 code in the previous examples. In order to serve the same audio/video content to these browsers, it is also possible to provide a fallback such as a third-party plugin (for example Adobe Flash) or even a simple link to the media file in question for the user to download: Older versions of Internet Explorer will simply ignore the audio and source elements in the example above and only display the download link. An alternative Flash player could also be provided in place or in addition to the download link, and this would be used instead. What is Legacy Browser Support :- Legacy Browser Support is a feature in Chrome that can help you automatically redirect designated legacy sites and applications that need to be accessed via legacy browsers.

25. Structure Of Web Page A basic HTML page starts with the Document Type Declaration or doctype. That is a way to inform the browser what type of document it is. The doctype is always the first item at the top of any HTML file. Then sections and subsections come, each possibly has its heading and subheading. These heading and sectioning elements help the reader to perceive the content meaning.

26. There are generally two types of tags in HTML :- 1.Paired Tags: These tags come in pairs. That is they have both opening(< >) and closing(</ >) tags. 2.Empty Tags: These tags do not require to be closed. <html> is a root element of html. It’s a biggest and main element in complete html language, all the tags , elements and attributes enclosed in it or we can say wrap init , which is used to structure a web page. <html> tag is parent tag of <head> and <body> tag, other tags enclosed within <head> and <body>. In <html > tag we use “lang” attributes to define languages of html page such as <html lang=”en”> here en represents English language. some of them are : es = Spanish , zh-Hans = Chinese, fr = French and el = Greek etc. 1) The <html> element :- Example:- <!DOCTYPE html> <html lang="en"> > <head> <title> HTML Tag </title> </head> <body> </body> </html>

27. 2) The <head> section :- The HTML <head> tag is used for indicating the head section of the HTML document. The <head> element contains metadata (document title, character set, styles, links, scripts), specific information about the web page that is not displayed to the user. Example:- <meta name="description" content="Free Web tutorials"> <link rel="stylesheet" href="styles.css"> <title>HTML Elements Reference</title> 3) The <body> element :- HTML <body> tag defines the main content of an HTML document which displays on the browser. It can contain text content, paragraphs, headings, images, tables, links, videos, etc. The <body> must be the second element after the <head> tag or it should be placed between </html> tags. This tag is required for every HTML document and should only use once in the whole HTML document. <!DOCTYPE html> <html> <head> <title>Body Tag</title> </head> <body> <h2>Example of body tag</h2> </body> </html> Example:-

28. Example:- 4) The <header> Element :- The <header> tag in HTML is used to define the header for a document or a section as it contains the information related to the title and heading of the related content. It usually contains introductory content the main heading of your page or heading on a article of your page a Logo, Search Bar, Form, Navigation Bar and other element <!DOCTYPE html> <html> <body> <header> <h1>A heading here</h1> <p>Some additional information here</p> </header> </body> </html> The <h1>-<h6> heading elements are used to give a short description about the coming section. <h1> is considered to the the most important, and <h6> the least important one. 5) Headings (h1-h6 Elements) :-

29. Example:- The <footer> tag in HTML is used to define a footer of HTML document. This section contains the footer information (author information, copyright information, carriers, etc). The footer tag is used within the body tag. The <footer> tag is new in the HTML5. The footer elements require a start tag as well as an end tag. 6) The Footer Element :- <body> <h1>First-level heading</h1> <h2>Second-level heading</h2> </body> <html> <body> <footer> <a href="https://www.geeksforgeeks.org/about/">About Us</a>| <a href="https://www.geeksforgeeks.org/privacy-policy/">Privacy Policy</a>| <a href="https://www.geeksforgeeks.org/careers/">Careers</a> <p>Here use footer</p> </footer> </body> </html> Example:-

30. The idea behind feature detection is that you can run a test to determine whether a feature is supported in the current browser, and then conditionally run code to provide an acceptable experience both in browsers that do support the feature, and browsers that don't. If you don't do this, browsers that don't support the features you are using in your code may not display your sites properly or might fail altogether, creating a bad user experience. Feature Detection If you’re building a Web site, you don’t just want it to look terrific today. you want it to dazzle for a long time to come. That means your site has to work not only in today’s browsers, but also in future versions.

31. At the moment, the best way to detect HTML5 and CSS3 features are by using 3rd party Javascript libraries such as Modernizr. Modernizr does not try to detect the browser but it detects certain features. You can download Modernizr at http://modernizr.com/download/ and actually pick and choose what features you want to search for and it will generate a Javascript file to include in your HTML5 website. Once implemented you would use simple programming such as the lines below if(document.querySelector){ element = document.querySelector(selectors); } Modernizr

32. All you need to do is download the file, include it in your <head> section and add class="no-js" to your <html> tag <!DOCTYPE html> <html class="no-js"> <head><meta charset="utf-8"> <title>HTML 5 and CSS3 Test Page</title> <script src="modernizr-2.0.6.min.js"> </script> </head> How Do We Implement Modernizr? Modernizr creates properties for all of the features that it tests for. You can refer to these properties to check whether the browser supports the object and its properties.Here is an example that checks to see if canvas is supported. if (Modernizr.canvas) { // Yes, canvas is supported }else{ // No, canvas is not supported } Testing For Object & Properties

33. Page Encoding Element Character Encoding Of HTML :- Character encoding is a method of converting bytes into characters. To validate or display an HTML document properly, a program must choose a proper character encoding. There are three different Unicode character encodings: UTF-8, UTF-16 and UTF-32 UTF is stand for Unicode Transformation Format 1) UTF-8 :- A Unicode Translation Format that comes in 8-bit units that is, it comes in bytes. A character in UTF8 can be from 1 to 4 bytes long, making UTF8 variable width.

34. 2) UTF-16 :- A Unicode Translation Format that comes in 16-bit units that is, it comes in shorts. It can be 1 or 2 shorts long, making UTF16 variable width. 3) UTF-32 :- A Unicode Translation Format that comes in 32-bit units that is, it comes in longs. It is a fixed-width format and is always 1 "long" in length.

35. HTML Elements An HTML file is made of elements. These elements are responsible for creating web pages and define content in that webpage. An element in HTML usually consist of a start tag <tag name>, close tag </tag name> and content inserted between them. Technically, an element is a collection of start tag, attributes, end tag, content between them. For the default display and styling purpose in HTML, all the elements are divided into two categories :-  Block-level element  Inline element Block-Level Element :-  These are the elements, which structure main part of web page, by dividing a page into coherent blocks.  A block-level element always start with new line and takes the full width of web page, from left to right.  These elements can contain block-level as well as inline elements.

36. Following are the block-level elements in HTML :- <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>. <!DOCTYPE html> <html> <head> </head> <body> <div style="background-color: lightblue">This is first div</div> <div style="background-color: lightgreen">This is second div</div> <p style="background-color: pink">This is a block level element</p> </body> </html> Output: In the above example we have used tag, which defines a section in a web page, and takes full width of page. We have used style attribute which is used to styling the HTML content, and the background color are showing that it's a block level element. Example:-

37. Inline Elements :-  Inline elements are those elements, which differentiate the part of a given text and provide it a particular function.  These elements does not start with new line and take width as per requirement.  The Inline elements are mostly used with other elements. <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>. <!DOCTYPE html> <html> <head> </head> <body> <a href="https://www.javatpoint.com/html-tutorial">Click on link</a> <p>This will take width of text only</p> </body> </html> Example:- Output :-

38. The deprecated tags or attributes are those attributes which are replaced by some other attributes. The tag or attributes deprecated when the same attributes is achieved by some other way. The following elements are not available in HTML5 anymore- 1) <basefont> tag - basefont sets the default font family, font size, and color of all the text context in an HTML document. It is applied to all of the document’s content. Eg – <!DOCTYPE html> <html> <head> <title>Basefont tag</title> <basefont color="blue" size="5" face="arial"> </head> <body> <h2>Example of Basefont tag</h2> <p>The basefont tag is not supported in HTML5 use CSS to style the document</p> </body> </html> Deprecated elements

39. 2) <blink> tag -The HTML blink tag is a non-standard element of HTML that helps to flash or gently blink a text or set of text in a web browser. <html> <head> <title> Here is an example of Blink Element of HTML </title> <style> blink { color: #2d38be; font-size: 15px; font-weight: bold; } </style> </head> <body> <h1> About HTML BLINK Tag</h1> <blink> HTML blink tags are not used these days and are not supported by most browsers. </blink> <p> See the effect above </p> </body> </html> We can use CSS alternative – <style> body{ font-family: cursive; color: green; font-size: 20px; } </style>

40. !DOCTYPE html> <html> <head> <title>Blinking feature using CSS</title> <style> .blink { animation: blinker 1.5s linear infinite; color: red; font-family: sans-serif; } </style> </head> <body> <p class="blink"> This is an example of blinking text using CSS. </p> </body> </html>

41. 3) <dir> tag :- The <dir> element was used for listing or wrapping contents in a directory. It was basically used to contain directory titles. The items wrapped in <dir> are normally <li> elements. We can use <ul> or <ol> instead of <dir> tag – <dir> <li>I am one</li> <li>I am two</li> </dir> <strike>Using the strike element</strike>  <p>Creating same effect with CSS</p> <style> p{ text-decoration: line-through; }</style>

42. Deprecated attributes- 1) Bgcolor :- The HTML bgcolor attribute is used to set the background color of an HTML element. Bgcolor is one of those attributes that has become deprecated with the implementation of Cascading Style Sheets. This attribute is deprecated from <body>, <table>, <table> etc. Eg – <body text="green" bgcolor="orange"> In HTML5, we use a CSS property called background-color instead of Bgcolor attribute – body {background-color: coral;} 2) text :- The HTML <body> text Attribute is used to define a color for the text in the Document. The <body> text attribute is not supported by HTML5. Instead of using this attribute, we can use css color property. Eg- <body text="color_name | rgb_number"> But in HTML5 we can this through CSS Body{ color:blue; } h1{ Color:green;

43. 3) align :- The align Attribute in HTML is used to specify the alignment of text content of The Element. Eg – <!DOCTYPE html> <html> <head> <title> HTML p align Attribute </title> </head> <body> <h2>HTML p align Attribute</h2> <p align="left"> Left align content </p> <p align="center"> center align content </p> <p align="right"> Right align content </p> </body> </html> We can do this through CSS :- The text-align property in CSS is used for aligning the inner content of a block element. p { text-align: center;}

44. 4) Background :- The background attribute in the HTML document is used to specify the background image on a web page. You can pass the path of an image as a value of background attribute to set the image. Eg – <body background="Images/mountain.jpg"> In HTML5 it’s done through CSS as – <style> body{ background-image : url('Images/mountain.jpg’); } </style>

45. HTML5 features include native audio and video support without the need for Flash. The HTML5 <audio> and <video> tags make it simple to add media to a website. You need to set src attribute to identify the media source and include a controls attribute so the user can play and pause the media. Embedding Video :- Here is the simplest form of embedding a video file in your webpage <video src = "foo.mp4" width = "300" height = "200" controls> Your browser does not support the <video> element. </video> The current HTML5 draft specification does not specify which video formats browsers should support in the video tag. But most commonly used video formats are :-  Ogg :- Ogg files with Thedora video codec and Vorbis audio codec.  mpeg4 :- MPEG4 files with H.264 video codec and AAC audio codec. The State Of Web Audio And Video

46. <!DOCTYPE HTML> <html> <body> <video width = "300" height = "200" controls autoplay> <source src = "/html5/foo.ogg" type ="video/ogg" /> <source src = "/html5/foo.mp4" type = "video/mp4" /> Your browser does not support the <video> element. </video> </body> </html> Video Attribute Specification :- The HTML5 video tag can have a number of attributes to control the look and feel and various functionalities of the control − You can use <source> tag to specify media along with media type and many other attributes. A video element allows multiple source elements and browser will use the first recognized format Output :-

47. Sr.No Attribute & Description 1) Autoplay This Boolean attribute if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data. 2) Autobuffer This Boolean attribute if specified, the video will automatically begin buffering even if it's not set to automatically play. 3) Controls If this attribute is present, it will allow the user to control video playback, including volume, seeking, and pause/resume playback. 4) Height This attribute specifies the height of the video's display area, in CSS pixels

48. 5) Loop This Boolean attribute if specified, will allow video automatically seek back to the start after reaching at the end 6) Preload This attribute specifies that the video will be loaded at page load, and ready to run. Ignored if autoplay is present. 7) Poster This is a URL of an image to show until the user plays or seeks. 8) SRC The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed. 9) Width This attribute specifies the width of the video's display area, in CSS pixels

49. Embedding Audio :- HTML5 supports <audio> tag which is used to embed sound content in an HTML or XHTML document as follows. <audio src = "foo.wav" controls autoplay> Your browser does not support the <audio> element. </audio> The current HTML5 draft specification does not specify which audio formats browsers should support in the audio tag. But most commonly used audio formats are ogg, mp3 and wav. You can use <source&ggt; tag to specify media along with media type and many other attributes. An audio element allows multiple source elements and browser will use the first recognized format − !DOCTYPE HTML> <html> <body> <audio controls autoplay> <source src = "/html5/audio.ogg" type = "audio/ogg" /> <source src = "/html5/audio.wav" type = "audio/wav" /> Your browser does not support the <audio> element. </audio> </body> </html> Output :-

50. Audio Attribute Specification :- The HTML5 audio tag can have a number of attributes to control the look and feel and various functionalities of the control − Sr.No Attribute & Description 1) Autoplay This Boolean attribute if specified, the audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data. 2) Autobuffer This Boolean attribute if specified, the audio will automatically begin buffering even if it's not set to automatically play. 3) Controls If this attribute is present, it will allow the user to control audio playback, including volume, seeking, and pause/resume playback.

51. 4) Loop This Boolean attribute if specified, will allow audio automatically seek back to the start after reaching at the end. 5) Preload This attribute specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present. 6) SRC The URL of the audio to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed.

52. HTML5 element <canvas> gives us an easy and powerful way to draw graphics using JavaScript. It can be used to draw graphs, make photo compositions or do simple animations. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. Here is a simple <canvas> element which has only two specific attributes width and height plus all the core HTML5 attributes like id, name etc. Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. To add a border, use the style attribute. How to create a HTML canvas? A canvas is a rectangle like area on an HTML page. It is specified with canvas element. By default, the <canvas> element has no border and no content, it is like a container. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas> HTML5 CANVAS

53. <!DOCTYPE HTML> <html> <head> <style> #mycanvas{border:1px solid red;} </style> </head> <body> <canvas id = "mycanvas" width = "100" height = "100"></canvas> </body> </html> Let us see a simple example on using <canvas> element in HTML5 document.

54. SVG(Scalable vector graphics) :-  These are images created by a markup language that are reusable, simple, high- quality standalone images that can be exported and imported as well.  They are cross-browser friendly and can be used both on the client-side and server- side of the application.  They can be manipulated to create animations, hybrid images, etc by editing the markup language or by editing using a stylesheet.  Files come with a .svg extension. PNG (Portable Network Graphics) :-  They are portable, static and lossless with proper indexed-color control.  Files come with a .png or .PNG extension.  Cross-browser friendly and have streaming capabilities. OVERVIEW OF GRAPHICS IN THE BROWSER

55. JPG or JPEG (Joint Photographic Experts Group):  Lossy compressed with an adjustable degree of compression.  Used mainly with digital photography and can achieve a compression of 10:1.  Files come with a .jpg or jpeg extension.  This is a type of language mainly used for designing and HTML and SVG elements by using code.  They are scalable and give more space for creativity to the user.  Files usually come with a .css extension. CSS (Cascading Style Sheets):

56.  SVG has better scalability. So it can be printed with high quality at any resolution  SVG gives better performance with smaller number of objects or larger surface.  SVG can be modified through script and CSS.  SVG is vector based and composed of shapes.  Canvas has poor scalability. Hence it is not suitable for printing on higher resolution  Canvas gives better performance with smaller surface or larger number of objects.  Canvas can be modified through script only.  Canvas is raster based and composed of pixel. SVG Vs HTML CANVAS SVG HTML CANVAS

57.  A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content. <canvas id="myCanvas" width="200" height="100"></canvas>  To add a border, use the style attribute.  The HTML <form> element is used to create an HTML form for user input: <form> Form Elements </form>  The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc. Using A Canvas The <form> Element :-

58. • <input type="text"> Displays a single-line text input field • <input type="radio"> Displays a radio button • <input type="checkbox"> Displays a checkbox • <input type="submit"> Displays a submit button • <input type="button"> Displays a clickable button The <input type="text"> defines a single-line input field for text input. Text Fields :- <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form> The <input> Element :-  The HTML <input> element is the most used form element.  An <input> element can be displayed in many ways, depending on the type attribute.

59. Checkboxes :- The <input type="checkbox"> defines a checkbox. <form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label> </form> The Submit Button :- <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> The <input type="submit"> defines a button for submitting the form data to a form-handler. The form-handler is specified in the form's action attribute

60. • The canvas paths allow you to draw custom shapes. • In HTML5 canvas, a path consists of a list of zero or more subpaths. • Each subpath contains one or more locations connected by straight lines or curves. fill(): The fill() method fills the current drawing (path). The default color is black. stroke() : The stroke() method actually draws the path. beginPath() : The beginPath() method begins a path, or resets the current path. closePath(): The closePath() method creates a path from the current point back to the starting point. Working With Canvas Path

61. Use beginPath() method to start drawing the path. Draw the path that makes a shape using lines, curves and other primitives. After creating the path, call fill() method to fills subpaths by using the current fill style or stroke() method to render the strokes of the current subpath by using the current stroke styles. Your shape will not be visible until you call fill() or stroke() methods. The following web document uses the beginPath() method to draw two paths by using different colors. At the end it uses closePath() method to close the current subpath. <!DOCTYPE html> <html> <head> <title>Sample arcs example</title> </head> <body> <canvas id="myCanvas" width="300" height="600"></canvas> <script> Now call closePath() method to close the current subpath and starts a new subpath that has a start point that is equal to the end of the closed subpath

62. var canvas = document.getElementById("myCanvas"); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.beginPath(); // Start a new path. ctx.lineWidth = "3"; Output ctx.strokeStyle = "green"; // This path is green. ctx.moveTo(0, 0); ctx.lineTo(160, 160); ctx.lineTo(200, 160); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = "blue"; // This path is blue. ctx.moveTo(0, 0); ctx.lineTo(50, 170); ctx.stroke(); ctx.closePath(); // Close the current path } </script> </body> </html> A(0,0)

63. Many updates are come in the html5. In the html5 we draw the straight line. Drawing Circles or Arcs. with the help of the canvas our work get easy and we can also save the lot of time. With the updated feature of the html5 we can also draw the different type of the text. Image etc.with the help of the canvas we can also transformas and translation rotation scaling. Now we can see the straight line. The canvas element (new to HTML5) is used to draw 2D graphics into an HTML document. Using Javascript you can draw a wide range of objects into an HTML canvas such as lines, text, images and shapes using several built in functions Drawing Straight Lines

64. The arc() is a method of the canvas 2D API. The arc() method allows you to draw a circular arc. Syntax Following is the syntax to draw a circle with arc() in HTML5arc(x, y, radius, start Angle, end Angle)arc(x, y, radius, start Angle, end Angle, counterclockwise)The arc() method generates a circular arc with a radius of radius, centered at (x, y). The path moves in the counter clockwise direction and begins at start Angle and finishes at end Angle (defaulting to clockwise).Example 1In the following example we are using arc() to draw a circle on our canvas. for getting full circle we have to mention start angle as 0,end angle as 360. <!DOCTYPE html> <html> <body> <canvas id="Varma" width="300" height="150"></canvas> <script> var c = document.getElementById("Varma"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(100, 75, 50, 0, 360); ctx.stroke(); </script> </body> </html>

65. 1) beginPath() :- This method resets the current path. 2) moveTo(x, y) :- This method creates a new subpath with the given point. 3) closePath() :- This method marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath. 4) fill() :- This method fills the subpaths with the current fill style. 5) stroke() :- This method strokes the subpaths with the current stroke style. 6) lineTo(x, y) :- This method adds the given point to the current subpath, connected to the previous one by a straight line. Line Methods We require the following methods to draw lines on the canvas :-

66. <!DOCTYPE HTML> <html><head><style> #test { width: 100px; height:100px; margin: 0px auto; } </style> <script type = "text/javascript"> function drawShape() { // get the canvas element using the DOM( Document object model) var canvas = document.getElementById('mycanvas’); // Make sure we don't execute when canvas isn't supported if (canvas.getContext) { // use getContext to use the canvas for drawing var ctx = canvas.getContext('2d’); // Filled triangle Live Demo Example Following is a simple example which makes use of the above-mentioned methods to draw a triangle.

67. ctx.beginPath(); // Stroked triangle ctx.moveTo(125,125); ctx.lineTo(125,45); ctx.lineTo(45,125); ctx.closePath(); ctx.stroke(); } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); } } </script> </head> <body id = "test" onload = "drawShape();"> <canvas id = "mycanvas"></canvas> </body> ctx.beginPath(); ctx.moveTo(25,25); ctx.lineTo(105,25); ctx.lineTo(25,105); ctx.fill();

68. Following is an example code which draws a circle using HTML5 canvas. The functions “context.beginPath()”, “context.arc()”, “context.fill()” and “context.stroke()” used within a JavaScript function draws a circle filled with pink color, which was embedded within the canvas element written within the HTML5 code. <canvas height="300" id="canvas" width="300"> <b>Canvas Not Supported By This Browser</b> </canvas> <script type="text/javascript"> var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); context.fillStyle="pink"; context.beginPath(); context.arc(150,150,100,0,Math.PI*2,true); context.fill(); context.stroke(); </script> DRAWING CIRCLE USING HTML5 CANVAS

69. In the Html5 , canvas element endorses basics text rendering on a line- by line basics. The canvas text rendering framework provides two methods fillText() and strockText() to draw text on canvas. we can use front property (type :string) to identify several text settings such as size font style and wight. The style can be italic bold and normal. FillText() :- The fillText() technique is used to render fill the text to the canvas by using the existing fill style and Font. The text is the rendered using the font and text layout design as defined by the font ,textAlign, textBaseline, and direction properties. Drawing Text

70. In the html5 we use drawImage() method for the drawing an image On the canvas. This method also draws parts of an image and increase or decrease the size. Drawing Images

71. The transform() method is used to alter the transformation matrix of the present context. This process shifts the transformation matrix to use the matrix provided by the arguments. Syntax:- Context.transform(a,b,c,d,e,f); Understanding Transforms

72. Translation Translate() transform method is use to translate the html5 canvas context. Html5 canvas offers translate (x,y) process to move the canvas and its origin to a distinct point in the grid The translate () method remaps the (0,0) position on the canvas. Rotation The rotate() method rotates the present drawing . We can use the rotate()transform technique to route the drawing . HTML5 canvas offers Route (angle)process to route the canvas around the exiting origin. Syntax-context.rotate(angel);

73. SCALING Canvas scale used to scale the current drawing and draw enlarged shapes or scaled down shapes and bitmaps. Html5 canvas offer scale (x.,y) method to decrease the units in a canvas grid. This process brings two parameters (x,y) where x is the scale factor in the horizontal way and y is the scale factor in the vertical way These two parameter should be positive number. Syntax- Context.scale(scalewidth, scaleheight);

html5 project.pptx

You are reading a preview.

Check these out next

html5 project.pptx

More Related Content

Similar to html5 project.pptx (20)

Recently uploaded (20)

html5 project.pptx