History

localizeflow[bot] a5481015bd chore(i18n): sync translations with latest source changes (chunk 2/2, 261 changes)		7 months ago
..
README.md	chore(i18n): sync translations with latest source changes (chunk 2/2, 261 changes)	7 months ago
assignment.md	chore(i18n): sync translations with latest source changes (chunk 2/2, 261 changes)	7 months ago

README.md

Unescape Escape

Terrarium Project Part 1: 介紹 HTML

journey
    title 你的 HTML 學習旅程
    section 基礎
      Create HTML file: 3: Student
      Add DOCTYPE: 4: Student
      Structure document: 5: Student
    section 內容
      Add metadata: 4: Student
      Include images: 5: Student
      Organize layout: 5: Student
    section 語意
      Use proper tags: 4: Student
      Enhance accessibility: 5: Student
      Build terrarium: 5: Student

Sketchnote 由 Tomomi Imura 製作

HTML，或稱超文字標記語言，是你曾造訪過的每個網站的基礎。將 HTML 想像成提供網頁結構的骨架——它定義內容的位置、組織方式以及每個部分的意義。雖然稍後 CSS 會為你的 HTML 加上顏色與版面配置，JavaScript 則會讓它具有互動性，但 HTML 提供了讓一切成為可能的必要結構。

在這堂課中，你將為虛擬的玻璃花房介面建立 HTML 結構。這個實作專案會教你基本的 HTML 概念，同時打造出視覺吸引人的內容。你將學到如何使用語義化元素整理內容、操作圖片，並為互動式網頁應用程式奠定基礎。

完成本課程後，你會有一個能在有組織的欄位中顯示植物圖片的 HTML 頁面，並準備好在下一課進行樣式設計。別擔心它一開始看起來很簡單——這正是 HTML 在 CSS 加入視覺裝飾前該有的樣子。

mindmap
  root((HTML 基礎知識))
    Structure
      DOCTYPE 宣告
      HTML 元素
      Head 部分
      Body 內容
    Elements
      標籤與屬性
      自我關閉標籤
      巢狀元素
      區塊元素與行內元素
    Content
      文字元素
      圖像
      容器 (div)
      清單
    Semantics
      有意義的標籤
      無障礙功能
      螢幕閱讀器
      SEO 好處
    Best Practices
      適當巢狀
      合法標記
      描述性替代文字
      有組織的結構

課前小測驗

📺 觀看學習：看看這支有用的影片概覽

設定你的專案

在深入 HTML 程式碼之前，讓我們先為你的玻璃花房專案建立一個適當的工作空間。從一開始就建立有條理的檔案結構，是個非常重要的習慣，對你的整個網頁開發旅程都會有幫助。

任務：建立你的專案結構

你將為玻璃花房專案建立一個專用資料夾，並加入你的第一個 HTML 檔案。以下是兩種可採用的方法：

方案一：使用 Visual Studio Code

開啟 Visual Studio Code
點擊「檔案」→「開啟資料夾」，或使用 Ctrl+K, Ctrl+O（Windows/Linux）或 Cmd+K, Cmd+O（Mac）
建立一個名為 terrarium 的新資料夾並選取它
在檔案總管側邊欄，點擊「新增檔案」圖示
將檔案命名為 index.html

方案二：使用終端機指令

mkdir terrarium
cd terrarium
touch index.html
code index.html

這些指令的作用如下：

建立一個名為 terrarium 的新資料夾作為你的專案
切換到 terrarium 目錄
建立一個空的 index.html 檔案
在 Visual Studio Code 開啟 該檔案以進行編輯

💡 小秘訣：檔案名稱 index.html 在網頁開發中非常特別。當有人訪問一個網站時，瀏覽器會自動尋找並顯示 index.html 作為預設頁面。這意味著像 https://mysite.com/projects/ 的網址會自動呈現 projects 資料夾內的 index.html，無需在網址中指定檔案名稱。

理解 HTML 文件結構

每個 HTML 文件都遵循特定的結構，瀏覽器需要理解這個結構才能正確顯示網頁。將此結構想像為正式信件——它包含必要的元素且按照特定順序排列，有助於收件者（在這裡是瀏覽器）正確處理內容。

