# HTML 練習作業：建立部落格模型 ## 學習目標 運用 HTML 知識設計並編碼完整的部落格首頁結構。此實作作業將強化語意化 HTML 概念、無障礙最佳實務以及專業程式碼組織技巧，這些技能將伴隨你在網頁開發旅程中持續使用。 **完成此作業，你將能：** - 練習在編碼前規劃網站版面配置 - 適當運用語意化 HTML 元素 - 建立可無障礙使用且結構良好的標記 - 養成以評論和組織維護專業程式碼的習慣 ## 專案需求 ### 第 1 部分：設計規劃（視覺模型） **建立一個部落格首頁的視覺模型，包括：** - 含網站標題和導覽列的頁首 - 主要內容區，至少包含 2-3 篇部落格文章預覽 - 側欄，展示附加資訊（關於區段、最新文章、分類） - 頁尾，含聯絡資訊或連結 **製作模型的選項：** - **手繪草圖**：使用紙筆繪製，再拍照或掃描你的設計 - **數位工具**：Figma、Adobe XD、Canva、PowerPoint，或任何繪圖應用程式 - **線框工具**：Balsamiq、MockFlow 或類似線框軟體 **在模型上標註各區段**預計會使用的 HTML 元素（例如「頁首 - `
`」、「部落格文章 - `
`」）。 ### 第 2 部分：HTML 元素規劃 **建立一份清單，將模型的每個區段對應到具體的 HTML 元素：** ``` Example: - Site Header →
- Main Navigation →