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.
3.9 KiB
3.9 KiB
HTML 練習作業：建立部落格模型
目標
設計並手寫 HTML 結構，用於個人部落格首頁。本次練習旨在幫助您熟悉語意化 HTML、佈局規劃以及程式碼組織。
指導說明
-
設計您的部落格模型
- 繪製部落格首頁的視覺模型。包含主要區塊，例如標頭、導航欄、主要內容、側邊欄和頁尾。
- 您可以使用紙張繪製並掃描您的草圖，或使用數位工具（例如 Figma、Adobe XD、Canva，甚至 PowerPoint）。
-
識別 HTML 元素
- 列出您計劃用於每個區塊的 HTML 元素（例如
<header>、<nav>、<main>、<article>、<aside>、<footer>、<section>、<h1>–<h6>、<p>、<img>、<ul>、<li>、<a>等）。
- 列出您計劃用於每個區塊的 HTML 元素（例如
-
撰寫 HTML 標記
- 手寫您的模型所需的 HTML。專注於語意化結構和最佳實踐。
- 至少包含 10 個不同的 HTML 元素。
- 添加註解以解釋您的選擇和結構。
-
提交您的作品
- 上傳您的草圖/模型以及 HTML 文件。
- 可選擇性地提供簡短的反思（2–3 句），說明您的設計決策。
評分標準
| 評分項目 | 優秀 | 合格 | 需改進 |
|---|---|---|---|
| 視覺模型 | 清晰、詳細的模型，包含標記區塊和深思熟慮的佈局 | 基本模型，包含部分標記區塊 | 模型簡略或不清晰；缺乏區塊標記 |
| HTML 元素 | 使用 10 個以上語意化 HTML 元素；展現結構和最佳實踐的理解 | 使用 5–9 個 HTML 元素；部分語意化結構 | 使用少於 5 個元素；缺乏語意化結構 |
| 程式碼品質 | 組織良好、易讀的程式碼，包含註解；遵循 HTML 標準 | 程式碼大致組織良好；註解較少 | 程式碼混亂；缺乏註解 |
| 反思 | 深刻反思設計選擇和挑戰 | 基本反思 | 無反思或內容不相關 |
提示
- 使用語意化 HTML 標籤以提升可訪問性和 SEO。
- 使用縮排和註解來組織您的程式碼。
- 參考 MDN HTML 元素參考 以獲取指導。
- 思考您的佈局如何在未來的作業中擴展或進行樣式設計。
免責聲明：
本文件已使用 AI 翻譯服務 Co-op Translator 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。