flowchart TD
    A["<!DOCTYPE html>"] --> B["<html>"]
    B --> C["<head>"]
    C --> D["<title>"]
    C --> E["<meta charset>"]
    C --> F["<meta viewport>"]
    B --> G["<body>"]
    G --> H["<h1> 標題"]
    G --> I["<div> 容器"]
    G --> J["<img> 圖片"]
    
    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style C fill:#fff3e0
    style G fill:#e8f5e8

讓我們先加上每個 HTML 文件都需要的基本基礎。

DOCTYPE 宣告與根元素

任何 HTML 檔案的前兩行，就像是文件對瀏覽器的「介紹」：

<!DOCTYPE html>
<html></html>

這段程式碼的作用是：

宣告文件型態為 HTML5，透過 <!DOCTYPE html>
建立根 <html> 元素包裹所有頁面內容
確立現代網頁標準，確保瀏覽器正確呈現
保證不同瀏覽器和裝置顯示一致

💡 VS Code 小貼士：在 VS Code 中將滑鼠移到任何 HTML 標籤上，即可看到 MDN Web Docs 提供的相關資訊，包括使用範例和瀏覽器支援狀況。

📚 深入了解：DOCTYPE 宣告能防止瀏覽器進入「怪異模式」（quirks mode），該模式是為了支援非常古老的網站。現代網頁開發使用簡單的 <!DOCTYPE html> 宣告來確保符合標準的呈現。

🔄 教學檢視點

暫停思考：繼續之前，請確保你理解：

✅ 為什麼每個 HTML 文件需要 DOCTYPE 宣告
✅ <html> 根元素包含什麼
✅ 這種結構如何幫助瀏覽器正確呈現頁面

快速自我檢測：你能用自己的話說明「符合標準的呈現」是什麼意思嗎？

新增必要的文件 Metadata

HTML 文件的 <head> 部分包含瀏覽器和搜尋引擎需要的重要資訊，但訪客不會直接在頁面上看到。可以把它想成「幕後」資料，幫助你的網頁運作正常，並在不同裝置和平台上正確顯示。

這些 Metadata 告訴瀏覽器如何呈現頁面、要使用哪種字元編碼、以及如何處理不同螢幕尺寸——這些都是打造專業且無障礙網頁的關鍵。

任務：新增文件 Head

在你的 <html> 開始和結束標籤之間，插入這段 <head>：

<head>
	<title>Welcome to my Virtual Terrarium</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

解釋每個元素的作用：

設定頁面標題，會顯示在瀏覽器分頁標籤和搜尋結果中
指定 UTF-8 字元編碼，確保文字在全球各地正確顯示
確保支援現代版 Internet Explorer
設定響應式設計的 viewport，符合裝置寬度
控制初始縮放比例，使內容以自然大小呈現

🤔 思考：如果你設定一個 viewport meta 標籤像 <meta name="viewport" content="width=600">，會發生什麼事？這會強制頁面寬度永遠是 600 像素，破壞響應式設計！想了解更多關於正確設定 viewport的內容。

建立文件主體

<body> 元素包含所有你網頁中可見的內容——使用者會看到和互動的所有東西。雖然 <head> 是給瀏覽器的指令，<body> 是實際內容：文字、圖片、按鈕和其他組成使用者介面的元素。

讓我們加上 body 結構，並了解 HTML 標籤如何合作，創造有意義的內容。

理解 HTML 標籤結構

HTML 使用成對標籤來定義元素。大部分標籤有開始標籤例如 <p>，和結束標籤例如 </p>，中間夾帶內容：<p>Hello, world!</p>。這會建立一個包含「Hello, world!」文字的段落元素。

任務：新增 Body 元素

更新你的 HTML 檔案，加入 <body> 元素：

<!DOCTYPE html>
<html>
	<head>
		<title>Welcome to my Virtual Terrarium</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body></body>
</html>

完整結構提供：

