HTML 入門教學：5 步驟用記事本做出你的第一個網頁

想學做網頁，卻不知道從哪裡開始？其實不需要昂貴的軟體，也不用先學會寫程式，只要一個「記事本」和一個瀏覽器，10 分鐘就能做出你的第一個網頁。這一切的起點，就是 HTML。

本文以 Windows 內建的「記事本」與常見瀏覽器（Chrome、Edge、Firefox）為例，用 5 個步驟帶你從零開始，完成第一個網頁。文中的圖片為示意圖，不是實際畫面。

先搞懂：HTML 是什麼？

HTML（HyperText Markup Language，超文字標記語言）是用來描述網頁「內容結構」的語言。它不是在做計算的程式語言，而是用「標籤」告訴瀏覽器：這一段是標題、這一段是文章、這裡有一張圖片、那裡有一個連結。

你可以把 HTML 想成文章的「骨架」：

• HTML：決定網頁有哪些內容、內容的結構是什麼。
• CSS：決定網頁長什麼樣子（顏色、字型、版面）。
• JavaScript：決定網頁會做什麼事（互動、動態效果）。

三者之中，HTML 是最基礎的一環，所以學網頁設計通常從它開始。

標籤長什麼樣子？

HTML 的標籤用角括號 < > 包起來，大多數標籤都是「成對」出現：有開始標籤，也有結束標籤（結束標籤多一個斜線 /）。開始標籤、內容、結束標籤合在一起，稱為一個「元素」。

圖 1　HTML 元素的組成（示意圖）

步驟一：建立 HTML 檔案

1. 在桌面或自己習慣的資料夾，新增一個資料夾，命名為 myweb（建議使用英文與數字）。
2. 開啟「記事本」。
3. 先不用輸入任何內容，按「檔案」→「另存新檔」。
4. 選擇剛剛建立的 myweb 資料夾，檔案名稱輸入 index.html。
5. 下方的「存檔類型」選「所有檔案」，「編碼」選 UTF-8，再按「存檔」。

小提醒：副檔名一定要是 .html，否則瀏覽器會把它當成一般文字檔。編碼選 UTF-8，中文才不會變成亂碼。若你的電腦沒有顯示副檔名，可以在檔案總管的「檢視」中勾選「副檔名」。

步驟二：寫出網頁的基本骨架

每個網頁都有一套固定的骨架。請把下面的內容輸入（或複製）到 index.html 裡，然後存檔：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>我的第一個網頁</title>
</head>
<body>

</body>
</html>

這幾行各有各的任務：

• <!DOCTYPE html>：告訴瀏覽器，這是一份 HTML5 文件。
• <html lang="zh-Hant">：整份網頁的最外層，lang 指定語言為繁體中文。
• <head>：網頁的「設定區」，裡面的資訊不會顯示在畫面上。<meta charset="UTF-8"> 指定編碼，<title> 是瀏覽器分頁上的標題。
• <body>：網頁的「內容區」，你想讓訪客看到的東西，都寫在這裡。

圖 2　<html> 底下分成 <head> 與 <body> 兩個區域（示意圖）

步驟三：加入標題與段落

現在要讓網頁有內容了。請在 <body> 與 </body> 之間，加入下面兩行：

<h1>哈囉，世界！</h1>
<p>這是我用 HTML 寫的第一個網頁。</p>

• <h1>：最大的標題，一個網頁通常只放一個，代表網頁的主題。
• <p>：段落（paragraph），用來放一般文章。

標題標籤共有六個層級，從 <h1> 到 <h6>，數字越小，標題越大、越重要。層級要依文章結構使用，不要只是為了讓字變大而亂用。

步驟四：加入清單、連結與圖片

一個像樣的網頁，通常還會有清單、連結和圖片。請在剛剛的段落後面，繼續加入以下內容：

<h2>我正在學的東西</h2>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<p>想了解更多，可以到
  <a href="https://www.twbts.info/">數位書香</a> 逛逛。</p>

<img src="photo.jpg" alt="我的第一張網頁圖片" width="300">

這段程式裡用到了幾個新標籤：

• <h2>：次一級的標題。
• <ul> 與 <li>：項目清單（unordered list）與清單項目（list item）。若要有編號的清單，把 <ul> 換成 <ol> 即可。
• <a href="網址">：超連結，href 後面放要前往的網址，標籤中間放顯示的文字。
• <img src="圖檔" alt="說明">：插入圖片。src 是圖片檔名，alt 是圖片的替代文字，圖片載入失敗或使用者仰賴讀屏軟體時就會用到。<img> 沒有結束標籤。

小提醒：範例中的 photo.jpg 必須與 index.html 放在同一個資料夾，圖片才會顯示。你可以先找一張自己的照片，改名為 photo.jpg 放進 myweb 資料夾。

常用標籤整理

標籤	用途	有結束標籤？
<h1>～<h6>	標題（六個層級）	有
<p>	段落	有
<a>	超連結	有
<ul>、<ol>、<li>	項目清單、編號清單、清單項目	有
<img>	圖片	沒有
<br>	換行	沒有

步驟五：用瀏覽器開啟，看看成果

1. 回到記事本，按 Ctrl＋S 存檔。
2. 到 myweb 資料夾，在 index.html 上連按滑鼠左鍵兩下。
3. 瀏覽器會自動開啟，你就會看到自己做的第一個網頁了。

以後每次修改程式，都是「在記事本修改 → Ctrl＋S 存檔 → 到瀏覽器按 F5 重新整理」，馬上就能看到結果，這是學 HTML 最有成就感的地方。

圖 3　瀏覽器開啟 index.html 後的畫面（示意圖）

新手常見問題

• 中文變成亂碼：檢查記事本存檔時是否選了 UTF-8，且 <head> 裡有 <meta charset="UTF-8">。
• 改了程式，畫面沒變：確認有按 Ctrl＋S 存檔，再到瀏覽器按 F5 重新整理。
• 圖片不顯示：確認圖片檔名（含大小寫與副檔名）與 src 寫的完全一致，且圖片和網頁放在同一個資料夾。
• 標籤沒有成對：忘了寫結束標籤，整段版面可能會跑掉。每寫一個開始標籤，就順手把結束標籤補上。
• 檔案打不開，變成文字：可能檔名變成 index.html.txt，請顯示副檔名後改回 index.html。

小練習：做一頁「自我介紹」

學完基本操作，最好的方法就是動手做。請試著完成以下作業，也歡迎分享給一起學習的朋友：

1. 用 <h1> 寫上你的名字或暱稱。
2. 用 <p> 寫兩三句自我介紹。
3. 用 <ul> 列出你的三個興趣。
4. 放入一張自己喜歡的圖片。
5. 加入一個連結，連到你最喜歡的網站。

結語

HTML 的核心觀念其實很簡單：用標籤替內容標示身分，再由瀏覽器依標籤呈現出來。今天你已經學會了網頁的基本骨架、標題、段落、清單、連結與圖片，這些就足以做出一個簡單的網頁。下一步，可以接著學習 CSS，替網頁換上顏色與版面，讓它從「能看」變成「好看」。