HTML：先讓瀏覽器看懂你的內容

這一課完成後：你會從空資料夾建立一個 index.html，知道 HTML 的 element、tag、attribute 在做什麼，並做出一頁有清楚結構的個人介紹頁。

先建立新的 Web Basics 專案

Start Here 的練習已經完成，這裡不要繼續把所有東西塞進 norelyn-first-project。建立一個新的資料夾：

web-basics-playground/

用 VS Code 的 Open Folder 打開它，再新增：

index.html

index.html 是網站最常見的首頁檔名。很多伺服器在你只指定一個資料夾時，也會優先尋找它。

先直接放一行東西進去

在 index.html 輸入：

Hello, web.

儲存，然後直接用瀏覽器打開這個檔案。你會看到文字。

這證明一件事：瀏覽器確實可以顯示 HTML 檔，但目前它還不知道這句文字扮演什麼角色。

把文字變成真正的 HTML element

改成：

<h1>Hello, web.</h1>

重新整理瀏覽器。文字通常會變大、變粗。不是因為我們寫了 CSS，而是瀏覽器對 h1 有自己的預設樣式。

這一段裡：

<h1> → opening tag
Hello, web. → content
</h1> → closing tag
整段 → element

很多人會把 tag 和 element 混著講，日常溝通問題不大；但概念上，tag 是標記本身，element 是完整結構。

HTML 的重點不是「長怎樣」，而是「這是什麼」

加入：

<h1>Norelyn Web Basics</h1>
<p>This is my first structured web page.</p>

h1 表示最高層級主標題；p 表示 paragraph。

瀏覽器現在不只拿到一串字，而是拿到帶有語意的內容結構。

HTML = structure + meaning
CSS = presentation
JavaScript = behavior

這個分工會一路貫穿整條 Web Basics。

補上完整 HTML 文件骨架

把內容改成：

<!doctype html>
<html lang="zh-Hant">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Norelyn Web Basics</h1>
    <p>This is my first structured web page.</p>
  </body>
</html>

這已經是後面會一直沿用的基本 HTML 文件。

每一層到底在做什麼？

<!doctype html> 告訴瀏覽器用現代 HTML 標準解讀文件。

<html> 是整份 HTML 文件的根元素；lang="zh-Hant" 告訴瀏覽器、搜尋引擎與輔助技術這頁主要是繁體中文。

<head> 放的是頁面資訊與設定，通常不是主要內容；<body> 才是使用者實際會看到的主要內容。

<meta charset="UTF-8"> 指定文字編碼；viewport 則讓行動裝置用正確的頁面寬度呈現。

<title> 會出現在瀏覽器分頁標題，也會被搜尋引擎與分享情境使用。

縮排不會改變 HTML 的核心意思，但一定要整理

瀏覽器通常不在乎你把 HTML 全擠成一行，然而人非常在乎。

<body>
  <h1>Title</h1>
  <p>Paragraph</p>
</body>

縮排讓父子關係一眼可見。之後 DOM、CSS selector、JavaScript 操作全部都會依賴這種結構，所以現在就養成整理層級的習慣。

再加入一些常用元素

把 body 改成：

<body>
  <h1>朱家睿的第一個網站</h1>

  <p>我正在學 HTML、CSS 和 JavaScript。</p>

  <h2>我現在在學什麼</h2>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>

  <p>
    我正在使用
    <a href="https://code.visualstudio.com/">VS Code</a>
    寫這一頁。
  </p>
</body>

這裡多了：

h2 → 次層標題
ul → unordered list
li → list item
a → anchor / link

Attribute 是元素的額外資訊

看看：

<a href="https://code.visualstudio.com/">VS Code</a>

href 就是一個 attribute。它告訴 a 元素連結要去哪裡。

element：a
attribute：href
value：https://code.visualstudio.com/

之後你還會大量看到 class、id、src、alt、type 等 attributes。

加入圖片，但不要漏掉 alt

先在專案建立：

images/

放入一張你有權使用的圖片，例如：

images/profile.jpg

然後加入：

<img src="images/profile.jpg" alt="我的個人介紹圖片" />

src 是圖片來源；這裡用的是你在 Start Here 已經學過的相對路徑。

alt 則是圖片無法顯示或使用螢幕閱讀器時的重要替代文字。它不是「SEO 關鍵字塞滿區」，而是描述這張圖在這裡傳達什麼。

有些元素沒有 closing tag

img、meta 等元素不包住一段內容，因此不會像 p 一樣有一組 opening / closing tag。

<img src="images/profile.jpg" alt="我的個人介紹圖片" />
<meta charset="UTF-8" />

你可能也會看到沒有最後斜線的寫法，例如 <img ...>。在 HTML5 裡同樣正常。這門課會保留自閉合斜線只是為了讓初學者比較容易一眼辨認。

不要為了畫面大就亂用 h1

如果你想把某段字變大，不要因此把所有東西都改成 h1。標題層級應該描述內容架構，外觀交給下一課 CSS。

h1 / h2 / h3 → 文件結構
font-size / color / spacing → CSS

一個頁面通常有清楚的主標題，再依內容層級往下排，而不是用 heading 當放大字工具。

Semantic HTML：先用「它是什麼」思考

HTML 有很多元素不是為了外觀，而是描述內容角色。例如：

<header>...</header>
<main>...</main>
<section>...</section>
<footer>...</footer>

你當然可以把全部內容都塞進 div，但如果明明是主要內容，就用 main；明明是頁尾，就用 footer。這讓文件結構對瀏覽器、搜尋引擎、輔助技術與其他開發者更清楚。

把你的頁面整理成有語意的版本

可以改成：

<body>
  <header>
    <h1>朱家睿的第一個網站</h1>
    <p>一個正在學 Web Basics 的高中生。</p>
  </header>

  <main>
    <section>
      <h2>關於我</h2>
      <p>我正在學 HTML、CSS 和 JavaScript。</p>
    </section>

    <section>
      <h2>目前學習內容</h2>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>Built during Norelyn Learn Web Basics.</p>
  </footer>
</body>

畫面現在可能還是很普通。完全正常。HTML 的工作不是先把它做漂亮，而是先把內容骨架做好。

小挑戰：不要照抄完整答案

需求 1：頁面必須有一個 h1，內容由你自己決定。

需求 2：至少兩個不同主題的 section，每個都有自己的 h2。

需求 3：至少一個清單。

需求 4：至少一個真正能點擊的連結。

需求 5：至少一張圖片，使用相對路徑並寫合理的 alt。

需求 6：修改 title，不要留著 My First Web Page。

完成後重新整理瀏覽器，確認所有內容都能正常顯示、連結能點、圖片能載入。

最後故意做錯一次

把圖片路徑故意改錯，例如：

<img src="images/not-found.jpg" alt="測試圖片" />

重新整理，看看瀏覽器如何反應，再把路徑修回來。

這不是多餘的。真正寫網站時，你會一直遇到「畫面沒出來」；先學會從路徑、檔名、拼字、儲存狀態檢查，比死背元素清單更重要。

這一課真正要記住的模型

HTML file → elements → structure + meaning → browser parses → page

你現在不用記住所有 HTML 元素。真正需要的是：看到內容時，開始問「這段東西在文件裡是什麼角色？」然後選一個合理的元素。

下一課 CSS 才會接手外觀：字體、顏色、間距、邊框、大小與版面。你會直接繼續使用這一課的同一個 web-basics-playground。

完成條件：你有一個可正常打開的 index.html，包含完整文件骨架、標題層級、段落、清單、連結、圖片與基本 semantic structure，而且內容是你自己整理出來的。