<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
  "translation_date": "2025-10-03T08:57:05+00:00",
  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
  "language_code": "hk"
}
-->
# 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) 以獲取指導。
- 思考你的版面如何在未來的作業中擴展或進行樣式設計。

---

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