# Terrarium Project Part 1: 介紹 HTML ```mermaid 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 ``` ![Introduction to HTML](../../../../translated_images/zh-HK/webdev101-html.4389c2067af68e98.webp) > Sketchnote 由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作 HTML，或稱超文字標記語言，是你曾造訪過的每個網站的基礎。將 HTML 想像成提供網頁結構的骨架——它定義內容的位置、組織方式以及每個部分的意義。雖然稍後 CSS 會為你的 HTML 加上顏色與版面配置，JavaScript 則會讓它具有互動性，但 HTML 提供了讓一切成為可能的必要結構。 在這堂課中，你將為虛擬的玻璃花房介面建立 HTML 結構。這個實作專案會教你基本的 HTML 概念，同時打造出視覺吸引人的內容。你將學到如何使用語義化元素整理內容、操作圖片，並為互動式網頁應用程式奠定基礎。 完成本課程後，你會有一個能在有組織的欄位中顯示植物圖片的 HTML 頁面，並準備好在下一課進行樣式設計。別擔心它一開始看起來很簡單——這正是 HTML 在 CSS 加入視覺裝飾前該有的樣子。 ```mermaid mindmap root((HTML 基礎知識)) Structure DOCTYPE 宣告 HTML 元素 Head 部分 Body 內容 Elements 標籤與屬性 自我關閉標籤 巢狀元素 區塊元素與行內元素 Content 文字元素 圖像 容器 (div) 清單 Semantics 有意義的標籤 無障礙功能 螢幕閱讀器 SEO 好處 Best Practices 適當巢狀 合法標記 描述性替代文字 有組織的結構 ``` ## 課前小測驗 [課前小測驗](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **觀看學習**：看看這支有用的影片概覽 > > [![HTML Fundamentals Video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## 設定你的專案 在深入 HTML 程式碼之前，讓我們先為你的玻璃花房專案建立一個適當的工作空間。從一開始就建立有條理的檔案結構，是個非常重要的習慣，對你的整個網頁開發旅程都會有幫助。 ### 任務：建立你的專案結構 你將為玻璃花房專案建立一個專用資料夾，並加入你的第一個 HTML 檔案。以下是兩種可採用的方法： **方案一：使用 Visual Studio Code** 1. 開啟 Visual Studio Code 2. 點擊「檔案」→「開啟資料夾」，或使用 `Ctrl+K, Ctrl+O`（Windows/Linux）或 `Cmd+K, Cmd+O`（Mac） 3. 建立一個名為 `terrarium` 的新資料夾並選取它 4. 在檔案總管側邊欄，點擊「新增檔案」圖示 5. 將檔案命名為 `index.html` ![VS Code Explorer showing new file creation](../../../../translated_images/zh-HK/vs-code-index.e2986cf919471eb9.webp) **方案二：使用終端機指令** ```bash 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 文件都遵循特定的結構，瀏覽器需要理解這個結構才能正確顯示網頁。將此結構想像為正式信件——它包含必要的元素且按照特定順序排列，有助於收件者（在這裡是瀏覽器）正確處理內容。 ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] 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 檔案的前兩行，就像是文件對瀏覽器的「介紹」： ```html <!DOCTYPE html> <html></html> ``` **這段程式碼的作用是：** - **宣告** 文件型態為 HTML5，透過 `<!DOCTYPE html>` - **建立** 根 `<html>` 元素包裹所有頁面內容 - **確立** 現代網頁標準，確保瀏覽器正確呈現 - **保證** 不同瀏覽器和裝置顯示一致 > 💡 **VS Code 小貼士**：在 VS Code 中將滑鼠移到任何 HTML 標籤上，即可看到 MDN Web Docs 提供的相關資訊，包括使用範例和瀏覽器支援狀況。 > 📚 **深入了解**：DOCTYPE 宣告能防止瀏覽器進入「怪異模式」（quirks mode），該模式是為了支援非常古老的網站。現代網頁開發使用簡單的 `<!DOCTYPE html>` 宣告來確保[符合標準的呈現](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)。 ### 🔄 **教學檢視點** **暫停思考**：繼續之前，請確保你理解： - ✅ 為什麼每個 HTML 文件需要 DOCTYPE 宣告 - ✅ `<html>` 根元素包含什麼 - ✅ 這種結構如何幫助瀏覽器正確呈現頁面 **快速自我檢測**：你能用自己的話說明「符合標準的呈現」是什麼意思嗎？ ## 新增必要的文件 Metadata HTML 文件的 `<head>` 部分包含瀏覽器和搜尋引擎需要的重要資訊，但訪客不會直接在頁面上看到。可以把它想成「幕後」資料，幫助你的網頁運作正常，並在不同裝置和平台上正確顯示。 這些 Metadata 告訴瀏覽器如何呈現頁面、要使用哪種字元編碼、以及如何處理不同螢幕尺寸——這些都是打造專業且無障礙網頁的關鍵。 ### 任務：新增文件 Head 在你的 `<html>` 開始和結束標籤之間，插入這段 `<head>`： ```html <head> <title>Welcome to my Virtual Terrarium ``` **解釋每個元素的作用：** - **設定** 頁面標題，會顯示在瀏覽器分頁標籤和搜尋結果中 - **指定** UTF-8 字元編碼，確保文字在全球各地正確顯示 - **確保** 支援現代版 Internet Explorer - **設定** 響應式設計的 viewport，符合裝置寬度 - **控制** 初始縮放比例，使內容以自然大小呈現 > 🤔 **思考**：如果你設定一個 viewport meta 標籤像 ``，會發生什麼事？這會強制頁面寬度永遠是 600 像素，破壞響應式設計！想了解更多關於[正確設定 viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)的內容。 ## 建立文件主體 `` 元素包含所有你網頁中可見的內容——使用者會看到和互動的所有東西。雖然 `` 是給瀏覽器的指令，`` 是實際內容：文字、圖片、按鈕和其他組成使用者介面的元素。 讓我們加上 `body` 結構，並了解 HTML 標籤如何合作，創造有意義的內容。 ### 理解 HTML 標籤結構 HTML 使用成對標籤來定義元素。大部分標籤有開始標籤例如 `

