7.1 KiB

Raw Blame History Unescape Escape

HTML 練習作業：建立部落格模擬版面

學習目標

透過設計和編寫完整的部落格首頁結構來應用您的 HTML 知識。這項實作作業將加強您對語義化 HTML 概念的理解、可訪問性最佳實踐，以及在網頁開發過程中使用的專業代碼組織技能。

完成此作業後，您將能夠：

練習在編碼前規劃網站版面
適當地應用語義化 HTML 元素
創建可訪問且結構良好的標記
培養專業的編碼習慣，包括添加註解和組織代碼

專案要求

第一部分：設計規劃（視覺模擬版面）

創建您的部落格首頁的視覺模擬版面，需包含以下內容：

帶有網站標題和導航的頁首
主內容區域，至少包含 2-3 篇部落格文章預覽
側邊欄，包含額外資訊（關於區塊、近期文章、分類）
頁尾，包含聯絡資訊或連結

模擬版面創建選項：

手繪草圖：使用紙和鉛筆，然後拍照或掃描您的設計
數位工具：Figma、Adobe XD、Canva、PowerPoint 或任何繪圖應用程式
線框工具：Balsamiq、MockFlow 或類似的線框設計軟體

為您的模擬版面各部分標註您計劃使用的 HTML 元素（例如，「頁首 - <header>」、「部落格文章 - <article>」）。

第二部分：HTML 元素規劃

創建一份清單，將模擬版面的每個部分映射到特定的 HTML 元素：

Example:
- Site Header → <header>
- Main Navigation → <nav> with <ul> and <li>
- Blog Post → <article> with <h2>, <p>, <time>
- Sidebar → <aside> with <section> elements
- Page Footer → <footer>

必須包含的元素： 您的 HTML 必須至少包含以下清單中的 10 個不同語義化元素：

<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>
<h1>、<h2>、<h3>、<p>、<ul>、<li>、<a>
<img>、<time>、<blockquote>、<strong>、<em>

第三部分：HTML 實作

按照以下標準編寫您的部落格首頁：

文件結構：包含正確的 DOCTYPE、html、head 和 body 元素
語義化標記：使用 HTML 元素完成其預期用途
可訪問性：為圖片添加正確的 alt 文本，並使用有意義的連結文字
代碼品質：使用一致的縮排和有意義的註解
內容：包含真實的部落格內容（可以使用佔位文字）

範例 HTML 結構：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Personal Blog</title>
</head>
<body>
    <!-- Main site header -->
    <header>
        <h1>My Blog Title</h1>
        <nav>
            <!-- Navigation menu -->
        </nav>
    </header>
    
    <!-- Main content area -->
    <main>
        <!-- Blog posts go here -->
    </main>
    
    <!-- Sidebar content -->
    <aside>
        <!-- Additional information -->
    </aside>
    
    <!-- Site footer -->
    <footer>
        <!-- Footer content -->
    </footer>
</body>
</html>

第四部分：反思

撰寫簡短的反思（3-5 句），回答以下問題：

您最有信心使用哪些 HTML 元素？
在規劃或編碼過程中遇到了哪些挑戰？
語義化 HTML 如何幫助組織您的內容？
在下一個 HTML 專案中，您會做哪些不同的事情？

提交清單

提交前，請確保您已完成以下事項：

帶有 HTML 元素標註的視覺模擬版面
完整的 HTML 文件，具有正確的文件結構
至少適當使用 10 個不同的語義化 HTML 元素
有意義的註解，解釋您的代碼結構
有效的 HTML 語法（在瀏覽器中測試）
撰寫反思，回答提示問題

評估標準

評估標準	卓越 (4)	熟練 (3)	發展中 (2)	初學 (1)
規劃與設計	詳細且標註清晰的模擬版面，顯示對版面和 HTML 語義結構的清楚理解	清晰的模擬版面，大部分部分標註適當	基本模擬版面，部分標註，顯示一般理解	模糊或不清楚的模擬版面，缺乏適當的部分標註
語義化 HTML 使用	適當使用 10 個以上的語義化元素，展現對 HTML 結構和可訪問性的深刻理解	正確使用 8-9 個語義化元素，展現對語義化標記的良好理解	使用 6-7 個語義化元素，對適當使用有些許困惑	使用少於 6 個元素或錯誤使用語義化元素
代碼品質與組織	代碼組織極佳，縮排正確，註解全面，HTML 語法完美	代碼組織良好，縮排適當，註解有幫助，語法有效	代碼大致組織良好，有一些註解，存在小的語法問題	組織差，註解少，存在多個語法錯誤
可訪問性與最佳實踐	可訪問性考量極佳，alt 文本有意義，標題層次正確，遵循所有現代 HTML 最佳實踐	良好的可訪問性功能，適當使用標題和 alt 文本，遵循大部分最佳實踐	有一些可訪問性考量，基本的 alt 文本和標題結構	可訪問性功能有限，標題結構差，未遵循最佳實踐
反思與學習	深刻的反思，展現對 HTML 概念的深刻理解和對學習過程的深入分析	良好的反思，展現對關鍵概念的理解和一定的學習自我認知	基本的反思，對 HTML 概念或學習過程的洞察有限	反思簡短或缺失，顯示對所學概念的理解不足

學習資源

基本參考：

MDN HTML 元素參考 - HTML 元素的完整指南
HTML5 語義化元素 - 理解語義化標記
網頁可訪問性指南 - 創建可訪問的網頁內容
HTML 驗證工具 - 檢查您的 HTML 語法

成功的專業提示：

在編寫任何代碼之前先完成模擬版面
使用瀏覽器的開發者工具檢查您的 HTML 結構
在不同的螢幕尺寸下測試您的頁面（即使不使用 CSS）
大聲朗讀您的 HTML，檢查結構是否合乎邏輯
考慮螢幕閱讀器如何解讀您的頁面結構

💡 記住：此作業重點在於 HTML 結構和語義化。不必擔心視覺樣式——這是 CSS 的工作！您的頁面可能看起來很簡單，但它應該結構良好且具有意義。

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

7.1 KiB Raw Blame History Unescape Escape