第 3 章

第一個網頁：Hello World

每個程式設計師學習新技術的第一步，幾乎都是在螢幕上印出「Hello World」。現在輪到你了！這一章我們要從安裝工具開始，一步步建立你人生中的第一個網頁。

📌 本章重點

安裝文字編輯器（VS Code）
建立第一個 .html 檔案
認識 HTML 文件的基本骨架
在瀏覽器中開啟並看到結果

📖 教學說明

步驟一：安裝 VS Code

Visual Studio Code（簡稱 VS Code）是目前最受歡迎的免費程式碼編輯器，微軟出品。它有很多方便的功能，包含 AI Copilot 整合，非常適合初學者。

前往 code.visualstudio.com 下載
選擇你的作業系統版本（Windows / Mac / Linux）
安裝完成後打開它

💡

也可以不安裝

如果你只是想快速試試，可以直接用瀏覽器的 CodePen（codepen.io）或 JSFiddle（jsfiddle.net），不需要安裝任何東西。

步驟二：建立你的第一個 HTML 檔案

在桌面或任意位置建立一個新資料夾，取名 my-first-website
用 VS Code 開啟這個資料夾（檔案 → 開啟資料夾）
在左側資料夾面板點右鍵，選「新增檔案」
取名為 index.html（注意：副檔名一定要是 .html）

步驟三：輸入 HTML 骨架

打開 index.html，輸入以下內容：

HTML

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>我的第一個網頁</title>
</head>
<body>
  <h1>Hello World！</h1>
  <p>我的第一個網頁誕生了！</p>
</body>
</html>

步驟四：在瀏覽器開啟

儲存檔案（Ctrl + S 或 Cmd + S）
在檔案總管中找到 index.html，雙擊開啟
瀏覽器會顯示你的第一個網頁！

🎉

VS Code 小技巧

在 VS Code 裡輸入 ! 再按 Tab 鍵，會自動產生 HTML 骨架，不用每次手動輸入！

🔍 認識 HTML 骨架

讓我們來看看剛才每一行在做什麼：

HTML - 逐行說明

<!-- 告訴瀏覽器：這是 HTML5 文件 -->
<!DOCTYPE html>

<!-- 整個網頁的根元素，lang 設定語言 -->
<html lang="zh-Hant">

<!-- head：放網頁的「設定」，使用者不會直接看到 -->
<head>
  <!-- 設定字元編碼，支援中文 -->
  <meta charset="UTF-8" />
  <!-- 讓手機也能正常顯示 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- 顯示在瀏覽器分頁上的標題 -->
  <title>我的第一個網頁</title>
</head>

<!-- body：使用者實際看到的內容都放在這裡 -->
<body>
  <h1>Hello World！</h1>  <!-- 最大的標題 -->
  <p>我的第一個網頁誕生了！</p>  <!-- 段落文字 -->
</body>

</html>

⚠️ 常見錯誤

✗

檔名取錯，用 .txt 而不是 .html

存檔時要確認副檔名是 .html，不是 .txt。如果瀏覽器只顯示文字而不是網頁，很可能是這個問題。

✗

中文顯示亂碼

忘了加上 <meta charset="UTF-8">，瀏覽器就不知道要用 UTF-8 來解讀中文，造成亂碼。

✗

忘記關閉標籤

大多數 HTML 標籤都需要有開始（<p>）和結束（</p>）。忘記結束標籤會導致版面跑掉。

✏️ 小練習

🎯 動手試試看

練習 1

把 <h1>Hello World！</h1> 改成你自己的名字，存檔後重新整理瀏覽器，確認改變有生效。

練習 2

在 <body> 裡再加一行 <p>今天是我學習程式設計的第一天！</p>，看看畫面會多出什麼。

練習 3

試著改變 <title> 裡的文字，存檔後看看瀏覽器分頁上的標題是否改變了。

🎉

本章完成！

恭喜你！你已經建立了人生中第一個網頁。下一章我們要學更多 HTML 標籤，讓你的網頁內容更豐富。