建立基本的 HTML5 文件框架
包含必要的 Metadata 以供瀏覽器正確呈現
創造空白的 body 以容納可見內容
採用現代網頁開發最佳實務

現在，你準備好加入玻璃花房的可見元素了。我們將使用 <div> 元素作為容器，組織不同區塊的內容，並使用 <img> 元素來顯示植物圖片。

操作圖片與版面容器

圖片在 HTML 中是特別的，使用「自我封閉」標籤。與像 <p></p> 這類包裹內容的元素不同，<img> 標籤本身帶有所需的所有資訊，用屬性如 src 指定圖片路徑，alt 屬性做無障礙使用說明。

在加入圖片到 HTML 之前，你需要先透過建立 images 資料夾並放入植物圖像，整理專案檔案。

首先，準備你的圖片：

在你的玻璃花房專案資料夾中建立一個叫 images 的資料夾
從解答資料夾下載植物圖片（共 14 張）
將所有植物圖片複製到你新建立的 images 資料夾

任務：建立植物顯示版面

現在在你的 <body></body> 標籤之間，加入兩欄排列的植物圖片：

<div id="page">
	<div id="left-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/zh-HK/plant1.d87946a2ca70cc43.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/zh-HK/plant2.8daa1606c9c1ad89.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/zh-HK/plant3.8b0d484381a2a2a7.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/zh-HK/plant4.656e16ae1df37be2.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/zh-HK/plant5.2b41b9355f11ebcc.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/zh-HK/plant6.3d1827d03b656994.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/zh-HK/plant7.8152c302ac97f621.png" />
		</div>
	</div>
	<div id="right-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/zh-HK/plant8.38d6428174ffa850.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/zh-HK/plant9.f0e38d3327c37fc2.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/zh-HK/plant10.b159d6d6e985595f.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/zh-HK/plant11.2a03a1c2ec8ea84e.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/zh-HK/plant12.60e9b53e538fbaf3.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/zh-HK/plant13.07a51543c820bcf5.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/zh-HK/plant14.6e486371ba7d36ba.png" />
		</div>
	</div>
</div>

一步步來看這段程式碼的作用：

建立一個主頁面容器，id="page"，包裹所有內容
設置兩個欄位容器：left-container 和 right-container
將 7 個植物放在左欄，7 個植物放在右欄
將每張植物圖片放入 plant-holder div 以便個別定位
套用一致的 class 名稱，方便下一課的 CSS 樣式設計
為每張植物圖片指定獨特的 ID，方便日後 JavaScript 互動
正確指向 images 資料夾中的檔案路徑

🤔 思考：你會注意到所有圖片的 alt 屬性都是「plant」，這對無障礙使用不是理想的做法。螢幕閱讀器使用者會聽到「plant」重複 14 次，卻不知道每張圖片是什麼特定植物。你能想出更好、更加描述性的 alt 文字嗎？

📝 HTML 元素類型：<div> 元素屬於「區塊級」元素，佔滿整行寬度，而 <span> 是「內嵌」元素，只佔必要寬度。你覺得如果將這些 <div> 改成 <span> 會發生什麼事？

🔄 教學檢視點

結構理解：花點時間檢視你的 HTML 結構：

✅ 你能辨識版面中的主要容器嗎？
✅ 是否理解為什麼每張圖片需要獨特的 ID？
✅ 你會如何描述 plant-holder div 的用途？

視覺檢查：開啟你的 HTML 檔案於瀏覽器中，你應該會看到：

簡單的植物圖片清單
兩欄排列顯示圖片
簡約，未經樣式設計的版面

請記得：這種樸素外觀正是 HTML 在加入 CSS 樣式前應該的樣子！

加入這些標記後，植物會呈現在螢幕上，雖然還未經修飾，這正是下一課 CSS 將要處理的。現在你擁有堅實的 HTML 基礎，正確組織內容並符合無障礙最佳實務。

使用語義化 HTML 提升無障礙

語義化 HTML 是根據元素的意義和用途挑選 HTML 標籤，而不只是依外觀。當你選用語義化標記時，你是在向瀏覽器、搜尋引擎和輔助技術（例如螢幕閱讀器）傳達內容的結構與意涵。

