簡介
你是否曾好奇，瀏覽器中豐富多彩的網頁是如何由簡單文字構成的？其實，透過 HTML（HyperText Markup Language，超文本標記語言），我們能用純文字寫出網站的骨架，讓瀏覽器將其呈現在畫面上。換句話說，只需要幾行簡單的文字程式碼，我們就可以打造出屬於自己的網頁。
準備開始並不困難。你只需要：
- 線上 HTML 編輯器（HTML Editor.io、W3Schools、Codepen 等）
- 一個純文字編輯器（例如 VS Code、Notepad++ 或 Sublime Text 等）
- 一個現代網頁瀏覽器（例如 Chrome、Firefox 或 Safari）
【VS Code 安裝教學】 【Notepad++ 安裝教學】 【Sublime Text 安裝教學】
在編輯器中輸入 HTML 原始碼，將檔案儲存命名為 index.html，然後在瀏覽器中開啟這個檔案，就能看到你的網頁成果。index.html 通常是網站的首頁預設檔名，瀏覽器會預設尋找這個檔案作為入口。
現在，讓我們循序漸進，一起構築一個簡單而完整的 HTML 網頁吧！
HTML 基本結構
想像 HTML 是網頁的建築藍圖，我們首先需要搭好網站的骨架。每個 HTML 檔案都由一個固定的基本結構組成，包含一些必要的標籤（tag）。以下是建立網頁所需的基本元素：
- <!DOCTYPE html>：文件型態宣告，告訴瀏覽器這是一個 HTML5 網頁文件。
- <html>：HTML 文件的根元素，所有網頁內容都位於此標籤內。
- <head>：頁面頭部，用於放置頁面資訊（例如字元編碼、網頁標題等），這部分內容不直接顯示在頁面中。
- <body>：頁面主體，放置實際要呈現在瀏覽器畫面上的內容（如文字、圖片、連結等）。
下面，我們提供一個基本的 HTML 文件範例。你可以將這段程式碼貼到文字編輯器中，儲存為 index.html，然後用瀏覽器開啟來看看會呈現出什麼：
<!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <title>示範網頁</title> </head> <body> <h1>歡迎來到我的網站</h1> <p>這是一個範例段落，用於展示 HTML 頁面的內容。</p> </body> </html>
在上述程式碼中，我們可以看到完整的 HTML 結構。<!DOCTYPE html> 位於第一行，宣告這是 HTML5 文件。<html lang="zh-TW"> 表示文件語言為繁體中文（有助於搜尋引擎與瀏覽器了解語系）。在 <head> 區塊中，我們加入了 <meta charset="UTF-8"> 來指定文件使用 UTF-8 編碼（確保中文等文字正確顯示），以及 <title>示範網頁</title> 設定瀏覽器標籤頁上顯示的標題文字。接著在 <body> 區塊中，我們放入了 <h1> 大標題和一個 <p> 段落文字。當你在瀏覽器中打開這個 HTML 檔案時，頁面上會呈現出對應的標題和文字內容。
了解了 HTML 文件的骨架後，接下來我們將開始豐富頁面的內容。一段良好的開場白之後，現在是時候往網站的骨架上添磚加瓦，從標題和段落文字開始。
標題與段落
有了頁面的基本結構，我們可以透過標題和段落來加入文字內容。HTML 提供了六級標題標籤：<h1> 到 <h6>，<h1> 定義最大、最重要的標題，而 <h6> 是最小的標題。段落文字則使用 <p> 標籤來包裹。適當地使用標題和段落，不僅能讓內容條理分明，還能提升頁面的可讀性。
舉個例子，我們可以為網站加上一些標題和文字說明：
<h1>網站主標題</h1> <p>這是一個由段落標籤定義的文字段落，通常用於放置一般內容敘述。</p> <h2>次級標題</h2> <p>這裡是另一個段落，用來補充或說明次級主題的內容。</p>
在這段範例中，<h1> 顯示出主標題，字體通常最大最醒目。而 <h2> 則是次級標題，其文字大小和重要性略低於 <h1>。你可以依序使用 <h3>、<h4> 等更小的標題來表示內容的層次架構。每個 <h1>...<h6> 標籤在瀏覽器中都會自動在其前後增加一些空白間距，以區隔內容段落。<p> 標籤則將一段段文字內容分隔開，每個段落同樣會在前後產生適當的間距，讓閱讀體驗更佳。
試著將以上的範例標題與段落加入你的 index.html 檔案中並重新載入瀏覽器，你會看到網頁上出現了層次分明的標題和文字內容。當網頁有了一些文字架構之後，接下來我們來看看如何利用列表讓內容結構更加清晰。
列表
當我們需要羅列多項資料時，列表是非常好用的元素。HTML 提供了無序列表和有序列表兩種類型：
- 無序列表使用 <ul> 標籤建立，列表項目前方會以項目符號（通常是實心圓點）呈現。
- 有序列表使用 <ol> 標籤建立，列表項目則會自動以數字編號排列。
無論是哪一種類型，每一個列表項目都需要放在 <li>（list item）標籤中。以下是兩種列表的範例：
<h2>購物清單</h2> <ul> <li>牛奶</li> <li>麵包</li> <li>雞蛋</li> </ul> <h2>待辦事項</h2> <ol> <li>完成 HTML 作業</li> <li>練習 CSS 設計</li> <li>規劃 JavaScript 專案</li> </ol>
在上面的範例中，<ul> 無序列表呈現了一個購物清單，各項目前方會自動帶有項目符號（例如「牛奶」、「麵包」、「雞蛋」前的圓點）。而 <ol> 有序列表則顯示了一份待辦事項清單，瀏覽器會自動為每個 <li> 項目加上編號（1、2、3…）。列表能讓相關資訊以結構化的方式呈現，使用者能一目了然地看到各項目之間的關係。
將這些列表標籤加入你的網頁後，頁面的內容變得更有條理。然而，一個網頁往往不只是靜態的文字——我們也希望能在不同頁面之間提供導覽。接下來，讓我們加入超連結來實現頁面跳轉。
超連結
超連結（hyperlink）讓網頁與網頁之間建立橋樑，使使用者可以從一個頁面跳轉到另一個頁面或網站。在 HTML 中，超連結是用 <a> 標籤來定義的。<a> 是 anchor（錨點）的縮寫，透過設置 href（hyperreference）屬性來指定連結目標的網址或路徑。
以下是一個超連結的簡單範例：
<p>想了解更多資訊嗎？請點擊<a href="#">這裡</a>進入範例網站。</p>
在這段程式碼中，<a href="#">這裡</a> 創建了一個可點擊的文字「這裡」。當使用者點擊它時，瀏覽器會導向指定的網址。預設情況下，超連結會以藍色帶底線的樣式呈現（點擊過後通常轉為紫色），以提示使用者這是一個可點擊的連結。你也可以將 href 設成頁面中的某個區塊（使用 # 加上目標元素的 ID）或網站內其他網頁的檔案路徑，以實現跳轉至同一網站內的不同頁面。
運用了 <a> 標籤之後，我們的網頁就具備了基本的導覽功能，能夠連接到更多豐富的網路資源了。那麼，除了文字內容，我們還可以加入什麼元素來讓網頁更吸引人呢？接下來，我們看看如何在頁面中插入圖片。
圖片插入
圖片的加入可以大大提升網頁的吸引力與表達力。在 HTML 中，可以使用 <img> 標籤來插入圖片。<img> 標籤是一個自閉合（self-closing）標籤，意思是它沒有對應的結束標籤，因為圖片標籤本身不包含文字內容。使用 <img> 時，我們需要提供以下兩個重要屬性：
- src：指定圖片的來源路徑或網址（source）。可以是本地檔案名稱（例如 "photo.webp"，需確保該圖檔與 HTML 檔位於相同資料夾），也可以是線上圖片的完整 URL。
- alt：替代文字（alternative text），當圖片無法載入時會顯示此文字，並作為視障使用者以輔助工具瀏覽時對圖片的說明。
以下是一個插入圖片的範例：
<h2>我們的團隊</h2> <img src="team.webp" alt="團隊成員合照"> <p>以上是一張團隊合照的示意圖片。</p>
在這個例子中，<img src="team.webp" alt="團隊成員合照"> 會在頁面上顯示一張名為 team.webp 的圖片（假設該圖片檔與 HTML 檔案存放在同一資料夾下）。alt 屬性的值則是在圖片無法正常顯示時，用來替代圖片位置所顯示的文字（例如：「團隊成員合照」），同時也提供搜尋引擎和輔助工具關於圖片內容的資訊。後續的 <p> 段落對圖片進行了補充說明，這在實際網頁中是可選的，取決於你是否需要對圖片內容加以解釋。
現在，你可以嘗試將 <img> 標籤加入你的網頁，記得將 src 設定為實際存在的圖片檔案名稱或有效的圖片 URL。加入圖片後，整個網頁將變得更加豐富多彩，圖文並茂的內容可以更有效地傳達資訊。
我們已經一步步完成了從建立 HTML 結構到添加文字、列表、連結和圖片的過程。雖然這只是網站開發的起步，但這些基礎元素構成了絕大多數網頁的核心。當你掌握了這些知識，就可以開始動手創作自己的網頁版圖。最後，我們來看看一些在製作 HTML 網頁時常見的問題與解答，希望能幫助你更順利地排除疑難。
常見問答
- 問：我已經用文字編輯器寫好 HTML 原始碼並儲存為 .html 檔，但用瀏覽器開啟時看到的不是網頁而是一串程式碼，這是怎麼回事？
答： 這種情況通常是因為檔案副檔名或開啟方式不正確。請確定你儲存檔案時使用了 .html 副檔名（而非 .txt 等其他格式）。另外，請使用瀏覽器來開啟該檔案（例如雙擊檔案或在瀏覽器中使用「開啟檔案」功能），而不是透過文字編輯器打開它。若檔案已正確儲存為 HTML 且以瀏覽器開啟，卻仍然看到原始碼，請確認檔案內容是否完整包含了前述的基本 HTML 結構，沒有遺漏如 <html> 或 <body> 等必要標籤。
- 問：為什麼我使用 <img> 插入的圖片沒有顯示出來？
答： 如果圖片無法顯示，可能有以下幾種原因：(1) src 屬性的路徑不正確。例如，檔名拼寫錯誤，或者圖片檔不在正確的資料夾位置。請檢查 HTML 檔與圖片檔是否放在相同路徑下，且路徑拼寫無誤；(2) 圖片檔本身損壞或不存在，嘗試直接開啟該圖片檔以確認它能正常顯示；(3) <img> 標籤的語法錯誤，例如遺漏引號或標籤不完整。請確定你的 <img> 標籤格式正確，如 <img src="photo.webp" alt="描述文字">。當修正上述問題後，圖片通常就能順利顯示。
- 問：如何讓網頁上的超連結點擊後在新分頁開啟？
答： 預設情況下，<a> 超連結會在目前的瀏覽器分頁中載入目標頁面。若希望在新分頁（或新視窗）中開啟，可以為 <a> 標籤添加一個屬性，例如：<a href="#" target="_blank">連結</a>。target="_blank" 會指示瀏覽器在新分頁開啟該連結。此外，為了安全與效能考量，通常會再加入 rel="noopener noreferrer" 屬性以防範潛在的安全風險並提升新分頁載入性能。完整範例如下：<a href="#" target="_blank" rel="noopener noreferrer">連結</a>。加入這些屬性後，使用者點擊連結將在瀏覽器的新分頁中打開目標網頁，而當前頁面不受影響。
掌握了以上的 HTML 基礎知識後，你已經踏出了網頁開發的重要第一步。接下來，你可以嘗試進一步學習如何使用 CSS 來美化頁面、利用 JavaScript 增加互動性。現在，就從這些基礎開始實作，親手打造出屬於你自己的網頁吧！
