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-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， ）
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 ) 以獲取指導。
- 思考您的佈局如何在未來的作業中擴展或進行樣式設計。
---
** 免責聲明**：
本文件已使用 AI 翻譯服務 [Co-op Translator ](https://github.com/Azure/co-op-translator ) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。
