leave **HTML and CSS Guidelines for Web Development**1. **Ensure Proper Tag Use**: Your HTML page must be correctly formatted with the appropriate tags. **Important Reminder**: Make sure to close your HTML tags.2. **Final HTML Layout**: Your final HTML file should replicate the layout on the right side of the screen (excluding any personal identifiers). Pay close attention to detailed formatting.3. **Font and Style Specifications**: - All paragraphs should use the Arial font, set at 12pt in size. - Text should be displayed in blue color. 4. **CSS Usage**: Employ CSS wherever feasible to maintain consistency and style.5. **Interactive Elements**: Configure paragraph elements to change their background color upon hovering.6. **Button Functionality**: - This section requires the use of HTML DOM and JavaScript. - The button must be configured to change only the text color when clicked. The necessary JavaScript function is provided; integrate it into your code for effective functionality.**Visual Elements Explained:**- **Headings**: - "This is a heading 1." - "This is a heading 2 that is green."- **Paragraph Styles**: - Italicized paragraph: "This paragraph is using italics text." - Bold text: "This paragraph is using bold text."- **Table Example**: Titled as "This is a table." - Consists of two columns labeled "Green Cell" and "Yellow Cell," each colored accordingly.- **Interactive Text**: "Click the button below to change my text color."- **Button**: Labeled simply as “Button,” it is used to demonstrate the JavaScript function.

Below is the code for given HTML page:Code: <!DOCTYPE html> <html> <head> <script> function change() { document.getElementById("d1").style.color = "red"; } </script> <title></title> <style> p{ font-family: Arial; font-size: 12px; color: blue; } h2{ color: green; } p:hover { background-color: yellow; } td { border: 1px solid black; text-align: center; padding: 10px; } </style> </head> <body> <h1>This is a heading 1</h1> <h2>This is a heading 2 that is green</h2> <p> <em>this paragraph using italics</em> </p> <p> <b>this paragraph using bold text</b> </p> <p> this is table </p> <table border="1"> <tr> <th bgcolor="green">Green cell</th> <th bgcolor="yellow">yellow cell</th> </tr> <tr> <td></td> <td></td> </tr> </table> <div id="d1"> Click the button to change my text colour </div> <button onclick="change()" type="submit" class="stylebutton"> Button </button> </body> </html>Output: