You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
<!--
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， ）
2. ** 識別 HTML 元素**
- 列出你計劃用於每個區塊的 HTML 元素（例如：`< header > `、`< nav > `、`< main > `、`< article > `、`< aside > `、`< footer > `、`< section > `、`< h1 > `– < h6 > `、`< p > `、`< img > `、`< ul > `、`< li > `、`< a > ` 等）。
3. ** 撰寫 HTML 標記**
- 手寫你的模擬版面的 HTML。專注於語義化結構和最佳實踐。
- 至少包含 10 個不同的 HTML 元素。
- 添加註解以解釋你的選擇和結構。
4. ** 提交你的作品**
- 上傳你的草圖/模擬版面以及 HTML 文件。
- （ ） （ –
## 評分標準
| 評分項目 | 優秀 | 合格 | 需改進 |
|------------------|------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------|--------------------------------------------------------------------------------|
| 視覺模擬版面 | 清晰、詳細的模擬版面，標註區塊並具有周到的版面設計 | 基本模擬版面，部分區塊有標註 | 模擬版面簡陋或不清晰；缺乏區塊標註 |
| HTML 元素 | 使用 10 個以上語義化 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 ) 進行翻譯。儘管我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
