HTML 基礎與網頁結構｜梅子的網際網路學習歷程

這個頁面帶你從零開始認識 HTML：從最基本的標籤、網頁骨架，到清單、表格、表單與語義化結構，最後還有綜合作業可以當成回家作業或小專題。

建議從上到下依序學習；也可以用目錄直接跳到想複習的主題。每一節都有小練習，最後還有綜合作業。

1. HTML 是什麼？
2. 第一個完整網頁骨架
3. 常用文字標籤：h1 ~ h6、p、br
4. 超連結 a 標籤與 target
5. 圖片 img 標籤與 alt 說明
6. 清單：ul/ol 與 li
7. 表格 table / tr / th / td
8. 表單 form 與 input 基本使用
9. 區塊元素 div / span 與語義標籤
10. 檔案結構與相對路徑
11. 綜合作業一：個人學習歷程頁
12. 綜合作業二：迷你教學網站骨架

1. HTML 是什麼？

用標籤（tag）描述網頁的結構：哪裡是標題、哪裡是段落、哪裡是圖片或連結。

<h1>我是大標題</h1>
<p>這是一段文字內容。</p>

小練習：用 h1 與 p 標籤寫出「自我介紹」標題與一小段文字。

2. 第一個完整網頁骨架

每個 HTML 頁面都會有 doctype、html、head、body 四個主要部分。

<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="UTF-8">
    <title>我的第一個網頁</title>
  </head>
  <body>
    <h1>哈囉，HTML！</h1>
    <p>這是我的第一個網頁。</p>
  </body>
</html>

小練習：建立一個 new.html 檔，把範例貼上去，改成自己的標題文字後，用瀏覽器打開。

3. 常用文字標籤：h1 ~ h6、p、br

用標題標籤表達層級，用 p 表示段落，br 則是單純換行。

<h1>網站主標題</h1>
<h2>章節標題</h2>
<p>這是一個段落，裡面可以放很多文字。<br>這一行用 br 換行。</p>

小練習：做一個包含 h1、h2、p 與 br 的小文章，試著分成兩三個段落。

4. 超連結 a 標籤與 target

用 a 標籤建立超連結，可以連到其他網站或同一網站的其他頁面。

<a href="https://example.com">到 Example 網站</a>
<br>
<a href="about.html" target="_blank">在新分頁開啟關於我</a>

小練習：幫自己的頁面加一個連到 js-course.html 的連結，文字可以寫「前往 JavaScript 課程」。

5. 圖片 img 標籤與 alt 說明

img 需要 src 指向圖片檔案，並加上 alt 文字方便無法顯示圖片時閱讀。

<img src="me.jpg" alt="作者大頭照" width="200">

小練習：準備一張圖片（檔名自己取），用 img 標籤插入並設定適合的 width 與 alt。

6. 清單：ul/ol 與 li

列出條列事項時，使用清單標籤讓結構更清楚。

<h2>無序清單 (ul)</h2>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<h2>有序清單 (ol)</h2>
<ol>
  <li>打開編輯器</li>
  <li>撰寫程式碼</li>
  <li>存檔並用瀏覽器開啟</li>
</ol>

小練習：請幫自己列出「三個最想學會的東西」，用 ul/li 寫出來。

7. 表格 table / tr / th / td

用表格呈現有欄列結構的資料，例如成績表或價目表。

<table border="1">
  <tr>
    <th>姓名</th><th>分數</th>
  </tr>
  <tr>
    <td>小明</td><td>95</td>
  </tr>
</table>

小練習：練習做一個 3 人的成績表格，包含姓名與分數兩欄。

8. 表單 form 與 input 基本使用

表單用來收集使用者輸入，之後可以配合 JavaScript 或後端程式處理。

<form>
  帳號：<input type="text" name="user"><br>
  密碼：<input type="password" name="pw"><br>
  <button type="submit">送出</button>
</form>

小練習：幫自己做一個「聯絡我」表單，至少包含姓名、Email 和留言三個欄位。

9. 區塊元素 div / span 與語義標籤

div 通常用來包一塊區域，span 則是一小段行內內容；語義標籤像 header/nav/main/footer 更有意義。

<header>網站抬頭</header>
<nav>導覽列</nav>
<main>
  <div class="card">
    <h2>文章標題</h2>
    <p>文章內容文章內容...</p>
  </div>
</main>
<footer>版權資訊</footer>

小練習：試著用 header/nav/main/footer 分出網頁的大區塊，哪怕內容還很少也沒關係。

10. 檔案結構與相對路徑

學會如何從一個 HTML 檔正確連到同資料夾或子資料夾內的其他檔案。

<!-- 同一個資料夾 -->
<a href="about.html">關於我</a>

<!-- 子資料夾 images 裡的圖片 -->
<img src="images/logo.png" alt="網站 Logo">

小練習：建立一個 images 資料夾，把圖片放裡面，並在網頁中用正確的相對路徑顯示它。

11. 綜合作業一：個人學習歷程頁

把前面所有 HTML 元素綜合使用，做出一個介紹「自己學程式的故事」的完整頁面。

<h1>我的程式學習歷程</h1>
<p>這裡寫下你為什麼開始學寫程式、遇到的困難與成就。</p>
<h2>學習時間軸</h2>
<ol>
  <li>第一次接觸 HTML</li>
  <li>開始學 CSS</li>
  <li>寫出第一個小作品</li>
</ol>

小練習：請學生寫出至少三個小段落，搭配一張圖片與一個連到 index.html 的超連結，完成個人學習歷程頁。

12. 綜合作業二：迷你教學網站骨架

設計一個只有 HTML 結構的教學網站首頁：包含抬頭、導覽列、主內容區與頁尾。之後可再加上 CSS。

<header>
  <h1>XXX 的教學網站</h1>
  <nav>
    <a href="index.html">首頁</a>
    <a href="html-course.html">HTML 課程</a>
    <a href="css-course.html">CSS 課程</a>
  </nav>
</header>
<main>
  <h2>最新公告</h2>
  <ul>
    <li>新增 HTML 課程筆記</li>
    <li>即將推出 CSS 教學影片</li>
  </ul>
</main>
<footer>© 2025 你的名字</footer>

小練習：要求學生實作這個骨架並自行修改文字內容，未來再在 CSS 課程中為它加上版型與顏色。