<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
  "translation_date": "2025-10-03T09:00:55+00:00",
  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
  "language_code": "tw"
}
-->
# HTML 練習作業：建立部落格模型

## 目標

設計並手寫 HTML 結構，用於個人部落格首頁。本次練習旨在幫助您熟悉語意化 HTML、佈局規劃以及程式碼組織。

## 指導說明

1. **設計您的部落格模型**
   - 繪製部落格首頁的視覺模型。包含主要區塊，例如標頭、導航欄、主要內容、側邊欄和頁尾。
   - 您可以使用紙張繪製並掃描您的草圖，或使用數位工具（例如 Figma、Adobe XD、Canva，甚至 PowerPoint）。

2. **識別 HTML 元素**
   - 列出您計劃用於每個區塊的 HTML 元素（例如 `<header>`、`<nav>`、`<main>`、`<article>`、`<aside>`、`<footer>`、`<section>`、`<h1>`–`<h6>`、`<p>`、`<img>`、`<ul>`、`<li>`、`<a>` 等）。

3. **撰寫 HTML 標記**
   - 手寫您的模型所需的 HTML。專注於語意化結構和最佳實踐。
   - 至少包含 10 個不同的 HTML 元素。
   - 添加註解以解釋您的選擇和結構。

4. **提交您的作品**
   - 上傳您的草圖/模型以及 HTML 文件。
   - 可選擇性地提供簡短的反思（2–3 句），說明您的設計決策。

## 評分標準

| 評分項目         | 優秀                                                                                       | 合格                                                                         | 需改進                                                                         |
|------------------|------------------------------------------------------------------------------------------|------------------------------------------------------------------------------|--------------------------------------------------------------------------------|
| 視覺模型         | 清晰、詳細的模型，包含標記區塊和深思熟慮的佈局                                           | 基本模型，包含部分標記區塊                                                   | 模型簡略或不清晰；缺乏區塊標記                                                |
| HTML 元素        | 使用 10 個以上語意化 HTML 元素；展現結構和最佳實踐的理解                                   | 使用 5–9 個 HTML 元素；部分語意化結構                                        | 使用少於 5 個元素；缺乏語意化結構                                             |
| 程式碼品質       | 組織良好、易讀的程式碼，包含註解；遵循 HTML 標準                                           | 程式碼大致組織良好；註解較少                                                 | 程式碼混亂；缺乏註解                                                          |
| 反思             | 深刻反思設計選擇和挑戰                                                                   | 基本反思                                                                     | 無反思或內容不相關                                                            |

## 提示

- 使用語意化 HTML 標籤以提升可訪問性和 SEO。
- 使用縮排和註解來組織您的程式碼。
- 參考 [MDN HTML 元素參考](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) 以獲取指導。
- 思考您的佈局如何在未來的作業中擴展或進行樣式設計。

---

**免責聲明**：  
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。