# HTML 練習作業：建立博客模型 ## 學習目標 透過設計和編寫完整的博客首頁結構，應用你的 HTML 知識。這個實作作業將加強語意化 HTML 概念、無障礙最佳實踐以及專業的程式碼組織技能，這些都是你在整個網頁開發旅程中會使用到的。 **完成此作業後，你將能夠：** - 練習在編碼前規劃網站佈局 - 適當應用語意化的 HTML 元素 - 創建無障礙且結構良好的標記 - 培養帶有註解和組織的專業編碼習慣 ## 專案需求 ### 第 1 部分：設計規劃（視覺模型） **創建你的博客首頁視覺模型，內容包括：** - 含網站標題和導覽的頁首 - 主要內容區域，至少有 2-3 篇博客文章預覽 - 側邊欄，包含額外資訊（關於區塊、最新文章、分類） - 含聯絡資訊或連結的頁尾 **模型創建方式選項：** - **手繪草圖**：使用紙張和鉛筆，然後拍照或掃描你的設計 - **數位工具**：Figma、Adobe XD、Canva、PowerPoint 或任何繪圖應用程式 - **線框工具**：Balsamiq、MockFlow 或類似線框軟體 **在你的模型區塊上標註** 你計畫使用的 HTML 元素（例如：「頁首 - `
`」、「博客文章 - `
`」）。 ### 第 2 部分：HTML 元素規劃 **建立一個清單，將你的模型中每個區塊對應到特定的 HTML 元素：** ``` Example: - Site Header →
- Main Navigation →