flowchart TD
    A[需要加入內容嗎?] --> B{什麼類型?}
    B -->|主標題| C["<h1>"]
    B -->|副標題| D["<h2>, <h3>, 等等"]
    B -->|段落| E["<p>"]
    B -->|清單| F["<ul>, <ol>"]
    B -->|導覽| G["<nav>"]
    B -->|文章| H["<article>"]
    B -->|區段| I["<section>"]
    B -->|通用容器| J["<div>"]
    
    C --> K[螢幕閱讀器會讀作主標題]
    D --> L[建立適當的標題階層]
    E --> M[提供適當的文字間距]
    F --> N[啟用清單導覽捷徑]
    G --> O[標示導覽地標]
    H --> P[標示獨立內容]
    I --> Q[群組相關內容]
    J --> R[只有在沒有語義標籤適用時使用]
    
    style C fill:#4caf50
    style D fill:#4caf50
    style E fill:#4caf50
    style F fill:#4caf50
    style G fill:#2196f3
    style H fill:#2196f3
    style I fill:#2196f3
    style J fill:#ff9800

這個作法讓你網站對有障礙的使用者更友善，也幫助搜尋引擎更好理解你的內容。這是現代網頁開發的基本原則，為所有人創造更佳體驗。

新增語義化頁面標題

讓我們為玻璃花房頁面加上一個適當標題。將此行插入在你的開頭 <body> 標籤後：

<h1>My Terrarium</h1>

為何語義化標記很重要：

幫助螢幕閱讀器使用者導航和理解頁面結構
提升搜尋引擎排名（SEO），明確內容階層
加強視障或認知障礙使用者的無障礙體驗
創造跨所有裝置與平台更佳的使用者體驗
遵循網頁標準和專業開發最佳實務

語義化與非語義化選擇範例：

目的	✅ 語義化選擇	❌ 非語義化選擇
主標題	`<h1>Title</h1>`	`<div class="big-text">Title</div>`
導航欄	`<nav><ul><li></li></ul></nav>`	`<div class="menu"><div></div></div>`
按鈕	`<button>Click me</button>`	`<span onclick="...">Click me</span>`
文章內容	`<article><p></p></article>`	`<div class="content"><div></div></div>`

🎥 現場示範：觀看螢幕閱讀器如何與網頁互動以理解語義化標記對無障礙的重要性。注意正確的 HTML 結構如何幫助使用者有效導航。

建立玻璃花房容器

現在讓我們新增玻璃花房本身的 HTML 結構——那個將用來放置植物的玻璃容器。這部分示範一個重要概念：HTML 提供結構，但沒有 CSS 樣式，這些元素暫時不會可見。

玻璃花房標記使用描述性的 class 名稱，方便下一課的 CSS 樣式設計既直覺又易維護。

任務：新增玻璃花房結構

將此標記插入在最後一個 </div> 標籤之前（即頁面容器關閉標籤前）：

<div id="terrarium">
	<div class="jar-top"></div>
	<div class="jar-walls">
		<div class="jar-glossy-long"></div>
		<div class="jar-glossy-short"></div>
	</div>
	<div class="dirt"></div>
	<div class="jar-bottom"></div>
</div>

了解這個玻璃花房結構的含義：

建立一個主要的玻璃花房容器，並附加獨特 ID 以便樣式設計
定義每個視覺組件的獨立元素（頂部、牆壁、土壤、底部）
包含用於玻璃反射效果（光澤元素）的嵌套元素
使用清晰指出每個元素用途的描述性類名
準備結構以便 CSS 造出玻璃植物箱的外觀

🤔 注意到了嗎？：即使你已加入這些標記，頁面上卻看不到任何新東西！這正好說明了 HTML 提供結構，而 CSS 提供外觀。這些 <div> 元素存在，但還沒有視覺樣式——下一課會教你如何加上！

