Part 1 - HTML 基礎入門
首頁 下一章 → 1 / 19

Part 1：HTML 基礎入門

認識網頁骨架，動手修改你的第一個網頁

HTML 基礎 Tag 標籤 VS Code Tab UI

曾慶良(阿亮老師) | AI 協作簡報實戰工作坊
實作 1-2 | Time 1-2

本章學習內容

實作 1：認識 HTML 基礎

  • 了解 HTML 是用來描述「內容結構」的
  • 認識基本標籤：<h1>、<p>、<section>
  • 親手修改 HTML，看到瀏覽器即時更新
  • 理解 class 屬性的用途

實作 2：製作 Tab UI

  • 理解網頁「切換」原理：顯示/隱藏
  • 學會使用 VS Code 開啟 HTML
  • 練習修改現有程式碼
  • 建立「編輯 → 儲存 → 預覽」的工作流程
核心觀念：你不需要會寫程式，只需要「認識」HTML，然後讓 AI 幫你處理技術細節！

Time 1

實作 1：認識 HTML，動手改出你的第一個網頁 Part 1/8

學習目標

  • 了解 HTML 是用來描述「內容結構」的
  • 認識基本標籤：<h1>、<p>、<section>
  • 親手修改 HTML，看到瀏覽器即時更新
  • 理解 class 屬性的用途
核心觀念：HTML 就像是網頁的「骨架」，你不需要會寫程式，只需要「認識」它！
CodePen 編輯畫面

亮師 1：CodePen 初始編輯畫面

Time 1

什麼是 HTML？用書信來比喻 Part 2/8

想像你在寫一封信...

親愛的媽媽：

今天天氣很好，我去公園散步了。

祝你身體健康！

小明

這封信有「標題」、「內容」、「結尾」、「署名」

HTML 的作用：告訴電腦每一段文字的「角色」是什麼

用 HTML 來寫

<h1>親愛的媽媽：</h1>

<p>今天天氣很好，
我去公園散步了。</p>

<p>祝你身體健康！</p>

<p>小明</p>

<h1> = 大標題 (heading)

<p> = 段落 (paragraph)

Time 1

標籤的開始與結束 Part 3/8

每個標籤都有「開始」和「結束」

<h1>這是標題</h1>
 ↑              ↑
開始標籤     結束標籤
            (多了斜線 /)

中間包住的文字，就是這個標籤的內容

記住：結束標籤多了一個斜線 /
HTML 結構示意

亮師 3：HTML 程式碼與瀏覽器顯示的對應

Time 1

你需要記住的 6 個名詞 Part 4/8

1. HTML（結構）

網頁的「骨架」，用來告訴電腦「內容是什麼」

2. Tag（標籤）

用尖括號包起來的東西，如 <h1>、<p>

3. Element（元素）

完整的標籤組合：開始標籤 + 內容 + 結束標籤

4. Attribute（屬性）

標籤的額外設定，如 class="title"

5. Class（分類）

給元素取「名字」的屬性，像是門牌號碼

6. 瀏覽器渲染

瀏覽器讀取 HTML 並「畫」在螢幕上的過程

Time 1

實際操作：開啟 HTML 練習場 Part 5/8

操作步驟

1打開 Chrome 瀏覽器

2輸入網址：codepen.io/pen/

3在 HTML 區塊輸入程式碼

<h1>我的第一個網頁</h1>
<p>這是我用 HTML 寫的
第一段文字。</p>

4觀察右邊預覽區的結果

恭喜！你完成了人生中的第一個網頁！
完成練習後的畫面

亮師 4：完成練習後的畫面

Time 1

VS Code 基本操作技巧 Part 6/8

必學快捷鍵

功能 Windows Mac
儲存檔案 Ctrl + S Cmd + S
搜尋文字 Ctrl + F Cmd + F
複製 Ctrl + C Cmd + C
貼上 Ctrl + V Cmd + V
復原 Ctrl + Z Cmd + Z

右鍵選單操作

  • 在檔案上按右鍵：
    • 「以 Code 開啟」- 用 VS Code 編輯
    • 「複製」- 複製檔案
    • 「重新命名」- 改檔名
  • 在程式碼上按右鍵：
    • 「格式化文件」- 自動排版
    • 「剪下」「複製」「貼上」
小技巧：按住 Ctrl 再按滑鼠左鍵可以多選！

Time 1

進階練習：Section 與 Class Part 7/8

Section = 簡報的「一頁」

<section>
  <h1>第一頁：自我介紹</h1>
  <p>大家好，我是小明。</p>
</section>

<section>
  <h2>第二頁：我的興趣</h2>
  <p>我喜歡旅遊和攝影。</p>
