<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; } h1 { color: navy; } </style> </head> <body> <h1>Welcome to the HTML Playground</h1> <p id="message">Click the button to change this text.</p> <button onclick="changeText()">Change Text</button> <script> function changeText() { document.getElementById('message').innerText = 'Text changed!'; } </script> </body> </html>