`，和結束標籤例如 `

`，中間夾帶內容：`

Hello, world!

`。這會建立一個包含「Hello, world!」文字的段落元素。 ### 任務：新增 Body 元素 更新你的 HTML 檔案，加入 `` 元素： ```html Welcome to my Virtual Terrarium ``` **完整結構提供：** - **建立** 基本的 HTML5 文件框架 - **包含** 必要的 Metadata 以供瀏覽器正確呈現 - **創造** 空白的 body 以容納可見內容 - **採用** 現代網頁開發最佳實務 現在，你準備好加入玻璃花房的可見元素了。我們將使用 `
` 元素作為容器，組織不同區塊的內容，並使用 `` 元素來顯示植物圖片。 ### 操作圖片與版面容器 圖片在 HTML 中是特別的，使用「自我封閉」標籤。與像 `

` 這類包裹內容的元素不同，`` 標籤本身帶有所需的所有資訊，用屬性如 `src` 指定圖片路徑，`alt` 屬性做無障礙使用說明。 在加入圖片到 HTML 之前，你需要先透過建立 images 資料夾並放入植物圖像，整理專案檔案。 **首先，準備你的圖片：** 1. 在你的玻璃花房專案資料夾中建立一個叫 `images` 的資料夾 2. 從[解答資料夾](../../../../3-terrarium/solution/images)下載植物圖片（共 14 張） 3. 將所有植物圖片複製到你新建立的 `images` 資料夾 ### 任務：建立植物顯示版面 現在在你的 `` 標籤之間，加入兩欄排列的植物圖片： ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **一步步來看這段程式碼的作用：** - **建立** 一個主頁面容器，`id="page"`，包裹所有內容 - **設置** 兩個欄位容器：`left-container` 和 `right-container` - **將 7 個植物放在左欄，7 個植物放在右欄** - **將每張植物圖片放入 `plant-holder` div 以便個別定位** - **套用一致的 class 名稱，方便下一課的 CSS 樣式設計** - **為每張植物圖片指定獨特的 ID，方便日後 JavaScript 互動** - **正確指向 images 資料夾中的檔案路徑** > 🤔 **思考**：你會注意到所有圖片的 alt 屬性都是「plant」，這對無障礙使用不是理想的做法。螢幕閱讀器使用者會聽到「plant」重複 14 次，卻不知道每張圖片是什麼特定植物。你能想出更好、更加描述性的 alt 文字嗎？ > 📝 **HTML 元素類型**：`
` 元素屬於「區塊級」元素，佔滿整行寬度，而 `` 是「內嵌」元素，只佔必要寬度。你覺得如果將這些 `
` 改成 `` 會發生什麼事？ ### 🔄 **教學檢視點** **結構理解**：花點時間檢視你的 HTML 結構： - ✅ 你能辨識版面中的主要容器嗎？ - ✅ 是否理解為什麼每張圖片需要獨特的 ID？ - ✅ 你會如何描述 `plant-holder` div 的用途？ **視覺檢查**：開啟你的 HTML 檔案於瀏覽器中，你應該會看到： - 簡單的植物圖片清單 - 兩欄排列顯示圖片 - 簡約，未經樣式設計的版面 **請記得**：這種樸素外觀正是 HTML 在加入 CSS 樣式前應該的樣子！ 加入這些標記後，植物會呈現在螢幕上，雖然還未經修飾，這正是下一課 CSS 將要處理的。現在你擁有堅實的 HTML 基礎，正確組織內容並符合無障礙最佳實務。 ## 使用語義化 HTML 提升無障礙 語義化 HTML 是根據元素的意義和用途挑選 HTML 標籤，而不只是依外觀。當你選用語義化標記時，你是在向瀏覽器、搜尋引擎和輔助技術（例如螢幕閱讀器）傳達內容的結構與意涵。 ```mermaid flowchart TD A[需要加入內容嗎?] --> B{什麼類型?} B -->|主標題| C["

"] B -->|副標題| D["

,

, 等等"] B -->|段落| E["

"] B -->|清單| F["

    ,
      "] B -->|導覽| G["