第四節課：初識 HTML 與 JavaScript

暖身問題： 你是否想過網頁是如何運作的？今天，我們將了解網頁的組成，並學習如何用 JavaScript 讓網頁變得互動！

教學目標

了解 HTML 的基本結構。
學會撰寫 JavaScript 來實現簡單的互動效果。
熟悉 HTML 和 JavaScript 的結合方式。

教學內容與操作步驟

1. 建立你的第一個 HTML 網頁


<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <title>我的第一個網頁</title>
</head>
<body>
    <h1>歡迎來到我的網頁！</h1>
    <p>這是我第一個用 HTML 建立的網頁。</p>
</body>
</html>

步驟：

打開任意文字編輯器，例如 Notepad 或 VS Code。
將上方程式碼複製到新檔案，並儲存為 index.html。
用瀏覽器打開檔案，檢查是否成功顯示網頁內容。

問題：如果希望將標題文字改為你的名字，應該修改哪部分程式碼？

2. 用 JavaScript 增加互動功能


<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <title>互動網頁</title>
</head>
<body>
    <h1>歡迎來到互動網頁！</h1>
    <button onclick="sayHello()">點擊我</button>

    <script>
        function sayHello() {
            alert("你好，歡迎學習 JavaScript！");
        }
    </script>
</body>
</html>

步驟：

將上方程式碼複製到文字編輯器中。
儲存為 interactive.html 並用瀏覽器打開。
點擊按鈕，檢查是否彈出對話框。

問題：如果希望對話框顯示其他訊息，例如 "你好，學生！"，應該修改哪部分程式碼？

課程延伸與挑戰

挑戰1： 增加一個按鈕，點擊後改變網頁背景顏色。
挑戰2： 在網頁中顯示一個輸入框，讓使用者輸入名字並顯示在標題中。