# Terrarium 專案第一部分：HTML 入門 ```mermaid journey title 你的 HTML 學習旅程 section 基礎 建立 HTML 檔案: 3: Student 新增 DOCTYPE: 4: Student 結構化文件: 5: Student section 內容 新增元資料: 4: Student 插入圖片: 5: Student 組織佈局: 5: Student section 語義 使用適當標籤: 4: Student 強化無障礙功能: 5: Student 建造生態瓶: 5: Student ``` ![HTML 入門](../../../../translated_images/zh-TW/webdev101-html.4389c2067af68e98.webp) > 速寫筆記由 [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 基礎影片](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 檔案總管示範建立新檔案](../../../../translated_images/zh-TW/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/` 這類 URL 不用特別指定檔名，就會載入 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 宣告可避免瀏覽器進入「怪異模式」，該模式用於支援非常舊的網站。現代網頁開發採用簡單的 `<!DOCTYPE html>`，確保[標準相容的渲染](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)。 ### 🔄 **學習檢視點** **暫停並思考**：繼續前，確保你理解以下要點： - ✅ 為何每份 HTML 文件都需 DOCTYPE 宣告 - ✅ `<html>` 根元素包含什麼 - ✅ 這種結構如何幫助瀏覽器正確渲染頁面 **快速自我測驗**：你能用自己的話說明「標準相容渲染」是什麼意思嗎？ ## 添加重要的文件元資料 HTML 文件的 `<head>` 區段包含瀏覽器與搜尋引擎需要但訪客不直接看見的重要資訊。想像它是幕後資訊，幫助你的網頁正常運作，並在不同設備和平台上正確顯示。 這些元資料告訴瀏覽器如何顯示頁面、使用哪種字元編碼，以及如何因應不同螢幕尺寸——這些都是打造專業且可及性良好的網頁必備條件。 ### 任務：加入文件的 head 將這段 `<head>` 內容插入你的 `<html>` 開始及結束標籤之間： ```html <head> <title>Welcome to my Virtual Terrarium ``` **拆解各元素作用：** - **設定** 出現在瀏覽器分頁和搜尋結果的頁面標題 - **指定** 使用 UTF-8 字元編碼，確保全球文字正確顯示 - **保證** 與現代版本 Internet Explorer 兼容 - **配置** 螢幕視窗大小與設備寬度同步，支援響應式設計 - **控制** 初始縮放比例，內容自然呈現大小 > 🤔 **思考看看**：如果你將 viewport meta 標籤設為 `` 會怎樣？這會強制頁面寬度永遠是 600 像素，破壞響應式設計！進一步了解[正確的 viewport 設定](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)。 ## 建立文件主體內容 `` 元素包含網頁的所有可見內容——使用者將看見並互動的所有東西。與提供瀏覽器指令的 `` 不同，`` 則包含實際內容：文字、圖片、按鈕，以及建構使用者介面的其他元素。 讓我們加入主體結構，並了解 HTML 標籤如何協作產生有意義的內容。 ### 理解 HTML 標籤結構 HTML 使用配對標籤來定義元素。大多數標籤有一個開啟標籤，如 `

`，及一個關閉標籤，如 `

`，中間包含內容：`

Hello, world!

`。這建立了一個包含「Hello, world!」文字的段落元素。 ### 任務：加入 body 元素 更新你的 HTML 檔案，加入 `` 元素： ```html Welcome to my Virtual Terrarium ``` **完整結構提供以下功能：** - **建立** 基本的 HTML5 文件架構 - **包含** 重要元資料，保證瀏覽器正確渲染 - **創建** 空白主體等待顯示內容 - **遵循** 現代網頁開發最佳實務 現在你準備添加玻璃容器的可見元素。我們會使用 `
` 元素作為容器，組織不同的內容區塊，以及 `` 元素來顯示植物圖片。 ### 操作圖片與版面容器 圖片在 HTML 中很特別，因為它們用「自我封閉」的標籤。與像 `

` 這種包覆內容的元素不同，`` 標籤內使用屬性（例如 `src` 指定圖片路徑，`alt` 提供輔助功能）包含所有必要資訊。 在把圖片加入 HTML 前，你需要先建立資料夾並整理專案檔案。 **首先設定你的圖片：** 1. 在 terrarium 專案資料夾內建立 `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 檔案，你應該會看到： - 一份基礎的植物圖片列表 - 兩欄呈現的圖片排列 - 簡單、未經樣式設定的版面 **記住**：在 CSS 加入前，HTML 本該就是這樣普通的外觀！ 加入這些標記後，植物會出現在畫面上，雖然尚未美觀完成——這就是下一課的 CSS 會負責的。此刻，你已有穩固的 HTML 基礎，可有效組織內容並遵循可及性最佳實踐。 ## 使用語意 HTML 促進可及性 語意 HTML 意味著依據意義和用途選擇 HTML 元素，而非僅依外觀。使用語意標記，你是在向瀏覽器、搜尋引擎和協助技術（如螢幕閱讀器）傳達內容的結構與意義。 ```mermaid flowchart TD A[需要新增內容嗎？] --> B{什麼類型？} B -->|主標題| C["

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

,

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

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

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