</section>

Class = 門牌號碼

<h1 class="title">標題</h1>
<p class="subtitle">副標題</p>
Section 結構示意

亮師 5：三個 Section 代表三頁

Class 的作用：用來控制這個元素的外觀（顏色、大小等）

Time 1

實作 1 完成確認 Part 8/8

了解 HTML 結構

HTML 是用來描述「內容結構」的標記語言

認識基本標籤

<h1>、<p>、<section>

親手修改過

在 CodePen 或 VS Code 修改並看到結果

理解 Class

Class 是給元素取「名字」的屬性

完成！你已經認識 HTML 了！接下來我們來做一個會切換的網頁標籤。

Time 2

實作 2：製作「會切換」的網頁標籤 Part 1/6

學習目標

  • 理解網頁「切換」原理：顯示/隱藏
  • 學會使用 VS Code 開啟 HTML
  • 練習修改現有程式碼
  • 建立「編輯 → 儲存 → 預覽」的工作流程
核心觀念：網頁切換不是真的換頁，而是隱藏/顯示不同內容！
Tab UI 範例

亮師 8：標籤頁切換效果

Time 2

標籤切換的原理 Part 2/6

點擊簡介標籤

點擊「簡介」標籤

點擊課程標籤

點擊「課程」標籤

原理：所有內容一開始都在頁面上，程式只是控制哪個要「顯示」、哪個要「隱藏」。這和 HTML 簡報的切換原理一模一樣！

Time 2

使用 VS Code 編輯檔案（詳細步驟）Part 3/6

開啟檔案步驟

1找到 tab-ui.html 檔案

2在檔案上按右鍵

3選擇「以 Code 開啟」或「Open with Code」

4VS Code 會開啟並顯示程式碼

使用搜尋功能找到要修改的地方

5按 Ctrl + F 開啟搜尋

6輸入「簡介」來搜尋

7VS Code 會跳到該位置並標黃

VS Code 開啟檔案

亮師 11：用 VS Code 開啟 HTML

Time 2

修改標籤按鈕的文字 Part 4/6

找到這段程式碼

<button class="tab-btn active">簡介</button>
<button class="tab-btn">課程</button>
<button class="tab-btn">作品</button>
<button class="tab-btn">聯絡我</button>

改成你想要的內容

<button class="tab-btn active">關於我</button>
<button class="tab-btn">我的技能</button>
<button class="tab-btn">作品集</button>
<button class="tab-btn">聯絡方式</button>
注意：只修改標籤裡的文字，不要動到 class 和其他屬性！

修改步驟

1用滑鼠選取「簡介」兩個字

2直接打字輸入「關於我」（會自動取代）

3重複以上步驟修改其他標籤

4按 Ctrl + S 儲存

小技巧：如果打錯了，按 Ctrl + Z 可以復原！

Time 2

修改標籤對應的內容 Part 5/6

找到內容區塊

搜尋 tab-content 找到對應的內容

<div class="tab-content" id="tab1">
  <h2>關於我</h2>
  <p>哈囉！我是小明。</p>
</div>

<div class="tab-content" id="tab2">
  <h2>我的技能</h2>
  <ul>
    <li>PowerPoint 簡報製作</li>
    <li>AI 工具應用</li>
  </ul>
</div>
對應關係：id="tab1" 對應第一個標籤按鈕
內容區塊程式碼

亮師 12：tab-content 內容區塊

Time 2

儲存並預覽結果（重要工作流程）Part 6/6

完整工作流程（請牢記！）

┌─────────────┐
│  VS Code    │
│  修改程式碼  │
└──────┬──────┘
       ↓
┌─────────────┐
│ Ctrl + S    │
│  儲存檔案   │
└──────┬──────┘
       ↓
┌─────────────┐
│  切換到     │
│  Chrome     │
└──────┬──────┘
       ↓
┌─────────────┐
│    F5      │
│ 重新整理   │
└──────┬──────┘
       ↓
┌─────────────┐
│ 確認修改   │
│   成功     │
└─────────────┘

你學會了什麼？

  • 網頁「切換」= 顯示/隱藏
  • HTML 元素有「對應關係」
  • 修改只需改「文字內容」
  • VS Code + Chrome 工作流程
這個流程會用到整整兩天！
編輯 → 儲存 → 預覽 → 確認

Part 1 完成！

你已經認識 HTML 基礎了

HTML 結構

網頁的骨架

基本標籤

h1, p, section

VS Code 操作

編輯儲存預覽

Tab UI 原理

顯示/隱藏切換

下一章：Part 2 - Reveal.js 簡報框架 →