創建首頁
每個網站都是網頁的集合。所以，構建一個完整的網站，就是編寫這樣一個個單獨網頁的過程。從技術上說，網頁是一種特殊的文檔，它是用一種稱為 HTML (HyperText Markup Language,
超文本標記語言) 的電腦語言寫成。 網頁是為網頁瀏覽器 (web browsers) 所編寫。常見的網頁瀏覽器，像是 Google Chrome, Firefox, Internet Explorer 和 Safari 等等，
它們都具備相同的功能：就是讀取用 HTML 所寫成的網頁文檔，然後把它們轉化為格式完美的頁面顯示出來，以供閱覽。
一個網站既然是由許多的網頁所構成，那麼，當我們拜訪一個網站時，我們究竟會先看到哪一頁網頁呢? 答案是： 那個網站的所謂「首頁」 (home page) 。當網頁瀏覽器透過互聯網，
與我們所要拜訪的網站建立起聯繫時，瀏覽器會向網站的服務器 (web server) 發出取得網頁的請求 。這時，網站的服務器便會將該網站的首頁發送給瀏覽器。每個網站不論
包含多少網頁，它都必須要有這樣一個默認的首頁。首頁在內容上來說未必有什麼特別，但是它有一個獨特的檔名： index.html。
本教程將向您介紹如何使用HTML編寫網頁。 您將能了解HTML的基本工作原理，並用它來製作自己的網頁。我們將一步步地創建一個最基本的HTML網頁文件，
並將其命名為 index.html。 目前，您將把網頁存儲在個人電腦上，只有自己可以瀏覽。 日後如果您有興趣，可以參考另一教程： 如何使用 Google Cloud 操作「網站託管/寄存」 (web hosting)。您將會進一步學習到如何將網頁上網置於在線狀態，讓任何具有網路連接的人都可以看到它們。
網頁語言
HTML 是為編寫網頁所發展出來的一種語言，也是創建網頁時所需要遵循的一個標準。 每個網頁都是用 HTML 編寫而成。 您在瀏覽器中看到的網頁或者包含各式商品圖片、
或者是系列博客文章、又或者是包含複雜表格的研究報告; 但是它們真正的原始面貌，其實都只是以 HTML 寫成的文檔。
HTML 在網頁的構成中起著關鍵作用：它告訴瀏覽器如何使用稱為標籤 (tag) 的特殊指令來顯示頁面的格式和內容。這些標籤指令告訴瀏覽器何時開始段落、粗體字、或是顯示圖片。
要創建自己的網頁，您就需要學習如何使用這一系列的標籤。
HTML 是編寫網頁的標準，它和瀏覽器在網路上如何請求和取得網頁沒有任何關係。瀏覽器在網路上的運作是根據另外一個標準，稱為 HTTP （HyperText Transfer Protocol,
超文本傳輸協議）。該標準是一種通訊技術，可以使兩台電腦通過 Internet 交換數據。如果用電話交談作比喻，HTTP 就是指通過電話線打電話這種聯繫方式，而 HTML 文檔
則是通話的實際內容。
網頁解構
在一個頁面的背後，HTML 網頁實際上僅是純文本文件。 也就是說，您所用以創建網頁的原始碼完全是由字母、數字和一些特殊字符（例如空格、標點符號以及鍵盤上可見的所有其他字符）組成。
請看以下的例子：
在上圖中，我們呈現並解析了一個非常簡單的 HTML 網頁文件。從這個例子，我們可以看出編寫網頁其實真的不難，而學習如何用 HTML 編寫網頁更是容易入門。您不需要先架設一個在線的網站，
即可開始創建網頁。 僅僅使用自己的電腦就可以輕鬆地構建和測試網頁。 實際上，您甚至都不需要有互聯網的網路連接，唯一需要的工具只是基本的文字編輯器 (text editor)
和日常使用的網頁瀏覽器。
編輯工具
本教程將使用 Windows 所隨附的記事本 (Notepad) 文字編輯器來創建和編輯 HTML 文件。 市面上有許多專門用於編輯網站的高級工具 (譬如 Adobe 的 Dreamweaver)，
但您實際上並不需要它們。對於初學者而言，如果過早開始使用它們，您可能會因為這些工具本身不必要的複雜性而對學習網頁編寫感到卻步; 反而難以真正了解 HTML 的工作原理。
其實，許多專業的網頁設計師都更偏愛使用簡單的文字編輯工具。
每個 HTML 文檔實際上都只是一個普通的文本文件。 在之前的附圖中可以看到：網頁瀏覽器將一個簡單的 HTML 頁面以優美的格式呈現出來。 您同時也看到了這個 HTML 文件在文字編輯器
中打開後的樣貌，只是簡單的寥寥數行 - 除了網頁本文外，還加入了一些由尖括號 <> 構成的標籤。 就是這些 HTML 標籤，清楚地傳達了網頁的結構和格式訊息。
編寫網頁
如果您使用 Windows 電腦，現在就請啟動系統隨附的記事本 (Notepad) 文字編輯器。 在 Windows 電腦上，要打開記事本，請單擊 "開始" 或 ”搜尋” 按鈕，鍵入 “notepad”，
然後單擊所出現的記事本圖標。
當您打開記事本的編輯視窗之後，就可以開始編寫 HTML 文件了。
每個 HTML 文件都必需一些固定的標籤作為骨架。這個骨架是在向網頁瀏覽器宣告，它是一個符合標準的網頁文件，並且將文件劃分成兩個功能性的部份。現在，
您就可以在記事本中鍵入這個必需的骨架，就是以下這段非常簡單的 HTML 代碼：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
|
如此就完成了一個真正的 HTML 文檔。它的構成從三個容器元素開始： <html>， <head> 和 <body>。這三個元素共同描述了頁面的基本結構：
<html> … </html>
此元素將網頁中的所有內容包裹起來，表明此一 HTML 文件是由 <html> 標籤開始至 </html> 結束。
<head> … </head>
由<head> 標籤至 </head> 定義了網頁的頁首 (head) 部份。此元素包括了與網頁本身有關的各種信息，譬如網頁的描述、關鍵字、及標題 (title)。
同時，它也可能包括有關此一網頁如何連結外部的級聯樣式表 (Cascading Style Sheets, CSS) 和 JavaScript 程序的信息。
<body> … </body>
由 <body> 標籤至 </body> 定義了網頁的本體 (body) 部份。此元素包含了您網頁的實際內容。
HTML 在近年來經歷了多次的修訂，HTML5 是最新版本的標準。各個網頁瀏覽器也都根據 HTML5 的標準而趨於功能一致化。因此，雖然並非必須，但是根據最新版本 HTML5 所編寫的網頁文件，
大都會在最開頭 ( <html>標籤之前) 加入這樣的宣示：
<！DOCTYPE html>
以告知網頁瀏覽器應根據最新的標準解讀此一 HTML 文件。
恭喜，您已成功地編寫完成了您的第一個 HTML 網頁。下一步，我們就要將此文件命名為 index.html，並將它保存在個人電腦中。這個步驟非常簡單，但需要特別注意：
因為我們要確保文件名的末尾包含擴展名 (file extension) .html 或 .htm ，以使其能被電腦的作業系統識別為 HTML 文檔。( .htm 和 .html 之間沒有區別，
兩者均表示文件為包含 HTML 內容的文本文件。)
在記事本的選項欄中選擇 “文件” (File) → “保存” (Save)。這將打開 “另存為” (Save As) 窗口，在此您可以選擇所希望保存文件的位置，並輸入文件的基本信息。
如果不確定要將文件存儲在何處，為方便起見，您可以立即將其保存在桌面上。之後，您應在 “另存為類型” (Save as type) 框中選擇 “所有文檔 （*.*）” (All Files)，
而非原本默認的 “文本文檔 （*.txt）” (Text Documents)。否則，即使您在檔案名稱欄中鍵入 index.html，該檔案仍會被自動加上默認的 .txt 擴展名，而被儲存為
index.html.txt。
另外，您應確認文字編輯器的文件編碼 (encoding) 設定為 UTF-8 格式。在記事本中，此一選項在 “另存為” 窗口的底部。即使不作此設定，您的網頁也可以正常運行。
但是，作這樣的編碼設定，可以確保您在網頁中使用特殊字符或其他語言時不會遇到問題。
全部設定好後，在 “另存為” 窗口中單擊 “保存” (Save) 以存儲文件。
至此，您可在瀏覽器中打開這個 index.html 文檔案以查看成果，雖然現在仍只是一個一無所有的空白網頁。如果您的文件正確地使用了擴展名 .html 或 .htm，打開頁面
就像雙擊打開其他類型的檔案一樣容易。或者，您也可以將網頁文件檔拖放到打開的瀏覽器窗口中。
瀏覽器的地址欄顯示當前網頁的實際位置。 如果您在地址欄中看到 “ http://...”，則表示它來自 Internet 上的某個網站服務器。但如果是查看位於您自己電腦上的網頁，
則如上圖所示，只會看到一個普通的本地文件地址。
擴充內容
有了基本骨架之後，您就可以開始編寫網頁的內容部分了。最先要加入到文件中的，當然是網頁的標題。每個網頁其實都需要一個 <title> 元素，這個元素應置於網頁文件的頁首部分
( <head> 與 </head> 之間)。所以，舉例說，您可以為您的網頁增添這樣一個標題:
網頁瀏覽器會在瀏覽器標籤 (tab) 或瀏覽器窗口的頂部顯示網頁的標題 (標題如果太長則不一定能全部被顯示)。加入標題後，請用記事本 "重新保存" (Save) 這個修改過的文件，
然後刷新 (refresh) 瀏覽器，您就可以看到新增的標題顯示在頁面上。
接下來，我們可以在網頁的本體部分( <body> 與 </body> 之間)添加一些內容。
首先，我們可以為正在編寫的網頁內容加入一個標題 (出於演示目的，我們將添加兩行標題：一行中文，一行英文)：
<h1>宜蘭抹茶山</h1>
<h2 style=”color: blue;”>Matcha Mountain, Yilan</h2>
|
<h1> (以及 <h2>, <b>, … <h6>, 字體由大至小) 適用於設立單行粗體字標題。顏色及字型可使用樣式屬性 (style attribute) 設定。
之後，可以用 <p> 加入文字段落 (paragraph)元素：
<p>宜蘭抹茶山 - 聖母登山步道，起點為台灣宜蘭縣礁溪鄉五峰旗瀑布風景區，終點為觀景平台。途經天主堂、涼亭、景觀平台及聖母山莊，並為通往三角崙山的中繼站，
由林務局轄管。</p>
<p>Yilan Matcha Mountain-Our Lady's Mountaineering Trail starts at Wufengqi Waterfall Scenic Area in Jiaoxi Township, Yilan County,
Taiwan and ends at the Viewing Platform. It passes through the Catholic Church, the pavilion, the landscape platform and the Virgin
Mountain Villa, and it is a relay station to the Sanlang Mountain. It is under the jurisdiction of the Forestry Bureau.</p>
|
<p> 是一個通用的文本容器元素。瀏覽器不會自動縮進 (indent) 段落內的首行文字，但會在段落與段落之間添加一個空行以保持分隔。
在這兩段文字中，如果要強調 ”抹茶山” (Matcha Mountain)，則可以使用 <b> 元素將它設為粗體：
<p>宜蘭<b>抹茶山</b> - 聖母登山步道 ...
<p>Yilan <b>Matcha Mountain</b>-Our Lady's Mountaineering Trail …
|
大多數 HTML 的元素標籤，例如以上提到的 <p> ... </p> 和 <b> ... </b>，都是成對出現。使用開始標記（如 <b> ）時，必須同時使用匹配的結束標記（ </b> ）。
開始標記和結束標記的組合加上中間的文本構成了一個 HTML 元素。這是一個基本概念：一對標籤可創建一個容器，而 您將內容（如文本）放入該容器中。例如，當您使用 <b> 和 </b>
標記時，您創建了一個以粗體格式應用於該容器內文本的容器。創建網頁時，您將使用不同的容器來包裝不同的文本。如果您以這種方式考慮元素，將永遠不會忘記添加結束標記。
當您更多了解元素以後，您會發現元素實際上有兩種類型：除了常見的容器元素類型外，第二種是稱為獨立元素的類型。它們不會開啟或關閉某種格式，而只是在頁面中插入諸如圖像之類的物件。
一個示例是 <br> 元素，該元素在網頁中插入一個換行符。獨立元素不會像容器元素那樣成對出現，因此它們也被稱為空元素，因為您無法在其中放置任何文本。
我們現在可以試著在前面的文字段落中加入 <br>，以強迫在該處斷句：
... 終點為觀景平台。<br>途經天主堂 ...
... and ends at the Viewing Platform. <br>It passes through ...
|
有時我們或許會想在網頁中加入一條分隔線，以區隔不同部分的內容。這時，可以使用獨立元素 <hr>：
在這個例子中，我們用 <hr> 劃出一條橫線，並且將它的寬度 (width) 屬性設為 60%。這個寬度屬性可以設為瀏覽器窗口寬度的若干百分比
(例如 60%)，也可以設定為若干畫素 (pixels, 例如 600px)。
在網頁中自然也少不了會使用圖片。 <img> 元素可以讓我們將圖片 (image) 加入到網頁的任何位置，並且可通過設定它的屬性來指明圖片的大小：
<img src=”matcha_mountain.jpg” width=”640px” height=”320px”>
|
最後，也許我們會想把網頁的所有內容向中間對齊，這時我們不妨用 <center> ... </center> 標籤，把這個網頁中的內容都包裹起來，
讓網頁中所有的元素都居中對齊:
<body>
<center>
…
</center>
</body>
|
<center> ... </center> 其實是 HTML 中已經過時的元素，它是屬於 HTML4 之前的標準。在 HTML5 的新標準中，則鼓勵使用級聯樣式表 (CSS) 的屬性
(如 text-align、 margin-left 和 margin-right 等) 進行各自元素的對齊。
至此，我們已經完成了一個雖然簡單但包含較多內容的網頁。下圖顯示該網頁在文本編輯器中的原始文件全部內容:
最後，要解釋一下如何使用文字編輯器(記事本)編輯已有的 HTML 文件。
當完成編輯一個 HTML 文件後，當然我們會將其儲存至電腦，然後關閉文字編輯器。但是要如何重新打開這個 HTML 文件，做更多的編輯或修改呢?因為網頁文件使用 .html 擴展名，
而 .html 則是被默認為與瀏覽器連結。所以，雙擊一個網頁文件的檔名，將會自動啟動瀏覽器而將該網頁顯示其中，而非由記事本將文件打開。所以，要打開一個 HTML 文檔時，
需啟動文字編輯器，選擇 “文件” → “打開”，然後選擇所需的文件，或是將文件檔拖放到已經打開的文字編輯器窗口中。
另外還有一個技巧，可以幫助您快速打開 HTML 文件。先找到您的文件檔，然後右鍵單擊它，選擇 “打開方式” (Open with)。這會彈出一個可用於打開文件的程序列表，
單擊列表中的記事本就可以啟動一個新的文字編輯器窗口，並打開該 HTML 文件。
如果您在文字編輯器中編輯 HTML 文件時，讓網頁瀏覽器窗口保持打開狀態，則瀏覽器所顯示的網頁乃是原先儲存的版本，而它並不會自動與您現在所編輯的文件同步。
如果要查看最新的更改，您需要再次保存文件（選擇 “文件” → “保存”），然後在瀏覽器中刷新 (refresh) 頁面。
在學習 HTML 語言時，您必然會在文字編輯器中進行大量的實驗，因此您需要完全習慣在電腦上打開和編輯 HTML 文件，以及刷新瀏覽器以查看成果。
|
|
(gif).gif)