HTML 網頁小屋 — 第 1 單元完整閉環
1-1 標籤 → 1-2 清單 → 1-5 指揮官(AI 實作)→ 1-6 偵探(抓蟲)→ 1-7 實戰練習(Canvas)。一堂走完「自己蓋 → 指揮 AI 蓋 → 抓 AI 的蟲 → 驗收 AI」。
👆 本堂重點,一眼看完
🗺️ 本堂流程(共約 2 小時)
1-3 圖片連結、1-4 表格移到回家自學(網站有整頁漫畫)。三個活動全在課程網站與 Gemini 上進行,節奏是「學 → 指揮 → 抓蟲 → 實戰」。
🎲 本堂小活動一覽
- 任務一 · 三關:換招牌文字 → 自己加一組 <p> → 修復漏風小屋(得「基地修復徽章」🛠️)
- 任務二 · 整理探險背包:口頭說五樣物品 → 選 ul/ol 做清單(反問:水壺一定要第一個嗎?)
- 驗收問答:5 題隨機提問,答對發星星
- 🏅 指揮官:命令奇奇做森林公告欄(寫驗收卡 → 下指令 → 親手驗收)
- 🔍 偵探抓蟲:找出少了斜線的結束標籤
- 🤖 Canvas:自我介紹網頁(驗收 AI 用的標籤對不對)→ 發佈到作品集
🎯 這一堂特別注意
共通守則(學習循環、指揮官/偵探帶法、星星制度、個資紅線、開課前機器準備)集中在 🏠 首頁 — 開課前讀一次就好,這裡只列這一堂特別要注意的。
- 巡場抓「沒關門」:孩子最常忘記結束標籤的斜線。先讓他觀察右邊哪裡怪,再提示「哪個開始標籤沒找到結束夥伴?」— 不直接幫改。
- 第一次用練習區:先花兩分鐘講清楚「左黑=施工區、右白=成果區」,後面九堂都靠這個認知。
- 第一次碰 Gemini:1-7 是孩子第一次自己操作 Canvas,預留時間處理登入卡住、貼錯位置。
開場:再約定一次上課規矩
口白老師開場
「hi~孩子們,我是今天的老師。上課前,我們再約定一次規矩:」
「想上廁所,可以直接站起來離開,但一定要記得回來教室。」
「身體有任何不舒服,一定要及時告訴老師,讓老師幫助大家。」
「我們上課時,不是一直看電腦喔!老師會用投影機把內容投出來 — 除非老師說『孩子們,請幫忙打開電腦』,這時候再開電腦 😊」
1-1 HTML:網頁是標籤蓋出來的
故事三關實作課文口白
「各位小探長,今天我們要在森林裡蓋一間『網頁小屋』。蓋房子需要一塊一塊積木,製作網頁也需要一個一個 HTML 標籤 — <h1> 是最大的標題,<p> 是一段文字。每個標籤都有自己的工作,就像門、窗戶和屋頂不能隨便交換。」
「標籤要成雙成對:前面是開始標籤 <h1>,後面是結束標籤 </h1> — 結束標籤多了一條斜線,代表『這個區域到這裡結束』。」
「忘記把標籤關起來,就像蓋房子忘記補牆壁 — 文字變大、位置跑掉、版面亂掉。每個開始標籤都要找到它的結束夥伴!」
練習區開場:黑白雙畫面
老師指著畫面
「左邊黑色的地方是施工區,我們在這裡下指令;右邊白色的地方是成果區,馬上看到網頁長什麼樣子。每次只修改一個地方 — 先猜右邊會發生什麼,再動手驗證。」
任務一:替基地裝上招牌
第一關|換掉招牌文字 — 只修改標籤中間的內容。提問:哪一段文字最大?<h1> 和 </h1> 哪個是開始?結束標籤多了什麼?
第二關|加入新的房間 — 不能複製整份程式,只能自己增加一組 <p>:
<p>這裡可以休息、研究和整理裝備。</p>第三關|修復漏風小屋 — 老師故意刪除一個結束標籤:
<h2>探險隊集合處孩子必須補上 </h2>。完成後獲得「基地修復徽章」🛠️。
1-2 清單與強調
故事任務二驗收問答課文口白
「做清單前先決定需不需要順序:<ul> 圓點清單,誰前誰後沒關係;<ol> 編號清單,瀏覽器自動加 1、2、3。每個項目都放在 <li> 裡面。」
「要提醒的內容用強調標籤:<b> 變粗、<i> 傾斜、<u> 畫底線。挑戰:挑清單一項,前面加 <u>、後面加 </u> — 完整包住,不能只開門忘了關門!」
任務二:整理探險背包
先請孩子口頭說出五樣想帶的物品,再決定用哪種清單。
<h2>探險背包</h2>
<ul>
<li>水壺</li>
<li>地圖</li>
<li>餅乾</li>
</ul><ul>;「先出發再整理背包合理嗎?」有順序 → <ol>驗收:隨機提問(答對發星星)
<ul>和<ol>有什麼不同?<li>可以單獨放在外面嗎?</h1>裡面的斜線代表什麼?<u>會讓文字發生什麼變化?- 如果刪掉這個結束標籤,可能會怎樣?
🏅 1-5 指揮官:命令奇奇做森林公告欄
AI 實作(課程網站)老師轉場
「恭喜升級!從建造者變成指揮官 — 現在換 AI 學徒奇奇幫你寫。但小心,奇奇寫得快、卻常常聽一半。AI 時代最厲害的人:把需求說得超清楚的人、會親手驗收的人!」
任務:指揮奇奇做「森林公告欄」網頁 — 一個大標題、兩段公告文字、至少 3 項的清單。課文裡有示範成果圖,先看圖再動工。
指揮官三步驟(投影帶著走)
- 先寫驗收卡:「要有大標題」「至少列出 3 項公告」
- 下指令:「請做一個網頁,大標題是森林公告欄,底下有兩段說明文字,再用清單列出 3 項公告」
- 親手驗收:一張卡一張卡核對 — 全過才蓋總部認證章!
🔍 1-6 偵探:吞掉整頁的大標題
抓蟲(課程網站)案情
「奇奇貼了公告,整頁文字全變成巨大標題 — 大標題像黑洞一樣把後面的內容全吞進去了!」
<h1>啟思創客公告<h1>
<p>今天能量石大豐收!</p>
<p>晚上七點營火晚會。</p>藏了 1 隻蟲:結束標籤少了那一撇「/」— 正好呼應 1-1 第三關的「漏風小屋」!
🤖 1-7 實戰練習:自我介紹網頁
★ Canvas 壓軸老師開場
「最後進到 AI 世界!先複習:不能跟 AI 說什麼?(真實姓名、學校、住址、電話)你已經認識標題、段落、清單 — 這次讓 AI 蓋一頁自我介紹,你打開程式碼驗收:它用的標籤跟你學的一樣嗎?」
流程:打開課程網站 1-7 實戰練習 → 按提示詞框「📋 一鍵複製」→ 到 Gemini 貼上送出、選 Canvas → 按驗收清單逐條檢查 → 不合格打字叫它改。
📋 官方提示詞(課文內建一鍵複製,不用手打)
做一個「自我介紹網頁」:大標題、一段自我介紹、「我的三個優點」清單、emoji 大頭貼 — 內容用假資料(暱稱:小探長),不放真實姓名、不用外部圖片。
✅ 驗收清單(課文同款)
- 大標題、段落、清單三種元素都有
- 打開 Canvas 的程式碼,找到 h1、p、ul 標籤 — 驗收 AI 用的標籤對不對!
- 頁面上沒有出現真實姓名
🛡️ 巡場重點:提示詞和暱稱不出現真實個資;一律用課前登好的大人/學校帳號。