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:

Engineering

Computer Science

This is a heading 1. This is a heading 2 that is green. 2. Your HTML page must be properly formatted with the correct tags. DO NOT FORGET TO CLOSE This paragraph is using italics text. YOUR HTML TAGS! This paragraph is using bold text. 3. Your final HTML file should look exactly like what you see to the right (except with YOUR name). Examine the formatting you see. 4. All paragraphs must utilize the Arial font, 12pt in size and be blue in color. 5. You must utilize CSS as much as possible. 6. When you hover over ANY paragraph, the background color should change to yellow. This is a table Yellow Cell 7. For the Button. This part utilizes HTML DOM and JavaScript. You must configure the button so that when the button is clicked, it changes ONLY the text above it to the color red. I have provided the Green Cell Click the button below to change my text color. Button un to vou to make it work.