Web-Dev-For-Beginners/translations/hk/3-terrarium/1-intro-to-html/assignment.md

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 元素參考 以獲取指導。
• 思考你的版面如何在未來的作業中擴展或進行樣式設計。

---

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