flowchart TD
    A[HTML 文件] --> B[文件頭]
    A --> C[文件主體]
    B --> D[標題元素]
    B --> E[Meta 字符集]
    B --> F[Meta 視窗設定]
    C --> G[主標題]
    C --> H[頁面容器]
    H --> I[左邊容器帶 7 株植物]
    H --> J[右邊容器帶 7 株植物]
    H --> K[生態瓶結構]
    
    style A fill:#e1f5fe
    style B fill:#fff3e0
    style C fill:#e8f5e8
    style H fill:#f3e5f5

🔄 教學檢視

掌握 HTML 結構：在繼續進行前，請確保你能：

✅ 解釋 HTML 結構與視覺外觀的差異
✅ 識別語意與非語意的 HTML 元素
✅ 描述正確標記如何提升無障礙使用
✅ 認識完整文件樹狀結構

測試你的理解：嘗試在瀏覽器中禁用 JavaScript 並移除 CSS，開啟你的 HTML 檔案。這能讓你看到純粹的語意結構。

GitHub Copilot Agent 挑戰

使用 Agent 模式完成以下挑戰：

描述： 創建一個語意化的 HTML 結構，用於可加入植物箱專案的植物護理指南部分。

提示： 建立一個語意化 HTML 區塊，包含主標題「Plant Care Guide」及三個子區塊，標題分別是「Watering」、「Light Requirements」和「Soil Care」，每個子區塊包含一段植物護理資訊。使用適當的語意 HTML 標籤如 <section>、<h2>、<h3> 和 <p>，妥善組織內容。

進一步了解 agent mode。

探索 HTML 歷史挑戰

學習網頁演變

自 1990 年 Tim Berners-Lee 在 CERN 創造首個網頁瀏覽器後，HTML 已大幅演進。部分舊標籤如 <marquee> 目前已被淘汰，因為它們與現代無障礙標準及響應式設計不兼容。

嘗試這個實驗：

臨時用 <marquee> 標籤包裹 <h1> 標題：<marquee><h1>My Terrarium</h1></marquee>
在瀏覽器打開頁面，觀察滾動效果
思考這個標籤被淘汰的原因（提示：考慮用戶體驗與無障礙）
移除 <marquee>，恢復語意標記

反思問題：

滾動標題可能如何影響視力障礙或對動態影響敏感的用戶？
有哪些現代 CSS 技巧能更無障礙地實現類似視覺效果？
為什麼使用當代網頁標準比使用淘汰元素更重要？

深入了解更多關於過時及淘汰的 HTML 元素，理解網頁標準如何演進改善用戶體驗。

課後測驗

複習與自學

深化你的 HTML 知識

HTML 作為網頁基礎超過 30 年，從簡單的文件標記語言發展成為構建互動應用的複雜平台。理解這演變能幫助你欣賞現代網頁標準並做出更好的開發決策。

推薦學習路徑：

HTML 歷史與演變
- 研究從 HTML 1.0 到 HTML5 的時間軸
- 探究某些標籤為何被淘汰（無障礙、行動友善、維護性）
- 研究新興 HTML 功能與提案
語意化 HTML 深入
- 學習完整的HTML5 語意元素清單
- 練習判斷何時使用 <article>、<section>、<aside> 和 <main>
- 瞭解提升無障礙的 ARIA 屬性
現代網頁開發
- 探索建立響應式網站（Microsoft Learn）
- 理解 HTML 如何與 CSS 及 JavaScript 整合
- 學習網頁效能與 SEO 最佳實踐

反思問題：

你發現了哪些已被淘汰的 HTML 標籤，為什麼它們被移除？
未來 HTML 版本有哪些新功能被提議？
語意化 HTML 如何促進無障礙與 SEO？

⚡ 接下來 5 分鐘可做的事

開啟 DevTools（F12）並檢查你喜愛網站的 HTML 結構
建立簡單 HTML 檔案，包含基本標籤：<h1>、<p> 和 <img>
使用 W3C HTML 校驗器驗證你的 HTML
嘗試在 HTML 中加入註解

🎯 這小時可完成的目標

完成課後測驗並複習語意 HTML 概念
用正確 HTML 結構建立關於你的簡單網頁
試驗不同標題層級與文字格式標籤
加入圖片與連結練習多媒體整合
研究你尚未嘗試的 HTML5 功能

