<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Sample Web Page</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            background-color: #f2f2f2;

            margin: 0;

            padding: 20px;

        }

        h1 {

            color: #333;

        }

        p {

            color: #666;

            font-size: 18px;

        }

        button {

            padding: 10px 20px;

            background-color: #4CAF50;

            color: #fff;

            border: none;

            cursor: pointer;

        }

        button:hover {

            background-color: #45a049;

        }

    </style>

    <script>

        function showAlert() {

            alert("Hello! This is a sample web page.");

        }

    </script>

</head>

<body>

    <h1>Welcome to Sample Web Page</h1>

    <p>This is a simple web page created using HTML, CSS, and JavaScript.</p>

    <button onclick="showAlert()">Click Me</button>

</body>

</html>

Explanation:

- The HTML code includes the basic structure of an HTML document, including the `<!DOCTYPE html>` declaration, `<html>` element, `<head>` element, and `<body>` element.

- Inside the `<head>` section, we have specified the character encoding (`<meta charset="UTF-8">`), the viewport settings (`<meta name="viewport" content="width=device-width, initial-scale=1.0">`), and the page title (`<title>`).

- The `<style>` section contains CSS code that defines the styling for the elements on the web page. In this example, we have defined the font, background color, margin, padding, and styles for headings, paragraphs, and buttons.

- The `<script>` section contains JavaScript code. In this case, we have a simple `showAlert()` function that displays an alert box when the button is clicked.

- Inside the `<body>` section, we have the content of the web page. It includes an `<h1>` heading, a `<p>` paragraph, and a `<button>` element.

- When the button is clicked, the `showAlert()` function is called, and it displays an alert box with the message "Hello! This is a sample web page."

This sample web page demonstrates the use of HTML for structure, CSS for styling, and JavaScript for interactivity. When you open this code in a web browser, you will see the content displayed with the specified styles. Clicking the button will trigger the alert box with the message.