main.htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Programming Tutorial</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #4CAF50;
            color: white;
            padding: 1em;
            text-align: center;
        }
        section {
            padding: 1em;
            border-bottom: 1px solid #ddd;
        }
        h2 {
            color: #4CAF50;
        }
    </style>
</head>
<body>
    <header>
        <h1>Programming Tutorial</h1>
    </header>
    <section>
        <h2>Introduction</h2>
        <p>Welcome to this programming tutorial. In this section, we will cover the basics of programming.</p>
    </section>
    <section>
        <h2>Getting Started</h2>
        <p>In this section, we will set up the development environment and write our first program.</p>
        <label for="nameInput">Your name:</label>
        <input type="text" id="nameInput" name="nameInput">
        <button onclick="displayResult()">Send</button>
        <p id="resultText"></p>
    </section>
    <section>
        <h2>Variables and Data Types</h2>
        <p>This section will cover variables, data types, and how to use them in your programs.</p>
    </section>
    <section>
        <h2>Control Structures</h2>
        <p>Learn about control structures such as loops and conditionals in this section.</p>
    </section>
    <section>
        <h2>Functions</h2>
        <p>In this section, we will discuss functions and how to create and use them.</p>
    </section>
    <section>
        <h2>Conclusion</h2>
        <p>We will wrap up the tutorial and provide some final thoughts and resources for further learning.</p>
    </section>
</body>

<script>
    function displayResult() {
        var name = document.getElementById('nameInput').value;
        document.getElementById('resultText').innerText = 'Hello, ' + name + '!';
    }
</script>

</html>