📅 你的週度 HTML 進階之路

使用語意標記完成植物箱專案練習
建立使用 ARIA 標籤與角色的無障礙網頁
練習建立含多種輸入類型的表單
探索 HTML5 API，如 localStorage 或地理定位
研讀響應式 HTML 範式與行動優先設計
複習其他開發者的 HTML 程式碼與最佳實踐

🌟 你這月的網頁基礎進程

建立展示 HTML 能力的作品集網站
學習使用如 Handlebars 的 HTML 模板技術
透過改善 HTML 文件為開源專案貢獻
精通進階 HTML 概念如自訂元素
整合 HTML 與 CSS 框架及 JavaScript 函式庫
指導其他學習 HTML 基礎的人

🎯 你的 HTML 精通時間線

timeline
    title HTML 學習進度
    
    section 基礎 (5 分鐘)
        文件結構: DOCTYPE 聲明
                 : HTML 根元素
                 : Head 與 Body 理解
        
    section 元資料 (10 分鐘)
        基本 Meta 標籤: 字元編碼
                       : 視窗配置
                       : 瀏覽器相容性
        
    section 內容創建 (15 分鐘)
        圖像整合: 正確檔案路徑
                 : 替代文字重要性
                 : 自閉合標籤
        
    section 佈局組織 (20 分鐘)
        容器策略: 使用 Div 元素建立結構
                  : 類別與 ID 命名
                  : 嵌套元素階層
        
    section 語意掌握 (30 分鐘)
        有意義的標記: 標題階層
                     : 螢幕閱讀器導航
                     : 可及性最佳實踐
        
    section 進階概念 (1 小時)
        HTML5 功能: 現代語意元素
                  : ARIA 屬性
                  : 效能考量
        
    section 專業技能 (1 週)
        代碼組織: 檔案結構範例
                 : 容易維護的標記
                 : 團隊合作
        
    section 專家等級 (1 個月)
        現代網頁標準: 漸進式強化
                      : 跨瀏覽器相容性
                      : HTML 規範更新

🛠️ 你的 HTML 工具包總結

完成本課程後，你已具備：

文件結構：完整的 HTML5 基礎和正確 DOCTYPE
語意標記：增強無障礙與 SEO 的意義明確標籤
圖片整合：妥善組織文件與替代文字使用
版面容器：策略性利用帶描述性類名的 div
無障礙意識：理解螢幕閱讀器導航原理
現代標準：掌握目前 HTML5 實務與被淘汰標籤知識
專案基礎：為 CSS 樣式與 JavaScript 互動打下堅實基礎

下一步：你的 HTML 結構已準備好進行 CSS 樣式設計！你建立的語意基礎會讓下一課更容易理解。

作業

練習你的 HTML：建立一個部落格範本

免責聲明：
本文件是使用 AI 翻譯服務 Co-op Translator 進行翻譯。雖然我們盡力確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資料，建議採用專業人工翻譯。我們對因使用本翻譯所引致的任何誤解或誤釋概不負責。

README.md Unescape Escape

Terrarium Project Part 1: 介紹 HTML

課前小測驗

設定你的專案

任務：建立你的專案結構

理解 HTML 文件結構

DOCTYPE 宣告與根元素

🔄 教學檢視點

新增必要的文件 Metadata

任務：新增文件 Head

建立文件主體

理解 HTML 標籤結構

任務：新增 Body 元素

操作圖片與版面容器

任務：建立植物顯示版面

🔄 教學檢視點

使用語義化 HTML 提升無障礙

新增語義化頁面標題

建立玻璃花房容器

任務：新增玻璃花房結構

🔄 教學檢視

GitHub Copilot Agent 挑戰

探索 HTML 歷史挑戰

課後測驗

複習與自學

⚡ 接下來 5 分鐘可做的事

🎯 這小時可完成的目標

📅 你的週度 HTML 進階之路

🌟 你這月的網頁基礎進程

🎯 你的 HTML 精通時間線

🛠️ 你的 HTML 工具包總結

作業

README.md

Unescape Escape