Create Interactive Web Pages

Learning Objectives

Understand the basics of web pages
Learn the relationship between HTML, CSS, and JavaScript
Create your first interactive web page
Understand the DOM

Section 13.1: What's a Web Page?

Components of a Web Page

A web page is made of:

HTML: Structure (content and organization)
CSS: Styling (appearance and layout)
JavaScript: Behavior (interactivity)

Example HTML Structure

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome</h1>
    <p>This is my first web page</p>
</body>
</html>

Adding JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Interactive Page</title>
</head>
<body>
    <h1 id="title">Hello</h1>
    <button id="btn">Click me</button>

    <script>
        let button = document.getElementById("btn");
        button.addEventListener("click", function() {
            alert("You clicked the button!");
        });
    </script>
</body>
</html>

Section 13.2: The Languages of the Web

HTML (HyperText Markup Language)

Defines the structure of web pages:

<h1>Heading</h1>
<p>Paragraph</p>
<button>Button</button>
<img src="image.jpg" alt="description">

CSS (Cascading Style Sheets)

Defines the appearance:

body {
    background-color: lightblue;
    font-family: Arial;
}

button {
    background-color: blue;
    color: white;
    padding: 10px;
}

JavaScript

Defines the behavior:

let button = document.querySelector("button");
button.addEventListener("click", function() {
    console.log("Button was clicked");
});

Integration Example

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Welcome to Web Development</h1>
    <button id="greet">Greet Me</button>

    <script>
        document.getElementById("greet").addEventListener("click", function() {
            alert("Hello from JavaScript!");
        });
    </script>
</body>
</html>

Section 13.3: Browser Integration

How Browsers Work

Parse HTML
Apply CSS styles
Execute JavaScript
Render the page

JavaScript in Browsers

JavaScript has access to:

Browser APIs (fetch, geolocation, etc.)
DOM (Document Object Model)
Local storage
Canvas and graphics
Audio/video
And much more!

Understanding the DOM

The Document Object Model (DOM) is a representation of your HTML page that JavaScript can interact with.

// Access elements
let heading = document.getElementById("title");
let buttons = document.querySelectorAll("button");

// Change content
heading.textContent = "New Title";

// Change styles
heading.style.color = "red";

// Listen to events
heading.addEventListener("click", function() {
    console.log("Heading was clicked");
});

Creating Your First Interactive Page

Example: Color Changer

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial;
            text-align: center;
            padding: 20px;
        }
        
        button {
            padding: 10px 20px;
            margin: 10px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Color Changer</h1>
    <button onclick="changeColor('red')">Red</button>
    <button onclick="changeColor('blue')">Blue</button>
    <button onclick="changeColor('green')">Green</button>

    <script>
        function changeColor(color) {
            document.body.style.backgroundColor = color;
        }
    </script>
</body>
</html>

Key Concepts

Inline Event Handlers

<button onclick="doSomething()">Click</button>

Event Listeners

let button = document.getElementById("myButton");
button.addEventListener("click", function() {
    console.log("Clicked!");
});

Best Practices

Separate HTML, CSS, and JavaScript

   index.html
   style.css
   script.js

Use semantic HTML

   <button> instead of <div onclick>

Avoid inline JavaScript

   // Link external script file instead

Key Takeaways

✅ Web pages combine HTML, CSS, and JavaScript
✅ HTML provides structure
✅ CSS provides styling
✅ JavaScript provides behavior
✅ DOM allows JavaScript to interact with HTML
✅ Events trigger JavaScript code

Quiz Questions

What does each language (HTML, CSS, JS) do?
What is the DOM?
How do you select an element in JavaScript?
How do you listen to button clicks?
What are events?

Next Module: Module 14 - Discover the DOM