{"id":763,"date":"2023-08-27T16:50:44","date_gmt":"2023-08-27T11:20:44","guid":{"rendered":"https:\/\/moodle.sit.ac.in\/blog\/?p=763"},"modified":"2024-05-13T23:39:27","modified_gmt":"2024-05-13T18:09:27","slug":"intro-to-web-programming-lab-manual-for-vtu-bplck105a-205a","status":"publish","type":"post","link":"https:\/\/moodle.sit.ac.in\/blog\/intro-to-web-programming-lab-manual-for-vtu-bplck105a-205a\/","title":{"rendered":"Intro to Web\u00a0Programming Lab Manual for VTU (BPLCK105A\/205A)"},"content":{"rendered":"\n<p><a href=\"https:\/\/vtu.ac.in\/\" title=\"VTU\">VTU<\/a> has recently launched an exciting new subject called &#8220;<a href=\"https:\/\/vtu.ac.in\/pdf\/2022syll\/BPLCK105A.pdf\" title=\"Introduction to Web Programming\">Introduction to Web Programming<\/a>&#8221; (Sub Code: <strong>BPLCK105A\/205A<\/strong>) exclusively for first-year students. This comprehensive course incorporates an integrated lab component, providing hands-on experience. I am delighted to present the initial version of the lab manual, which includes meticulously crafted solutions and sample outputs for all the lab programs. As we progress, we plan to enrich this manual with additional documentation and algorithms. It is our vision to foster collaboration and knowledge sharing, so we invite anyone to contribute and freely distribute this manual under the <a href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/4.0\/\" title=\"Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License\">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License<\/a>.<\/p>\n\n\n\n<p>To those who are interested in contributing, we have set up a dedicated platform for collaboration. You can find the repository for the lab manual at <a href=\"https:\/\/gitlab.com\/lab_manuals\/web_22plc15a_repo_vtu_2022_23\">https:\/\/gitlab.com\/lab_manuals\/web_22plc15a_repo_vtu_2022_23<\/a>. This repository serves as a hub for sharing ideas, making improvements, and expanding the content. We welcome your valuable contributions to enhance the learning experience for all. Let&#8217;s work together to create a comprehensive resource that benefits the entire community.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Syllabus<\/h3>\n\n\n\n<div data-wp-interactive=\"core\/file\" class=\"wp-block-file\"><object data-wp-bind--hidden=\"!state.hasPdfPreview\" hidden class=\"wp-block-file__embed\" data=\"https:\/\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/BPLCK105A.pdf\" type=\"application\/pdf\" style=\"width:100%;height:600px\" aria-label=\"Embed of BPLCK105A Syllabus.\"><\/object><a id=\"wp-block-file--media-b9554e43-6dfb-439a-b85b-df8138db3aa3\" href=\"https:\/\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/BPLCK105A.pdf\">BPLCK105A Syllabus<\/a><a href=\"https:\/\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/BPLCK105A.pdf\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-b9554e43-6dfb-439a-b85b-df8138db3aa3\">Download<\/a><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/10\/CodingAd.png?ssl=1\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Web&nbsp;Programming Lab (<strong>BPLCK105A\/205A<\/strong>)<\/h2>\n\n\n\n<p>You can go to the solutions of each question using the links below.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"#P01\" title=\"Question 01 - XHTML Page\">Question 01 &#8211; XHTML Page<\/a><\/li>\n\n\n\n<li><a href=\"#P02\" title=\"Question 02 - XHTML Tables\">Question 02 &#8211; XHTML Tables<\/a><\/li>\n\n\n\n<li><a href=\"#P03\" title=\"Question 03 - HTML5\">Question 03 &#8211; HTML5<\/a><\/li>\n\n\n\n<li><a href=\"#P04\" title=\"Question 04 - HTML5 Semantic Tags\">Question 04 &#8211; HTML5 Semantic Tags<\/a><\/li>\n\n\n\n<li><a href=\"#P05\" title=\"Question 05 - Classes\">Question 05 &#8211; Classes<\/a><\/li>\n\n\n\n<li><a href=\"#P06\" title=\"Question 06 - li Tag\">Question 06 &#8211; li Tag<\/a><\/li>\n\n\n\n<li><a href=\"#P07\" title=\"Question 07 - Signup Page\">Question 07 &#8211; Signup Page<\/a><\/li>\n\n\n\n<li><a href=\"#P08\" title=\"Question 08 - Calculator\">Question 08 &#8211; Calculator<\/a><\/li>\n\n\n\n<li><a href=\"#P09\" title=\"Question 09 - Scrolling Text\">Question 09 &#8211; Scrolling Text<\/a><\/li>\n\n\n\n<li><a href=\"#P10\" title=\"Question 10 - Overlapping Images\">Question 10 &#8211; Overlapping Images<\/a><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Solutions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\">Question 01<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"P01\">XHTML Page<\/h3>\n\n\n\n<p><strong>Create an XHTML page using tags to accomplish the following:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>A paragraph containing text \u201cAll that glitters is not gold\u201d. Bold face and italicize this text<\/li>\n\n\n\n<li>Create equation: x = 1\/3(y<sub>1<\/sub><sup>2<\/sup> + z<sub>1<\/sub><sup>2<\/sup> )<\/li>\n\n\n\n<li>Put a background image to a page and demonstrate all attributes of background image<\/li>\n\n\n\n<li>Create unordered list of 5 fruits and ordered list of 3 flowers<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">HTML Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;\n&lt;!DOCTYPE html PUBLIC &quot;-\/\/W3C\/\/DTD XHTML 1.1\/\/EN&quot; &quot;http:\/\/www.w3.org\/TR\/xhtml11\/DTD\/xhtml11.dtd&quot;&gt;\n&lt;html xmlns=&quot;http:\/\/www.w3.org\/1999\/xhtml&quot; xml:lang=&quot;en&quot;&gt;\n&lt;head&gt;\n&lt;title&gt;SAMPLE XHTML PAGE&lt;\/title&gt;\n&lt;meta name=&quot;author&quot; content=&quot;Putta&quot; \/&gt;\n&lt;meta name=&quot;date&quot; content=&quot;2023-02-17T04:15:01+0530&quot; \/&gt;\n&lt;meta http-equiv=&quot;content-type&quot; content=&quot;text\/html; charset=UTF-8&quot;\/&gt;\n&lt;meta http-equiv=&quot;content-type&quot; content=&quot;application\/xhtml+xml; charset=UTF-8&quot;\/&gt;\n&lt;meta http-equiv=&quot;content-style-type&quot; content=&quot;text\/css&quot;\/&gt;\n&lt;meta http-equiv=&quot;expires&quot; content=&quot;0&quot;\/&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;style&gt;\nbody {\n  background-image: url(&quot;image.png&quot;);\n  background-repeat: no-repeat;\n  background-position: right bottom;\n  background-attachment: fixed;\n}\n&lt;\/style&gt;\n\n&lt;h4&gt;Paragraph&lt;\/h4&gt;\n&lt;p&gt;\n&lt;b&gt;&lt;i&gt;All that glitters is not gold&lt;\/i&gt;&lt;\/b&gt; is an aphorism stating that not everything that looks precious or true turns out to be so. \nWhile early expressions of the idea are known from at least the 12th-13th century, the current saying is derived from a 16th-century line by William Shakespeare, \n&lt;b&gt;&lt;i&gt;All that glisters is not gold&lt;\/i&gt;&lt;\/b&gt;.\n&lt;br \/&gt; &lt;br \/&gt;\n&lt;b&gt;&lt;i&gt;All that glisters is not gold&lt;\/i&gt;&lt;\/b&gt;&lt;br \/&gt;\nOften have you heard that told.&lt;br \/&gt;\nMany a man his life hath sold&lt;br \/&gt;\nBut my outside to behold.&lt;br \/&gt;\nGilded tombs do worms enfold.&lt;br \/&gt;\nHad you been as wise as bold,&lt;br \/&gt;\nYoung in limbs, in judgment old,&lt;br \/&gt;\nYour answer had not been inscrolled&lt;br \/&gt;\nFare you well. Your suit is cold&lt;br \/&gt;\n\n-William Shakespeare, Merchant of Venice, Act II Scene 7 \n&lt;\/p&gt;\n\n  &lt;h4&gt;Equation&lt;\/h4&gt;\n  \n    &lt;i&gt;x&lt;\/i&gt; = 1\/3(&lt;i&gt;y&lt;\/i&gt;&lt;sub&gt;1&lt;\/sub&gt;&lt;sup&gt;2&lt;\/sup&gt; + &lt;i&gt;z&lt;\/i&gt;&lt;sub&gt;1&lt;\/sub&gt;&lt;sup&gt;2&lt;\/sup&gt;)\n\n  &lt;h4&gt;Unordered Fruit List&lt;\/h4&gt;\n  \n    &lt;ul&gt;\n      &lt;li&gt;Banana&lt;\/li&gt;\n      &lt;li&gt;Mango&lt;\/li&gt;\n      &lt;li&gt;Grapes&lt;\/li&gt;\n      &lt;li&gt;Apples&lt;\/li&gt;\n    &lt;\/ul&gt;\n    \n  &lt;h4&gt;Ordered Flower List&lt;\/h4&gt;\n    &lt;ol&gt;\n      &lt;li&gt;Jasmine&lt;\/li&gt;\n      &lt;li&gt;Rose&lt;\/li&gt;\n      &lt;li&gt;Lotus&lt;\/li&gt;\n      &lt;li&gt;Tulip&lt;\/li&gt;\n    &lt;\/ol&gt;\n  &lt;br \/&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;?<\/span><span style=\"color: #85E89D\">xml<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">version<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;1.0&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">encoding<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;UTF-8&quot;<\/span><span style=\"color: #E1E4E8\">?&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">PUBLIC<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;-\/\/W3C\/\/DTD XHTML 1.1\/\/EN&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;http:\/\/www.w3.org\/TR\/xhtml11\/DTD\/xhtml11.dtd&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">xmlns<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;http:\/\/www.w3.org\/1999\/xhtml&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">xml:lang<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;en&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;SAMPLE XHTML PAGE&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">name<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;author&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">content<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;Putta&quot;<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">name<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;date&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">content<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;2023-02-17T04:15:01+0530&quot;<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">http-equiv<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;content-type&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">content<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;text\/html; charset=UTF-8&quot;<\/span><span style=\"color: #E1E4E8\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">http-equiv<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;content-type&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">content<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;application\/xhtml+xml; charset=UTF-8&quot;<\/span><span style=\"color: #E1E4E8\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">http-equiv<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;content-style-type&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">content<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;text\/css&quot;<\/span><span style=\"color: #E1E4E8\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">http-equiv<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;expires&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">content<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;0&quot;<\/span><span style=\"color: #E1E4E8\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">background-image<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">url<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&quot;image.png&quot;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">background-repeat<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">no-repeat<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">background-position<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">right<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">bottom<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">background-attachment<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">fixed<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">h4<\/span><span style=\"color: #E1E4E8\">&gt;Paragraph&lt;\/<\/span><span style=\"color: #85E89D\">h4<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">b<\/span><span style=\"color: #E1E4E8\">&gt;&lt;<\/span><span style=\"color: #85E89D\">i<\/span><span style=\"color: #E1E4E8\">&gt;All that glitters is not gold&lt;\/<\/span><span style=\"color: #85E89D\">i<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">b<\/span><span style=\"color: #E1E4E8\">&gt; is an aphorism stating that not everything that looks precious or true turns out to be so. <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">While early expressions of the idea are known from at least the 12th-13th century, the current saying is derived from a 16th-century line by William Shakespeare, <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">b<\/span><span style=\"color: #E1E4E8\">&gt;&lt;<\/span><span style=\"color: #85E89D\">i<\/span><span style=\"color: #E1E4E8\">&gt;All that glisters is not gold&lt;\/<\/span><span style=\"color: #85E89D\">i<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">b<\/span><span style=\"color: #E1E4E8\">&gt;.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">br<\/span><span style=\"color: #E1E4E8\"> \/&gt; &lt;<\/span><span style=\"color: #85E89D\">br<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">b<\/span><span style=\"color: #E1E4E8\">&gt;&lt;<\/span><span style=\"color: #85E89D\">i<\/span><span style=\"color: #E1E4E8\">&gt;All that glisters is not gold&lt;\/<\/span><span style=\"color: #85E89D\">i<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">b<\/span><span style=\"color: #E1E4E8\">&gt;&lt;<\/span><span style=\"color: #85E89D\">br<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">Often have you heard that told.&lt;<\/span><span style=\"color: #85E89D\">br<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">Many a man his life hath sold&lt;<\/span><span style=\"color: #85E89D\">br<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">But my outside to behold.&lt;<\/span><span style=\"color: #85E89D\">br<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">Gilded tombs do worms enfold.&lt;<\/span><span style=\"color: #85E89D\">br<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">Had you been as wise as bold,&lt;<\/span><span style=\"color: #85E89D\">br<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">Young in limbs, in judgment old,&lt;<\/span><span style=\"color: #85E89D\">br<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">Your answer had not been inscrolled&lt;<\/span><span style=\"color: #85E89D\">br<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">Fare you well. Your suit is cold&lt;<\/span><span style=\"color: #85E89D\">br<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">-William Shakespeare, Merchant of Venice, Act II Scene 7 <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">h4<\/span><span style=\"color: #E1E4E8\">&gt;Equation&lt;\/<\/span><span style=\"color: #85E89D\">h4<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">i<\/span><span style=\"color: #E1E4E8\">&gt;x&lt;\/<\/span><span style=\"color: #85E89D\">i<\/span><span style=\"color: #E1E4E8\">&gt; = 1\/3(&lt;<\/span><span style=\"color: #85E89D\">i<\/span><span style=\"color: #E1E4E8\">&gt;y&lt;\/<\/span><span style=\"color: #85E89D\">i<\/span><span style=\"color: #E1E4E8\">&gt;&lt;<\/span><span style=\"color: #85E89D\">sub<\/span><span style=\"color: #E1E4E8\">&gt;1&lt;\/<\/span><span style=\"color: #85E89D\">sub<\/span><span style=\"color: #E1E4E8\">&gt;&lt;<\/span><span style=\"color: #85E89D\">sup<\/span><span style=\"color: #E1E4E8\">&gt;2&lt;\/<\/span><span style=\"color: #85E89D\">sup<\/span><span style=\"color: #E1E4E8\">&gt; + &lt;<\/span><span style=\"color: #85E89D\">i<\/span><span style=\"color: #E1E4E8\">&gt;z&lt;\/<\/span><span style=\"color: #85E89D\">i<\/span><span style=\"color: #E1E4E8\">&gt;&lt;<\/span><span style=\"color: #85E89D\">sub<\/span><span style=\"color: #E1E4E8\">&gt;1&lt;\/<\/span><span style=\"color: #85E89D\">sub<\/span><span style=\"color: #E1E4E8\">&gt;&lt;<\/span><span style=\"color: #85E89D\">sup<\/span><span style=\"color: #E1E4E8\">&gt;2&lt;\/<\/span><span style=\"color: #85E89D\">sup<\/span><span style=\"color: #E1E4E8\">&gt;)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">h4<\/span><span style=\"color: #E1E4E8\">&gt;Unordered Fruit List&lt;\/<\/span><span style=\"color: #85E89D\">h4<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">ul<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;Banana&lt;\/<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;Mango&lt;\/<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;Grapes&lt;\/<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;Apples&lt;\/<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">ul<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">h4<\/span><span style=\"color: #E1E4E8\">&gt;Ordered Flower List&lt;\/<\/span><span style=\"color: #85E89D\">h4<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">ol<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;Jasmine&lt;\/<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;Rose&lt;\/<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;Lotus&lt;\/<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;Tulip&lt;\/<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">ol<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">br<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/01a.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"1024\" height=\"716\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/01a.png?resize=1024%2C716&#038;ssl=1\" alt=\"\" class=\"wp-image-778 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/01a.png?resize=1024%2C716&amp;ssl=1 1024w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/01a.png?resize=300%2C210&amp;ssl=1 300w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/01a.png?resize=768%2C537&amp;ssl=1 768w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/01a.png?w=1056&amp;ssl=1 1056w\" data-sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/716;\" \/><\/a><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\">Question 02<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"P02\">XHTML Tables<\/h3>\n\n\n\n<p><strong>Create following table using XHTML tags. Properly align cells, give suitable cell padding and cell spacing, and apply background color, bold and emphasis necessary<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/image.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"488\" height=\"255\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/image.png?resize=488%2C255&#038;ssl=1\" alt=\"\" class=\"wp-image-768 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/image.png?w=488&amp;ssl=1 488w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/image.png?resize=300%2C157&amp;ssl=1 300w\" data-sizes=\"(max-width: 488px) 100vw, 488px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 488px; --smush-placeholder-aspect-ratio: 488\/255;\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">HTML Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;\n&lt;!DOCTYPE html PUBLIC &quot;-\/\/W3C\/\/DTD XHTML 1.1\/\/EN&quot; &quot;http:\/\/www.w3.org\/TR\/xhtml11\/DTD\/xhtml11.dtd&quot;&gt;\n&lt;html xmlns=&quot;http:\/\/www.w3.org\/1999\/xhtml&quot; xml:lang=&quot;en&quot;&gt;\n&lt;head&gt;\n&lt;title&gt;Table Demo XHTML PAGE&lt;\/title&gt;\n&lt;meta name=&quot;author&quot; content=&quot;Putta&quot; \/&gt;\n&lt;meta name=&quot;date&quot; content=&quot;2023-02-17T04:58:37+0530&quot; \/&gt;\n&lt;meta http-equiv=&quot;content-type&quot; content=&quot;text\/html; charset=UTF-8&quot;\/&gt;\n&lt;meta http-equiv=&quot;content-type&quot; content=&quot;application\/xhtml+xml; charset=UTF-8&quot;\/&gt;\n&lt;meta http-equiv=&quot;content-style-type&quot; content=&quot;text\/css&quot;\/&gt;\n&lt;meta http-equiv=&quot;expires&quot; content=&quot;0&quot;\/&gt;\n\n&lt;style&gt;\ntable, th, td {\n  border: 1px solid black;\n  border-collapse: collapse;\n}\nth, td{\n\tpadding-left: 10px;\n\tpadding-bottom: 20px\n}\ntable {\n  border-spacing: 30px;\n}\n&lt;\/style&gt;\n\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h3&gt;Tables in XHTML&lt;\/h3&gt;\n\n&lt;table align=&quot;center&quot; width=&quot;70%&quot; style=&quot;height:450px&quot;&gt;\n  &lt;tr &gt;\n    &lt;td rowspan=&quot;9&quot; align=&quot;center&quot; bgcolor=DEEEEE&gt;\n    \t&lt;b&gt;Department&lt;\/b&gt;\n    &lt;\/td&gt; \n    &lt;td rowspan=&quot;3&quot; align=&quot;center&quot; bgcolor=9E7BA0&gt;\n\t    &lt;b&gt;Sem1&lt;\/b&gt;\n    &lt;\/td&gt;\n    &lt;td padding:15px&gt;\n    \t&lt;em&gt;SubjectA&lt;\/em&gt;\n    &lt;\/td&gt;    \n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td &gt;&lt;em&gt;SubjectB&lt;\/em&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td &gt;&lt;em&gt;SubjectC&lt;\/em&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n\n  &lt;tr&gt;\n    &lt;td rowspan=&quot;3&quot; align=&quot;center&quot; bgcolor=9E7BA0&gt;\n\t    &lt;b&gt;Sem2&lt;\/b&gt;\n    &lt;\/td&gt;\n    &lt;td &gt;&lt;em&gt;SubjectE&lt;\/em&gt;&lt;\/td&gt;       \n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td &gt;&lt;em&gt;SubjectF&lt;\/em&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td &gt;&lt;em&gt;SubjectG&lt;\/em&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n\n  &lt;tr&gt;\n    &lt;td rowspan=&quot;3&quot; align=&quot;center&quot; bgcolor=9E7BA0&gt;\n\t    &lt;b&gt;Sem3&lt;\/b&gt;\n    &lt;\/td&gt;\n    &lt;td &gt;&lt;em&gt;SubjectH&lt;\/em&gt;&lt;\/td&gt;       \n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td &gt;&lt;em&gt;SubjectI&lt;\/em&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td &gt;&lt;em&gt;SubjectJ&lt;\/em&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n\n&lt;\/table&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;?<\/span><span style=\"color: #85E89D\">xml<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">version<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;1.0&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">encoding<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;UTF-8&quot;<\/span><span style=\"color: #E1E4E8\">?&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">PUBLIC<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;-\/\/W3C\/\/DTD XHTML 1.1\/\/EN&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;http:\/\/www.w3.org\/TR\/xhtml11\/DTD\/xhtml11.dtd&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">xmlns<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;http:\/\/www.w3.org\/1999\/xhtml&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">xml:lang<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;en&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;Table Demo XHTML PAGE&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">name<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;author&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">content<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;Putta&quot;<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">name<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;date&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">content<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;2023-02-17T04:58:37+0530&quot;<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">http-equiv<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;content-type&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">content<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;text\/html; charset=UTF-8&quot;<\/span><span style=\"color: #E1E4E8\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">http-equiv<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;content-type&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">content<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;application\/xhtml+xml; charset=UTF-8&quot;<\/span><span style=\"color: #E1E4E8\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">http-equiv<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;content-style-type&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">content<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;text\/css&quot;<\/span><span style=\"color: #E1E4E8\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">http-equiv<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;expires&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">content<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;0&quot;<\/span><span style=\"color: #E1E4E8\">\/&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">table<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">solid<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">black<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">border-collapse<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">collapse<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t<\/span><span style=\"color: #79B8FF\">padding-left<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t<\/span><span style=\"color: #79B8FF\">padding-bottom<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">table<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">border-spacing<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">30<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">h3<\/span><span style=\"color: #E1E4E8\">&gt;Tables in XHTML&lt;\/<\/span><span style=\"color: #85E89D\">h3<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">table<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #FDAEB7; font-style: italic\">align<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;center&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">width<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;70%&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">style<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;height:450px&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\"> &gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">rowspan<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;9&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #FDAEB7; font-style: italic\">align<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;center&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #FDAEB7; font-style: italic\">bgcolor<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">DEEEEE<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    \t&lt;<\/span><span style=\"color: #85E89D\">b<\/span><span style=\"color: #E1E4E8\">&gt;Department&lt;\/<\/span><span style=\"color: #85E89D\">b<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt; <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">rowspan<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;3&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #FDAEB7; font-style: italic\">align<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;center&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #FDAEB7; font-style: italic\">bgcolor<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">9E7BA0<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t    &lt;<\/span><span style=\"color: #85E89D\">b<\/span><span style=\"color: #E1E4E8\">&gt;Sem1&lt;\/<\/span><span style=\"color: #85E89D\">b<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">padding:15px<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    \t&lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;SubjectA&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\"> &gt;&lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;SubjectB&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\"> &gt;&lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;SubjectC&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">rowspan<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;3&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #FDAEB7; font-style: italic\">align<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;center&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #FDAEB7; font-style: italic\">bgcolor<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">9E7BA0<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t    &lt;<\/span><span style=\"color: #85E89D\">b<\/span><span style=\"color: #E1E4E8\">&gt;Sem2&lt;\/<\/span><span style=\"color: #85E89D\">b<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\"> &gt;&lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;SubjectE&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;       <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\"> &gt;&lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;SubjectF&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\"> &gt;&lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;SubjectG&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">rowspan<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;3&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #FDAEB7; font-style: italic\">align<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;center&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #FDAEB7; font-style: italic\">bgcolor<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">9E7BA0<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t    &lt;<\/span><span style=\"color: #85E89D\">b<\/span><span style=\"color: #E1E4E8\">&gt;Sem3&lt;\/<\/span><span style=\"color: #85E89D\">b<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\"> &gt;&lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;SubjectH&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;       <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\"> &gt;&lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;SubjectI&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\"> &gt;&lt;<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;SubjectJ&lt;\/<\/span><span style=\"color: #85E89D\">em<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">table<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/02a.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"1024\" height=\"716\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/02a.png?resize=1024%2C716&#038;ssl=1\" alt=\"\" class=\"wp-image-781 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/02a.png?resize=1024%2C716&amp;ssl=1 1024w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/02a.png?resize=300%2C210&amp;ssl=1 300w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/02a.png?resize=768%2C537&amp;ssl=1 768w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/02a.png?w=1056&amp;ssl=1 1056w\" data-sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/716;\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\">Question 03<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"P03\">HTML5<\/h3>\n\n\n\n<p><strong>Use HTML5 for performing following tasks:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Draw a square using HTML5 SVG , fill the square with green color and make 6px brown stroke width<\/li>\n\n\n\n<li>Write the following mathematical expression by using HTML5 MathML.  d=x<sup>2<\/sup>-y<sup>2<\/sup><\/li>\n\n\n\n<li>Redirecting current page to another page after 5 seconds using HTML5 meta tag<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">HTML Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;meta charset=&quot;utf-8&quot; \/&gt;\n\t&lt;title&gt;HTML5 Demo&lt;\/title&gt;\n\t&lt;meta http-equiv=&quot;refresh&quot; content=&quot;5; URL=http:\/\/www.vtu.ac.in&quot;&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\t&lt;h3&gt;HTML5 SVG&lt;\/h3&gt;\n\t&lt;svg width=&quot;200&quot; height=&quot;200&quot; align=&quot;centre&quot;&gt;\n\t  &lt;rect x=&quot;50&quot; y=&quot;50&quot; width=&quot;100&quot; height=&quot;100&quot; fill=&quot;green&quot; stroke=&quot;brown&quot; stroke-width=&quot;6px&quot;\/&gt;\n\t&lt;\/svg&gt;\n\n\t&lt;h3&gt;HTML5 MathML&lt;\/h3&gt;\n\n\t&lt;math xmlns = &quot;http:\/\/www.w3.org\/1998\/Math\/MathML&quot;&gt;\n\t\t     &lt;mrow&gt;\n\t\t        &lt;msup&gt;&lt;mi&gt;d&lt;\/mi&gt;&lt;\/msup&gt;            \n\t\t        &lt;mo&gt; = &lt;\/mo&gt;            \n\t\t        &lt;msup&gt;&lt;mi&gt;x&lt;\/mi&gt;&lt;mn&gt;2&lt;\/mn&gt;&lt;\/msup&gt;\n\t\t        &lt;mo&gt;-&lt;\/mo&gt;\t\t\t\t\n\t\t        &lt;msup&gt;&lt;mi&gt;y&lt;\/mi&gt;&lt;mn&gt;2&lt;\/mn&gt;&lt;\/msup&gt;\n\t\t     &lt;\/mrow&gt;\n\t&lt;\/math&gt;\n\n\t&lt;h3&gt;This page redirects in 5 seconds&lt;\/h3&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t&lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">charset<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;utf-8&quot;<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t&lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;HTML5 Demo&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t&lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">http-equiv<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;refresh&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">content<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;5; URL=http:\/\/www.vtu.ac.in&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t&lt;<\/span><span style=\"color: #85E89D\">h3<\/span><span style=\"color: #E1E4E8\">&gt;HTML5 SVG&lt;\/<\/span><span style=\"color: #85E89D\">h3<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t&lt;<\/span><span style=\"color: #85E89D\">svg<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">width<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;200&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">height<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;200&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">align<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;centre&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t  &lt;<\/span><span style=\"color: #85E89D\">rect<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">x<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;50&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">y<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;50&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">width<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;100&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">height<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;100&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">fill<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;green&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">stroke<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;brown&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">stroke-width<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;6px&quot;<\/span><span style=\"color: #E1E4E8\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t&lt;\/<\/span><span style=\"color: #85E89D\">svg<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t&lt;<\/span><span style=\"color: #85E89D\">h3<\/span><span style=\"color: #E1E4E8\">&gt;HTML5 MathML&lt;\/<\/span><span style=\"color: #85E89D\">h3<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t&lt;<\/span><span style=\"color: #85E89D\">math<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">xmlns<\/span><span style=\"color: #E1E4E8\"> = <\/span><span style=\"color: #9ECBFF\">&quot;http:\/\/www.w3.org\/1998\/Math\/MathML&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t     &lt;<\/span><span style=\"color: #85E89D\">mrow<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t        &lt;<\/span><span style=\"color: #85E89D\">msup<\/span><span style=\"color: #E1E4E8\">&gt;&lt;<\/span><span style=\"color: #85E89D\">mi<\/span><span style=\"color: #E1E4E8\">&gt;d&lt;\/<\/span><span style=\"color: #85E89D\">mi<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">msup<\/span><span style=\"color: #E1E4E8\">&gt;            <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t        &lt;<\/span><span style=\"color: #85E89D\">mo<\/span><span style=\"color: #E1E4E8\">&gt; = &lt;\/<\/span><span style=\"color: #85E89D\">mo<\/span><span style=\"color: #E1E4E8\">&gt;            <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t        &lt;<\/span><span style=\"color: #85E89D\">msup<\/span><span style=\"color: #E1E4E8\">&gt;&lt;<\/span><span style=\"color: #85E89D\">mi<\/span><span style=\"color: #E1E4E8\">&gt;x&lt;\/<\/span><span style=\"color: #85E89D\">mi<\/span><span style=\"color: #E1E4E8\">&gt;&lt;<\/span><span style=\"color: #85E89D\">mn<\/span><span style=\"color: #E1E4E8\">&gt;2&lt;\/<\/span><span style=\"color: #85E89D\">mn<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">msup<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t        &lt;<\/span><span style=\"color: #85E89D\">mo<\/span><span style=\"color: #E1E4E8\">&gt;-&lt;\/<\/span><span style=\"color: #85E89D\">mo<\/span><span style=\"color: #E1E4E8\">&gt;\t\t\t\t<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t        &lt;<\/span><span style=\"color: #85E89D\">msup<\/span><span style=\"color: #E1E4E8\">&gt;&lt;<\/span><span style=\"color: #85E89D\">mi<\/span><span style=\"color: #E1E4E8\">&gt;y&lt;\/<\/span><span style=\"color: #85E89D\">mi<\/span><span style=\"color: #E1E4E8\">&gt;&lt;<\/span><span style=\"color: #85E89D\">mn<\/span><span style=\"color: #E1E4E8\">&gt;2&lt;\/<\/span><span style=\"color: #85E89D\">mn<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">msup<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t     &lt;\/<\/span><span style=\"color: #85E89D\">mrow<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t&lt;\/<\/span><span style=\"color: #85E89D\">math<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t&lt;<\/span><span style=\"color: #85E89D\">h3<\/span><span style=\"color: #E1E4E8\">&gt;This page redirects in 5 seconds&lt;\/<\/span><span style=\"color: #85E89D\">h3<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/03a.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"1024\" height=\"602\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/03a.png?resize=1024%2C602&#038;ssl=1\" alt=\"\" class=\"wp-image-783 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/03a.png?resize=1024%2C602&amp;ssl=1 1024w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/03a.png?resize=300%2C176&amp;ssl=1 300w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/03a.png?resize=768%2C452&amp;ssl=1 768w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/03a.png?w=1056&amp;ssl=1 1056w\" data-sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/602;\" \/><\/a><figcaption class=\"wp-element-caption\"><strong>Initial Page<\/strong><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/03b-1.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"1024\" height=\"602\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/03b-1.png?resize=1024%2C602&#038;ssl=1\" alt=\"\" class=\"wp-image-785 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/03b-1.png?resize=1024%2C602&amp;ssl=1 1024w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/03b-1.png?resize=300%2C176&amp;ssl=1 300w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/03b-1.png?resize=768%2C452&amp;ssl=1 768w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/03b-1.png?w=1056&amp;ssl=1 1056w\" data-sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/602;\" \/><\/a><figcaption class=\"wp-element-caption\"><strong>Redirected Page<\/strong><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\">Question 04<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"P04\">HTML5 Semantic Tags<\/h3>\n\n\n\n<p><strong>Demonstrate the following HTML5 Semantic tags<\/strong> &#8211; &lt; article &gt;, &lt; aside &gt;, &lt; details &gt;, &lt; f igcaption &gt;, &lt; f igure &gt;, &lt; f ooter &gt;, &lt; header &gt;, &lt; main &gt;, &lt; mark &gt;, &lt; section &gt; <strong>for a webpage that gives information about travel experience.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">HTML Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;meta charset=&quot;utf-8&quot; \/&gt;\n&lt;title&gt;HTML5 Semantic Tags Demo&lt;\/title&gt;\n\n      &lt;style&gt;\n      body{\n      background-color: #FFFDD0;\n      }\n      aside {\n        float: right;\n        width: 25%;\n        background-color: cyan;\n        font-style: italic;\n        padding: 15px;\n      }\n      main {\n        float: left;\n        width: 70%;\n      }\n      footer {\n        position: fixed;\n        left: 0;\n        bottom: 0;\n        width: 100%;\n        text-align: center;\n      }\n      mark { \n  background-color: yellow;\n  color: black;\n}\n\tfigure {\n  display: inline-block;\n  margin: auto;\n}\n\nfigcaption {\n  font-style: italic;\n}\n    &lt;\/style&gt;\n\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;article&gt;\n\t&lt;header&gt;\n    &lt;h1&gt;My Travelogue&lt;\/h1&gt;\n    &lt;p&gt;Random Escapades&lt;\/p&gt;\n  \t&lt;\/header&gt;\n\n\n&lt;main&gt;\n    &lt;figure&gt;\n    &lt;img src=&quot;journey.jpeg&quot; alt=&quot;Example Image&quot; width=&quot;350&quot; height=&quot;235&quot;&gt;\n    &lt;figcaption&gt;The road never ends&lt;\/figcaption&gt;\n  &lt;\/figure&gt;\n\n&lt;section&gt;\n&lt;h2&gt;Ooty&lt;\/h2&gt;\n&lt;p&gt;Ooty is a popular hill station located in the Nilgiri Hills. It is popularly called the &quot;Queen of Hill Stations&quot;.&lt;\/p&gt;\n&lt;\/section&gt;\n\n&lt;section&gt;\n&lt;h2&gt;Mysore&lt;\/h2&gt;\n&lt;p&gt; The city is also known as the City of Palaces, Mysuru has always enchanted its visitors with its quaint charm.&lt;\/p&gt;\n&lt;\/section&gt;\n\n&lt;\/main&gt;\n\n&lt;aside&gt;\n&lt;section&gt;\n&lt;p&gt;Upcoming Trek planned to &lt;mark&gt;Kumara Parvata&lt;\/mark&gt; will be sharing detils soon&lt;\/p&gt;\n&lt;details&gt;\n  &lt;summary&gt;Tentative Dates&lt;\/summary&gt;\n  &lt;p&gt;24th January 2023&lt;\/p&gt;\n&lt;\/details&gt;\n&lt;\/section&gt;\n&lt;\/aside&gt;\n\n    &lt;footer&gt;\n      &lt;p&gt;&copy; 2023 Prabodh C P&lt;\/p&gt;\n    &lt;\/footer&gt;\n\n&lt;\/article&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">charset<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;utf-8&quot;<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;HTML5 Semantic Tags Demo&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#FFFDD0<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #85E89D\">aside<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">float<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">right<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">25<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">cyan<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">font-style<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">italic<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">15<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #85E89D\">main<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">float<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">left<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">70<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #85E89D\">footer<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">position<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">fixed<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">left<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">bottom<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">100<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">text-align<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">center<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #85E89D\">mark<\/span><span style=\"color: #E1E4E8\"> { <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">yellow<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">black<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t<\/span><span style=\"color: #85E89D\">figure<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">display<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">inline-block<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">auto<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">figcaption<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">font-style<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">italic<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">article<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t&lt;<\/span><span style=\"color: #85E89D\">header<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">h1<\/span><span style=\"color: #E1E4E8\">&gt;My Travelogue&lt;\/<\/span><span style=\"color: #85E89D\">h1<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;Random Escapades&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  \t&lt;\/<\/span><span style=\"color: #85E89D\">header<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">main<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">figure<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">img<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">src<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;journey.jpeg&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">alt<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;Example Image&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">width<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;350&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">height<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;235&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">figcaption<\/span><span style=\"color: #E1E4E8\">&gt;The road never ends&lt;\/<\/span><span style=\"color: #85E89D\">figcaption<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">figure<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">section<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;Ooty&lt;\/<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;Ooty is a popular hill station located in the Nilgiri Hills. It is popularly called the &quot;Queen of Hill Stations&quot;.&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">section<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">section<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;Mysore&lt;\/<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt; The city is also known as the City of Palaces, Mysuru has always enchanted its visitors with its quaint charm.&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">section<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">main<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">aside<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">section<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;Upcoming Trek planned to &lt;<\/span><span style=\"color: #85E89D\">mark<\/span><span style=\"color: #E1E4E8\">&gt;Kumara Parvata&lt;\/<\/span><span style=\"color: #85E89D\">mark<\/span><span style=\"color: #E1E4E8\">&gt; will be sharing detils soon&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">details<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">summary<\/span><span style=\"color: #E1E4E8\">&gt;Tentative Dates&lt;\/<\/span><span style=\"color: #85E89D\">summary<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;24th January 2023&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">details<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">section<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">aside<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">footer<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;\u00a9 2023 Prabodh C P&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">footer<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">article<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/04a.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"1024\" height=\"692\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/04a.png?resize=1024%2C692&#038;ssl=1\" alt=\"\" class=\"wp-image-788 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/04a.png?resize=1024%2C692&amp;ssl=1 1024w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/04a.png?resize=300%2C203&amp;ssl=1 300w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/04a.png?resize=768%2C519&amp;ssl=1 768w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/04a.png?w=1056&amp;ssl=1 1056w\" data-sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/692;\" \/><\/a><figcaption class=\"wp-element-caption\"><strong>Initial Page<\/strong><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/04b.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"939\" height=\"727\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/04b.png?resize=939%2C727&#038;ssl=1\" alt=\"\" class=\"wp-image-789 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/04b.png?w=939&amp;ssl=1 939w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/04b.png?resize=300%2C232&amp;ssl=1 300w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/04b.png?resize=768%2C595&amp;ssl=1 768w\" data-sizes=\"(max-width: 939px) 100vw, 939px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 939px; --smush-placeholder-aspect-ratio: 939\/727;\" \/><\/a><figcaption class=\"wp-element-caption\"><strong>After clicking on Details<\/strong><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\">Question 05<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"P05\">Classes<\/h3>\n\n\n\n<p><strong>Create a class called income, and make it a background color of #0ff.<br>Create a class called expenses, and make it a background color of #f0f.<br>Create a class called profit, and make it a background color of #f00.<br>Throughout the document, any text that mentions income, expenses, or profit, attach the appropriate class to that piece of text. Further create following line of text in the same document:<\/strong><\/p>\n\n\n\n<p><s>The current price is 50\u20b9<\/s> <span style=\"color:#FF0000\">and new price is 40\u20b9<\/span> <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">HTML Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;meta charset=&quot;utf-8&quot; \/&gt;\n&lt;title&gt;Class Selectors Demo&lt;\/title&gt;\n&lt;style&gt;\n.income {background-color: #0ff; font-style: italic;}\n.expenses {background-color: #f0f;font-style: oblique;}\n.profit {background-color: #ff0;font-weight: bold;}\n.red{color: red;font-size: 24px;}\n.strike{text-decoration: line-through; font-size: 24px;}\np {font-family: Cursive;}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;h1&gt;Class Selectors Demo&lt;\/h1&gt;\n&lt;p&gt;\nIncome, expenses, and profit are financial terms that are used to measure the financial health of a person or a business.\n&lt;\/p&gt;\n&lt;p class=&quot;income&quot;&gt;\nIncome refers to the amount of money received by an individual or business from various sources such as employment, investments, or sales of goods and services. Income can be earned on a regular basis, such as a salary, or irregularly, such as a bonus or one-time payment.\n&lt;\/p&gt;\n\n&lt;p class=&quot;expenses&quot;&gt;\nExpenses, on the other hand, refer to the amount of money spent by an individual or business to cover their costs of living or operating. Expenses can include fixed costs such as rent or salaries, variable costs such as the cost of materials, or discretionary costs such as entertainment or travel.\n&lt;\/p&gt;\n\n&lt;p class=&quot;profit&quot;&gt;\nProfit is the amount of money that remains after deducting expenses from income. It represents the financial gain or loss that a person or business has generated over a given period of time. A positive profit means that the income was greater than the expenses, while a negative profit means that the expenses were greater than the income.\n&lt;\/p&gt;\n\n&lt;span class=&quot;strike&quot;&gt;The current price is 50&#8377; &lt;\/span&gt;&lt;span class=&quot;red&quot;&gt;and new price is 40&#8377;&lt;\/span&gt;\n \n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">charset<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;utf-8&quot;<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;Class Selectors Demo&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">.income<\/span><span style=\"color: #E1E4E8\"> {<\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#0ff<\/span><span style=\"color: #E1E4E8\">; <\/span><span style=\"color: #79B8FF\">font-style<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">italic<\/span><span style=\"color: #E1E4E8\">;}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">.expenses<\/span><span style=\"color: #E1E4E8\"> {<\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#f0f<\/span><span style=\"color: #E1E4E8\">;<\/span><span style=\"color: #79B8FF\">font-style<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">oblique<\/span><span style=\"color: #E1E4E8\">;}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">.profit<\/span><span style=\"color: #E1E4E8\"> {<\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#ff0<\/span><span style=\"color: #E1E4E8\">;<\/span><span style=\"color: #79B8FF\">font-weight<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">bold<\/span><span style=\"color: #E1E4E8\">;}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">.red<\/span><span style=\"color: #E1E4E8\">{<\/span><span style=\"color: #79B8FF\">color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">red<\/span><span style=\"color: #E1E4E8\">;<\/span><span style=\"color: #79B8FF\">font-size<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">24<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">.strike<\/span><span style=\"color: #E1E4E8\">{<\/span><span style=\"color: #79B8FF\">text-decoration<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">line-through<\/span><span style=\"color: #E1E4E8\">; <\/span><span style=\"color: #79B8FF\">font-size<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">24<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\"> {<\/span><span style=\"color: #79B8FF\">font-family<\/span><span style=\"color: #E1E4E8\">: Cursive;}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">h1<\/span><span style=\"color: #E1E4E8\">&gt;Class Selectors Demo&lt;\/<\/span><span style=\"color: #85E89D\">h1<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">Income, expenses, and profit are financial terms that are used to measure the financial health of a person or a business.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;income&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">Income refers to the amount of money received by an individual or business from various sources such as employment, investments, or sales of goods and services. Income can be earned on a regular basis, such as a salary, or irregularly, such as a bonus or one-time payment.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;expenses&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">Expenses, on the other hand, refer to the amount of money spent by an individual or business to cover their costs of living or operating. Expenses can include fixed costs such as rent or salaries, variable costs such as the cost of materials, or discretionary costs such as entertainment or travel.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;profit&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">Profit is the amount of money that remains after deducting expenses from income. It represents the financial gain or loss that a person or business has generated over a given period of time. A positive profit means that the income was greater than the expenses, while a negative profit means that the expenses were greater than the income.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">span<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;strike&quot;<\/span><span style=\"color: #E1E4E8\">&gt;The current price is 50\u20b9 &lt;\/<\/span><span style=\"color: #85E89D\">span<\/span><span style=\"color: #E1E4E8\">&gt;&lt;<\/span><span style=\"color: #85E89D\">span<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;red&quot;<\/span><span style=\"color: #E1E4E8\">&gt;and new price is 40\u20b9&lt;\/<\/span><span style=\"color: #85E89D\">span<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\"> <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/05a-1.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"1024\" height=\"579\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/05a-1.png?resize=1024%2C579&#038;ssl=1\" alt=\"\" class=\"wp-image-792 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/05a-1.png?resize=1024%2C579&amp;ssl=1 1024w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/05a-1.png?resize=300%2C170&amp;ssl=1 300w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/05a-1.png?resize=768%2C434&amp;ssl=1 768w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/05a-1.png?w=1056&amp;ssl=1 1056w\" data-sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/579;\" \/><\/a><figcaption class=\"wp-element-caption\"><strong>Output<\/strong><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\">Question 06<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"P06\">li Tag<\/h3>\n\n\n\n<p><strong>Change the tag li to have the following properties:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A display status of inline<\/li>\n\n\n\n<li>A medium, double-lined, black border<\/li>\n\n\n\n<li>No list style type<\/li>\n<\/ul>\n\n\n\n<p>Add the following properties to the style for li:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Margin of 5px<\/li>\n\n\n\n<li>Padding of 10px to the top, 20px to the right, 10px to the bottom, and 20px to the left<\/li>\n<\/ul>\n\n\n\n<p>Also demonstrate list style type with user defined image logos<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">HTML Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n  &lt;meta charset=&quot;utf-8&quot; \/&gt;\n  &lt;title&gt;Tag Properties &lt;\/title&gt;\n  \n    &lt;style&gt;\n      .custom {\n        display: inline;\n        border: 2px double black;\n        list-style-type: none;\n        margin: 5px;\n        padding-top: 10px;\n        padding-right: 20px;\n        padding-bottom: 10px;\n        padding-left: 20px;\n      }\n      .logo {\n    \t\tlist-style-image: url('https:\/\/www.w3schools.com\/cssref\/sqpurple.gif');\n    \t\tmargin: 15px;\n  \t }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  \n  &lt;body&gt;\n  &lt;h2&gt;li Tag Property modification Demo&lt;\/h2&gt;\n  &lt;h3&gt;Current Top FootBall Players&lt;\/h3&gt;\n  \n    &lt;ul&gt;\n      &lt;li class=&quot;custom&quot;&gt;Lionel Messi&lt;\/li&gt;\n      &lt;li class=&quot;custom&quot;&gt;Kylian Mbappe&lt;\/li&gt;\n      &lt;li class=&quot;custom&quot;&gt;Lewandowski&lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;br&gt;\n  &lt;h2&gt;list style type with user defined image logos&lt;\/h2&gt;\n  &lt;h3&gt;Current Top FootBall Goalkeepers&lt;\/h3&gt;\n    &lt;ul class=&quot;logo&quot;&gt;\n      &lt;li&gt;Emiliano Martinez&lt;\/li&gt;\n      &lt;li&gt;Thibaut Courtois&lt;\/li&gt;\n      &lt;li&gt;Yassine Bounou&lt;\/li&gt;\n    &lt;\/ul&gt;\n  \n  &lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">charset<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;utf-8&quot;<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;Tag Properties &lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #B392F0\">.custom<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">display<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">inline<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">2<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">double<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">black<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">list-style-type<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">none<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">padding-top<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">padding-right<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">padding-bottom<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">padding-left<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #B392F0\">.logo<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    \t\t<\/span><span style=\"color: #79B8FF\">list-style-image<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">url<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&#39;https:\/\/www.w3schools.com\/cssref\/sqpurple.gif&#39;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    \t\t<\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">15<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  \t }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;li Tag Property modification Demo&lt;\/<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">h3<\/span><span style=\"color: #E1E4E8\">&gt;Current Top FootBall Players&lt;\/<\/span><span style=\"color: #85E89D\">h3<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">ul<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;custom&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Lionel Messi&lt;\/<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;custom&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Kylian Mbappe&lt;\/<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;custom&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Lewandowski&lt;\/<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">ul<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">br<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;list style type with user defined image logos&lt;\/<\/span><span style=\"color: #85E89D\">h2<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">h3<\/span><span style=\"color: #E1E4E8\">&gt;Current Top FootBall Goalkeepers&lt;\/<\/span><span style=\"color: #85E89D\">h3<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">ul<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;logo&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;Emiliano Martinez&lt;\/<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;Thibaut Courtois&lt;\/<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      &lt;<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;Yassine Bounou&lt;\/<\/span><span style=\"color: #85E89D\">li<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">ul<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/06a.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"1024\" height=\"579\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/06a.png?resize=1024%2C579&#038;ssl=1\" alt=\"\" class=\"wp-image-794 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/06a.png?resize=1024%2C579&amp;ssl=1 1024w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/06a.png?resize=300%2C170&amp;ssl=1 300w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/06a.png?resize=768%2C434&amp;ssl=1 768w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/06a.png?w=1056&amp;ssl=1 1056w\" data-sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/579;\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\">Question 07<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"P07\">Signup Page<\/h3>\n\n\n\n<p><strong>Create following web page using HTML and CSS with tabular layout<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/07b.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"557\" height=\"555\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/07b.png?resize=557%2C555&#038;ssl=1\" alt=\"\" class=\"wp-image-774 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/07b.png?w=557&amp;ssl=1 557w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/07b.png?resize=300%2C300&amp;ssl=1 300w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/07b.png?resize=150%2C150&amp;ssl=1 150w\" data-sizes=\"(max-width: 557px) 100vw, 557px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 557px; --smush-placeholder-aspect-ratio: 557\/555;\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">HTML Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;Sign Up&lt;\/title&gt;\n\t&lt;style&gt;\n\t\tbody {\n\t\t\tfont-family: Arial, sans-serif;\n\t\t\tbackground-color: #f2f2f2;\n\t\t}\n\n\t\t.container {\n\t\t\twidth: 500px;\n\t\t\tmargin: 0 auto;\n\t\t\tpadding: 20px;\n\t\t\tbackground-color: #F7E7CE;\n\t\t\tborder-radius: 5px;\n\t\t\tbox-shadow: 0 0 10px rgba(0,0,0,0.3);\n\t\t}\n\n\t\ttable {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\tth, td {\n\t\t\tpadding: 10px;\n\t\t\t\n\t\t}\n\n\t\tth {\n\t\t\ttext-align: left;\n\t\t\tbackground-color: #f2f2f2;\n\t\t}\n\n\t\tinput[type=text], input[type=password], input[type=email] {\n\t\t\twidth: 100%;\n\t\t\tpadding: 8px;\n\t\t\tmargin: 8px 0;\n\t\t\tborder: 1px solid #ccc;\n\t\t\tborder-radius: 4px;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\tbutton[type=submit] {\n\t\t\tbackground-color: #FFA500;\n\t\t\tcolor: #fff;\n\t\t\tpadding: 10px 20px;\n\t\t\tborder: none;\n\t\t\tborder-radius: 4px;\n\t\t\tcursor: pointer;\n\t\t}\n\t&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\t&lt;div class=&quot;container&quot;&gt;\n\t\t&lt;h1&gt;Sign up Today&lt;\/h1&gt;\n\t\t&lt;form&gt;\n\t\t\t&lt;table&gt;\n\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td&gt;&lt;label for=&quot;username&quot;&gt;Name:&lt;\/label&gt; &lt;br&gt; \n\t\t\t\t\t&lt;input type=&quot;text&quot; id=&quot;username&quot; name=&quot;username&quot; required&gt;&lt;\/td&gt;\n\t\t\t\t&lt;\/tr&gt;\n\n\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td&gt;&lt;label for=&quot;email&quot;&gt;Email:&lt;\/label&gt; &lt;br&gt; \n\t\t\t\t\t&lt;input type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot; required&gt;&lt;\/td&gt;\n\t\t\t\t&lt;\/tr&gt;\n\n\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td&gt;&lt;label for=&quot;password&quot;&gt;Password:&lt;\/label&gt; &lt;br&gt; \n\t\t\t\t\t&lt;input type=&quot;password&quot; id=&quot;password&quot; name=&quot;password&quot; required&gt;&lt;\/td&gt;\n\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td&gt;&lt;label for=&quot;password&quot;&gt;Confirm password:&lt;\/label&gt; &lt;br&gt; \n\t\t\t\t\t&lt;input type=&quot;password&quot; id=&quot;password&quot; name=&quot;password&quot; required&gt;&lt;\/td&gt;\n\t\t\t\t&lt;\/tr&gt;\n\n\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td colspan=&quot;2&quot;&gt;&lt;button type=&quot;submit&quot;&gt;Register&lt;\/button&gt;&lt;\/td&gt;\n\t\t\t\t&lt;\/tr&gt;\n\t\t\t&lt;\/table&gt;\n\t\t&lt;\/form&gt;\n\t&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t&lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;Sign Up&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t&lt;<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">font-family<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">Arial<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #79B8FF\">sans-serif<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#f2f2f2<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #B392F0\">.container<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">500<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">auto<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#F7E7CE<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">box-shadow<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">rgba<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">,<\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">,<\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">,<\/span><span style=\"color: #79B8FF\">0.3<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #85E89D\">table<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">100<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #85E89D\">th<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">text-align<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">left<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#f2f2f2<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\">[<\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #9ECBFF\">text<\/span><span style=\"color: #E1E4E8\">], <\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\">[<\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #9ECBFF\">password<\/span><span style=\"color: #E1E4E8\">], <\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\">[<\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #9ECBFF\">email<\/span><span style=\"color: #E1E4E8\">] {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">100<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">8<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">8<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">solid<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">#ccc<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">4<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">box-sizing<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">border-box<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">[<\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #9ECBFF\">submit<\/span><span style=\"color: #E1E4E8\">] {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#FFA500<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#fff<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">none<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">4<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t<\/span><span style=\"color: #79B8FF\">cursor<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">pointer<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t&lt;\/<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t&lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;container&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t&lt;<\/span><span style=\"color: #85E89D\">h1<\/span><span style=\"color: #E1E4E8\">&gt;Sign up Today&lt;\/<\/span><span style=\"color: #85E89D\">h1<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t&lt;<\/span><span style=\"color: #85E89D\">form<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t&lt;<\/span><span style=\"color: #85E89D\">table<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t\t&lt;<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t\t\t&lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;&lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;username&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Name:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt; &lt;<\/span><span style=\"color: #85E89D\">br<\/span><span style=\"color: #E1E4E8\">&gt; <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t\t\t&lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;text&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;username&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">name<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;username&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">required<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t\t&lt;\/<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t\t&lt;<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t\t\t&lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;&lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;email&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Email:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt; &lt;<\/span><span style=\"color: #85E89D\">br<\/span><span style=\"color: #E1E4E8\">&gt; <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t\t\t&lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;email&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;email&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">name<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;email&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">required<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t\t&lt;\/<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t\t&lt;<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t\t\t&lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;&lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;password&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Password:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt; &lt;<\/span><span style=\"color: #85E89D\">br<\/span><span style=\"color: #E1E4E8\">&gt; <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t\t\t&lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;password&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;password&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">name<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;password&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">required<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t\t&lt;\/<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t\t&lt;<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t\t\t&lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;&lt;<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">for<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;password&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Confirm password:&lt;\/<\/span><span style=\"color: #85E89D\">label<\/span><span style=\"color: #E1E4E8\">&gt; &lt;<\/span><span style=\"color: #85E89D\">br<\/span><span style=\"color: #E1E4E8\">&gt; <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t\t\t&lt;<\/span><span style=\"color: #85E89D\">input<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;password&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;password&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">name<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;password&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">required<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t\t&lt;\/<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t\t&lt;<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t\t\t&lt;<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">colspan<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;2&quot;<\/span><span style=\"color: #E1E4E8\">&gt;&lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;submit&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Register&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">td<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t\t&lt;\/<\/span><span style=\"color: #85E89D\">tr<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t&lt;\/<\/span><span style=\"color: #85E89D\">table<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t&lt;\/<\/span><span style=\"color: #85E89D\">form<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/07a.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"1024\" height=\"579\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/07a.png?resize=1024%2C579&#038;ssl=1\" alt=\"\" class=\"wp-image-796 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/07a.png?resize=1024%2C579&amp;ssl=1 1024w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/07a.png?resize=300%2C170&amp;ssl=1 300w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/07a.png?resize=768%2C434&amp;ssl=1 768w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/07a.png?w=1056&amp;ssl=1 1056w\" data-sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/579;\" \/><\/a><figcaption class=\"wp-element-caption\"><strong>Signup Page<\/strong><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\">Question 08<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"P08\">Calculator<\/h3>\n\n\n\n<p><strong>Create following calculator interface with HTML and CSS<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/08b.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"360\" height=\"543\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/08b.png?resize=360%2C543&#038;ssl=1\" alt=\"\" class=\"wp-image-776 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/08b.png?w=360&amp;ssl=1 360w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/08b.png?resize=199%2C300&amp;ssl=1 199w\" data-sizes=\"(max-width: 360px) 100vw, 360px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 360px; --smush-placeholder-aspect-ratio: 360\/543;\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">HTML Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;meta charset=&quot;utf-8&quot; \/&gt;\n&lt;title&gt;&lt;\/title&gt;\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;calcstyle.css&quot;&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;div class=&quot;calculator&quot;&gt;\n  &lt;div class=&quot;display&quot;&gt;\n    &lt;p id=&quot;result&quot;&gt;0&lt;\/p&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;buttons&quot;&gt;\n    &lt;button onclick=&quot;appendToDisplay('(')&quot;&gt;(&lt;\/button&gt;\n    &lt;button onclick=&quot;appendToDisplay(')')&quot;&gt;)&lt;\/button&gt;\n    &lt;button onclick=&quot;clearDisplay()&quot;&gt;C&lt;\/button&gt;\n    &lt;button onclick=&quot;appendToDisplay('%')&quot;&gt;%&lt;\/button&gt;    \n    &lt;button onclick=&quot;appendToDisplay('7')&quot;&gt;7&lt;\/button&gt;\n    &lt;button onclick=&quot;appendToDisplay('8')&quot;&gt;8&lt;\/button&gt;\n    &lt;button onclick=&quot;appendToDisplay('9')&quot;&gt;9&lt;\/button&gt;\n    &lt;button onclick=&quot;appendToDisplay('*')&quot;&gt;X&lt;\/button&gt;\n    &lt;button onclick=&quot;appendToDisplay('4')&quot;&gt;4&lt;\/button&gt;\n    &lt;button onclick=&quot;appendToDisplay('5')&quot;&gt;5&lt;\/button&gt;\n    &lt;button onclick=&quot;appendToDisplay('6')&quot;&gt;6&lt;\/button&gt;\n    &lt;button onclick=&quot;appendToDisplay('-')&quot;&gt;-&lt;\/button&gt;\n    &lt;button onclick=&quot;appendToDisplay('1')&quot;&gt;1&lt;\/button&gt;\n    &lt;button onclick=&quot;appendToDisplay('2')&quot;&gt;2&lt;\/button&gt;\n    &lt;button onclick=&quot;appendToDisplay('3')&quot;&gt;3&lt;\/button&gt;\n    &lt;button onclick=&quot;appendToDisplay('+')&quot;&gt;+&lt;\/button&gt;\n    &lt;button onclick=&quot;appendToDisplay('0')&quot;&gt;0&lt;\/button&gt;\n    &lt;button onclick=&quot;appendToDisplay('.')&quot;&gt;.&lt;\/button&gt;\n    &lt;button onclick=&quot;appendToDisplay('\/')&quot;&gt;\/&lt;\/button&gt;\n    &lt;button onclick=&quot;evaluate()&quot;&gt;=&lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">charset<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;utf-8&quot;<\/span><span style=\"color: #E1E4E8\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">link<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">rel<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;stylesheet&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">type<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;text\/css&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">href<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;calcstyle.css&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;calculator&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;display&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;result&quot;<\/span><span style=\"color: #E1E4E8\">&gt;0&lt;\/<\/span><span style=\"color: #85E89D\">p<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;buttons&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onclick<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">appendToDisplay<\/span><span style=\"color: #9ECBFF\">(&#39;(&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;(&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onclick<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">appendToDisplay<\/span><span style=\"color: #9ECBFF\">(&#39;)&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;)&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onclick<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">clearDisplay<\/span><span style=\"color: #9ECBFF\">()&quot;<\/span><span style=\"color: #E1E4E8\">&gt;C&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onclick<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">appendToDisplay<\/span><span style=\"color: #9ECBFF\">(&#39;%&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;%&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onclick<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">appendToDisplay<\/span><span style=\"color: #9ECBFF\">(&#39;7&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;7&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onclick<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">appendToDisplay<\/span><span style=\"color: #9ECBFF\">(&#39;8&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;8&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onclick<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">appendToDisplay<\/span><span style=\"color: #9ECBFF\">(&#39;9&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;9&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onclick<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">appendToDisplay<\/span><span style=\"color: #9ECBFF\">(&#39;*&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;X&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onclick<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">appendToDisplay<\/span><span style=\"color: #9ECBFF\">(&#39;4&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;4&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onclick<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">appendToDisplay<\/span><span style=\"color: #9ECBFF\">(&#39;5&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;5&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onclick<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">appendToDisplay<\/span><span style=\"color: #9ECBFF\">(&#39;6&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;6&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onclick<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">appendToDisplay<\/span><span style=\"color: #9ECBFF\">(&#39;-&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;-&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onclick<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">appendToDisplay<\/span><span style=\"color: #9ECBFF\">(&#39;1&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;1&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onclick<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">appendToDisplay<\/span><span style=\"color: #9ECBFF\">(&#39;2&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;2&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onclick<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">appendToDisplay<\/span><span style=\"color: #9ECBFF\">(&#39;3&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;3&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onclick<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">appendToDisplay<\/span><span style=\"color: #9ECBFF\">(&#39;+&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;+&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onclick<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">appendToDisplay<\/span><span style=\"color: #9ECBFF\">(&#39;0&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;0&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onclick<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">appendToDisplay<\/span><span style=\"color: #9ECBFF\">(&#39;.&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;.&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onclick<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">appendToDisplay<\/span><span style=\"color: #9ECBFF\">(&#39;\/&#39;)&quot;<\/span><span style=\"color: #E1E4E8\">&gt;\/&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onclick<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">evaluate<\/span><span style=\"color: #9ECBFF\">()&quot;<\/span><span style=\"color: #E1E4E8\">&gt;=&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">CSS Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".calculator {\n  display: flex;\n  flex-direction: column;\n  width: 350px;\n  margin: 10px;\n  border: 1px solid #ccc;\n  border-radius: 15px;\n  background-color: #F0C0FF;\n}\n\n.display {\n\n  background-color: #fff;\n  border-radius: 10px;\n  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 10px;\n  margin-left: 30px;\n  margin-right: 30px;\n  margin-top: 30px;\n}\n\n.buttons {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  padding: 20px;\n}\n\nbutton {\n  padding: 20px;\n  background-color: #8D918D;\n  border: 1px solid #ccc;\n  border-radius: 10px;\n  cursor: pointer;\n  margin: 10px;\n  font-size: 18px;\n  font-weight: bold;\n}\n\nbutton:hover {\n  background-color: #d9d9d9;\n}\n\nbutton:active {\n  background-color: #bfbfbf;\n}\n\n#result {\n  margin: 0;\n  font-size: 24px;\n  font-weight: bold;\n}\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #B392F0\">.calculator<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">display<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">flex<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">flex-direction<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">column<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">width<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">350<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">solid<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">#ccc<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">15<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#F0C0FF<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">.display<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#fff<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">box-shadow<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">2<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">5<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">rgba<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #79B8FF\">0.3<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">display<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">flex<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">justify-content<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">flex-end<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">align-items<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">center<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">margin-left<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">30<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">margin-right<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">30<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">margin-top<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">30<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">.buttons<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">display<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">grid<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">grid-template-columns<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">repeat<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #79B8FF\">4<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #F97583\">fr<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">padding<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#8D918D<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">border<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">solid<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">#ccc<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">border-radius<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">cursor<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">pointer<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">font-size<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">18<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">font-weight<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">bold<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">button<\/span><span style=\"color: #B392F0\">:hover<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#d9d9d9<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #85E89D\">button<\/span><span style=\"color: #B392F0\">:active<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">background-color<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">#bfbfbf<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">#result<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">margin<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">font-size<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">24<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #79B8FF\">font-weight<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">bold<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/08a.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"1024\" height=\"669\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/08a.png?resize=1024%2C669&#038;ssl=1\" alt=\"\" class=\"wp-image-797 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/08a.png?resize=1024%2C669&amp;ssl=1 1024w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/08a.png?resize=300%2C196&amp;ssl=1 300w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/08a.png?resize=768%2C502&amp;ssl=1 768w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/08a.png?w=1056&amp;ssl=1 1056w\" data-sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/669;\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\">Question 09<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"P09\">Scrolling Text<\/h3>\n\n\n\n<p><strong>Write a Java Script program that on clicking a button, displays scrolling text which moves from left to right with a small delay<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">HTML Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Scrolling Text Example&lt;\/title&gt;\n    &lt;style&gt;\n      #scrollingText {\n        font-size: 24px; font-weight: bold; \n        white-space: nowrap; overflow: hidden;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;button id=&quot;startBtn&quot;&gt;Start Scrolling&lt;\/button&gt;\n    &lt;div id=&quot;scrollingText&quot;&gt;This is some scrolling text!&lt;\/div&gt;\n    &lt;script&gt;\n      var scrollingText = document.getElementById(&quot;scrollingText&quot;);\n      var startBtn = document.getElementById(&quot;startBtn&quot;);\n      var textWidth = scrollingText.clientWidth;\n      var containerWidth = scrollingText.parentNode.clientWidth;\n      var currentPosition = 0;\n      function scrollText() {\n        if (currentPosition &lt; containerWidth) {\n          scrollingText.style.transform = &quot;translateX(-&quot; + currentPosition + &quot;px)&quot;;\n          currentPosition += 1;\n          setTimeout(scrollText, 20);\n        } else {\n          currentPosition = -textWidth;\n          scrollText();\n        }\n      }\n      startBtn.addEventListener(&quot;click&quot;, function() {\n        currentPosition = 0;\n        scrollText();\n      });\n    &lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;Scrolling Text Example&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #B392F0\">#scrollingText<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">font-size<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">24<\/span><span style=\"color: #F97583\">px<\/span><span style=\"color: #E1E4E8\">; <\/span><span style=\"color: #79B8FF\">font-weight<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">bold<\/span><span style=\"color: #E1E4E8\">; <\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #79B8FF\">white-space<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">nowrap<\/span><span style=\"color: #E1E4E8\">; <\/span><span style=\"color: #79B8FF\">overflow<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">hidden<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;startBtn&quot;<\/span><span style=\"color: #E1E4E8\">&gt;Start Scrolling&lt;\/<\/span><span style=\"color: #85E89D\">button<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;scrollingText&quot;<\/span><span style=\"color: #E1E4E8\">&gt;This is some scrolling text!&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> scrollingText <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> document.<\/span><span style=\"color: #B392F0\">getElementById<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&quot;scrollingText&quot;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> startBtn <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> document.<\/span><span style=\"color: #B392F0\">getElementById<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&quot;startBtn&quot;<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> textWidth <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> scrollingText.clientWidth;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> containerWidth <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> scrollingText.parentNode.clientWidth;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> currentPosition <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">scrollText<\/span><span style=\"color: #E1E4E8\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #F97583\">if<\/span><span style=\"color: #E1E4E8\"> (currentPosition <\/span><span style=\"color: #F97583\">&lt;<\/span><span style=\"color: #E1E4E8\"> containerWidth) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">          scrollingText.style.transform <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;translateX(-&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">+<\/span><span style=\"color: #E1E4E8\"> currentPosition <\/span><span style=\"color: #F97583\">+<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">&quot;px)&quot;<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">          currentPosition <\/span><span style=\"color: #F97583\">+=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">          <\/span><span style=\"color: #B392F0\">setTimeout<\/span><span style=\"color: #E1E4E8\">(scrollText, <\/span><span style=\"color: #79B8FF\">20<\/span><span style=\"color: #E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        } <\/span><span style=\"color: #F97583\">else<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">          currentPosition <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">-<\/span><span style=\"color: #E1E4E8\">textWidth;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">          <\/span><span style=\"color: #B392F0\">scrollText<\/span><span style=\"color: #E1E4E8\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      startBtn.<\/span><span style=\"color: #B392F0\">addEventListener<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #9ECBFF\">&quot;click&quot;<\/span><span style=\"color: #E1E4E8\">, <\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        currentPosition <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">        <\/span><span style=\"color: #B392F0\">scrollText<\/span><span style=\"color: #E1E4E8\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    &lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  &lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/09a.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"532\" height=\"297\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/09a.png?resize=532%2C297&#038;ssl=1\" alt=\"\" class=\"wp-image-798 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/09a.png?w=532&amp;ssl=1 532w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/09a.png?resize=300%2C167&amp;ssl=1 300w\" data-sizes=\"(max-width: 532px) 100vw, 532px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 532px; --smush-placeholder-aspect-ratio: 532\/297;\" \/><\/a><figcaption class=\"wp-element-caption\"><strong>Initial Page<\/strong><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/09b.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"532\" height=\"297\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/09b.png?resize=532%2C297&#038;ssl=1\" alt=\"\" class=\"wp-image-799 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/09b.png?w=532&amp;ssl=1 532w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/09b.png?resize=300%2C167&amp;ssl=1 300w\" data-sizes=\"(max-width: 532px) 100vw, 532px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 532px; --smush-placeholder-aspect-ratio: 532\/297;\" \/><\/a><figcaption class=\"wp-element-caption\"><strong>Page with Scrolled text<\/strong><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\">Question 10<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"P10\">Overlapping Images<\/h3>\n\n\n\n<p><strong>Create a webpage containing 3 overlapping images using HTML, CSS and JS. Further when the mouse is over any image, it should be on the top and fully displayed.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">HTML Code<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n\t&lt;head&gt;\n\t\t&lt;meta charset=&quot;utf-8&quot;&gt;\n\t\t&lt;meta name=&quot;author&quot; content=&quot;Putta&quot; &gt;\n\t\t&lt;title&gt;Animal Stacking&lt;\/title&gt;\n\t\t&lt;style&gt;\n\t\th1 {text-align: center;}\n\n\t\t.dog {\n\t\tposition: absolute;\n\t\tleft: 10%; top: 10%;\n\t\tz-index: 0;\n\t\t}\n\t\t.cat {\n\t\tposition: absolute;\n\t\tleft: 30%; top: 30%;\n\t\tz-index: 1;\n\t\t}\n\t\t.horse {\n\t\tposition: absolute;\n\t\tleft: 50%; top: 50%;\n\t\tz-index: 2;\n\t\t}\n\t\t&lt;\/style&gt;\n\t\t&lt;script&gt;\n\t\tvar topIndex = 2;\n\t\tfunction moveToTop(picture) {\n\t\tpicture.style.zIndex = ++topIndex;\n\t\t}\n\n\t\t&lt;\/script&gt;\n\t&lt;\/head&gt;\n\t&lt;body&gt;\n\t\t&lt;h1&gt;Image Overlap Demo&lt;\/h1&gt;\n\t\t&lt;div id=&quot;image-container&quot;&gt;\n\t\t\t&lt;img id=&quot;dog&quot; class=&quot;dog&quot; src=&quot;dog.jpg&quot; onmouseover=&quot;moveToTop(this)&quot; width=&quot;400&quot; height=&quot;300&quot;&gt;\n\t\t\t&lt;img id=&quot;cat&quot; class=&quot;cat&quot; src=&quot;cat.jpg&quot; onmouseover=&quot;moveToTop(this)&quot; width=&quot;400&quot; height=&quot;300&quot;&gt;\n\t\t\t&lt;img id=&quot;horse&quot; class=&quot;horse&quot; src=&quot;horse.jpg&quot; onmouseover=&quot;moveToTop(this)&quot; width=&quot;400&quot; height=&quot;300&quot;&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E1E4E8\">&lt;!<\/span><span style=\"color: #85E89D\">DOCTYPE<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">lang<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;en&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t&lt;<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t&lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">charset<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;utf-8&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t&lt;<\/span><span style=\"color: #85E89D\">meta<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">name<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;author&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">content<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;Putta&quot;<\/span><span style=\"color: #E1E4E8\"> &gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t&lt;<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;Animal Stacking&lt;\/<\/span><span style=\"color: #85E89D\">title<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t&lt;<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #85E89D\">h1<\/span><span style=\"color: #E1E4E8\"> {<\/span><span style=\"color: #79B8FF\">text-align<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">center<\/span><span style=\"color: #E1E4E8\">;}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #B392F0\">.dog<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #79B8FF\">position<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">absolute<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #79B8FF\">left<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">; <\/span><span style=\"color: #79B8FF\">top<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">10<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #79B8FF\">z-index<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">0<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #B392F0\">.cat<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #79B8FF\">position<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">absolute<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #79B8FF\">left<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">30<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">; <\/span><span style=\"color: #79B8FF\">top<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">30<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #79B8FF\">z-index<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">1<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #B392F0\">.horse<\/span><span style=\"color: #E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #79B8FF\">position<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">absolute<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #79B8FF\">left<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">50<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">; <\/span><span style=\"color: #79B8FF\">top<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">50<\/span><span style=\"color: #F97583\">%<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #79B8FF\">z-index<\/span><span style=\"color: #E1E4E8\">: <\/span><span style=\"color: #79B8FF\">2<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t&lt;\/<\/span><span style=\"color: #85E89D\">style<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t&lt;<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #F97583\">var<\/span><span style=\"color: #E1E4E8\"> topIndex <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">2<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t<\/span><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">moveToTop<\/span><span style=\"color: #E1E4E8\">(<\/span><span style=\"color: #FFAB70\">picture<\/span><span style=\"color: #E1E4E8\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\tpicture.style.zIndex <\/span><span style=\"color: #F97583\">=<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #F97583\">++<\/span><span style=\"color: #E1E4E8\">topIndex;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t&lt;\/<\/span><span style=\"color: #85E89D\">script<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t&lt;\/<\/span><span style=\"color: #85E89D\">head<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t&lt;<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t&lt;<\/span><span style=\"color: #85E89D\">h1<\/span><span style=\"color: #E1E4E8\">&gt;Image Overlap Demo&lt;\/<\/span><span style=\"color: #85E89D\">h1<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t&lt;<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;image-container&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t&lt;<\/span><span style=\"color: #85E89D\">img<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;dog&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;dog&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">src<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;dog.jpg&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onmouseover<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">moveToTop<\/span><span style=\"color: #9ECBFF\">(<\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #9ECBFF\">)&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">width<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;400&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">height<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;300&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t&lt;<\/span><span style=\"color: #85E89D\">img<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;cat&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;cat&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">src<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;cat.jpg&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onmouseover<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">moveToTop<\/span><span style=\"color: #9ECBFF\">(<\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #9ECBFF\">)&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">width<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;400&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">height<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;300&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t\t&lt;<\/span><span style=\"color: #85E89D\">img<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">id<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;horse&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">class<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;horse&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">src<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;horse.jpg&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">onmouseover<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;<\/span><span style=\"color: #B392F0\">moveToTop<\/span><span style=\"color: #9ECBFF\">(<\/span><span style=\"color: #79B8FF\">this<\/span><span style=\"color: #9ECBFF\">)&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">width<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;400&quot;<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">height<\/span><span style=\"color: #E1E4E8\">=<\/span><span style=\"color: #9ECBFF\">&quot;300&quot;<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t\t&lt;\/<\/span><span style=\"color: #85E89D\">div<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">\t&lt;\/<\/span><span style=\"color: #85E89D\">body<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">&lt;\/<\/span><span style=\"color: #85E89D\">html<\/span><span style=\"color: #E1E4E8\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<p><strong>Images used in this exercise<\/strong><\/p>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-14fd65a2-da21-43df-ba8d-e50cbd0b4cb8\" href=\"https:\/\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/dog-4.jpg\">dog.jpg<\/a><a href=\"https:\/\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/dog-4.jpg\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-14fd65a2-da21-43df-ba8d-e50cbd0b4cb8\">Download<\/a><\/div>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-ab0dbd25-3fc2-4ccd-83d3-0248c253e26b\" href=\"https:\/\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/cat-3.jpg\">cat.jpg<\/a><a href=\"https:\/\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/cat-3.jpg\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-ab0dbd25-3fc2-4ccd-83d3-0248c253e26b\">Download<\/a><\/div>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-a1d61222-73c9-4040-8f7a-2f57d6bbbfdd\" href=\"https:\/\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/horse-2-scaled.jpg\">horse-2<\/a><a href=\"https:\/\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/horse-2-scaled.jpg\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-a1d61222-73c9-4040-8f7a-2f57d6bbbfdd\">Download<\/a><\/div>\n\n\n\n<p><strong>Program Output<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/10a.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"870\" height=\"682\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/10a.png?resize=870%2C682&#038;ssl=1\" alt=\"\" class=\"wp-image-803 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/10a.png?w=870&amp;ssl=1 870w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/10a.png?resize=300%2C235&amp;ssl=1 300w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/10a.png?resize=768%2C602&amp;ssl=1 768w\" data-sizes=\"(max-width: 870px) 100vw, 870px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 870px; --smush-placeholder-aspect-ratio: 870\/682;\" \/><\/a><figcaption class=\"wp-element-caption\"><strong>Mouse over Image 1<\/strong><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/10b.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"870\" height=\"682\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/10b.png?resize=870%2C682&#038;ssl=1\" alt=\"\" class=\"wp-image-814 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/10b.png?w=870&amp;ssl=1 870w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/10b.png?resize=300%2C235&amp;ssl=1 300w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/10b.png?resize=768%2C602&amp;ssl=1 768w\" data-sizes=\"(max-width: 870px) 100vw, 870px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 870px; --smush-placeholder-aspect-ratio: 870\/682;\" \/><\/a><figcaption class=\"wp-element-caption\"><strong>Mouse over Image <\/strong>2<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/10c.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"870\" height=\"682\" data-src=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/10c.png?resize=870%2C682&#038;ssl=1\" alt=\"\" class=\"wp-image-815 lazyload\" data-srcset=\"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/10c.png?w=870&amp;ssl=1 870w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/10c.png?resize=300%2C235&amp;ssl=1 300w, https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/07\/10c.png?resize=768%2C602&amp;ssl=1 768w\" data-sizes=\"(max-width: 870px) 100vw, 870px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 870px; --smush-placeholder-aspect-ratio: 870\/682;\" \/><\/a><figcaption class=\"wp-element-caption\"><strong>Mouse over Image 3<\/strong><\/figcaption><\/figure>\n\n\n\n<p>All the programs have been tested on <a href=\"https:\/\/releases.ubuntu.com\/22.04\/\" target=\"_blank\" rel=\"noreferrer noopener\">Ubuntu 22.04.4 LTS (Jammy Jellyfish)<\/a>&nbsp; 64-bit Kernel Linux 5.15.0-56-generic<\/p>\n\n\n\n<p>These programs can run on any GNU\/Linux Operating system or any other OS with any modern browser installed.<\/p>\n\n\n\n<p>Looking for your feedback. Report if there are any errors in the manual in the comments section.<\/p>\n\n\n\n<p>For other programming lab manuals of First year can be found in this blog or by clicking on the button below<strong>.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/moodle.sit.ac.in\/blog\/vtu-lab-manuals-using-foss\/\" target=\"_blank\" rel=\"noreferrer noopener\">MAIN PAGE<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>VTU has recently launched an exciting new subject called &#8220;Introduction to Web Programming&#8221; (Sub Code: BPLCK105A\/205A) exclusively for first-year students. This comprehensive course incorporates an integrated lab component, providing hands-on experience. I am delighted to present the initial version of the lab manual, which includes meticulously crafted solutions and sample outputs for all the lab [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":402,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-container-style":"default","site-container-layout":"default","site-sidebar-layout":"default","disable-article-header":"default","disable-site-header":"default","disable-site-footer":"default","disable-content-area-spacing":"default","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[3],"tags":[98,100,99,20,52,25,26,51,53,35,43,54],"class_list":["post-763","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming","tag-bplck105a","tag-bplck105a-bplck205a","tag-bplck205a","tag-computer-programming","tag-css","tag-first-year-vtu","tag-foss","tag-html","tag-javascript","tag-lab-manual","tag-vtu","tag-web-programming"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/moodle.sit.ac.in\/blog\/wp-content\/uploads\/2023\/02\/webLab.png?fit=1085%2C550&ssl=1","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/posts\/763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/comments?post=763"}],"version-history":[{"count":26,"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/posts\/763\/revisions"}],"predecessor-version":[{"id":2302,"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/posts\/763\/revisions\/2302"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/media\/402"}],"wp:attachment":[{"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/media?parent=763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/categories?post=763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/moodle.sit.ac.in\/blog\/wp-json\/wp\/v2\/tags?post=763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}