如何編寫HTML頁面

來源：酷知科普網 1.67W

HTML（超文字標記語言）是建立網頁的基礎語言。這是一種十分簡單、靈活的編碼語言，幾乎所有網頁都由某種形式的程式碼構成（例如ColdFusion、XML、XSLT）。HTML很容易學，但要掌握所有功能，則需要很長的時間。想讓網頁更多姿多彩，變得更有趣？學會製作基本HTML頁面後，不妨學習基本的CSS。

建立文件

（01）開啟簡單的文字編輯器。NotePad是不錯的選擇，而且可以免費下載。大部分文字編輯軟體都能編寫HTML，不過，複雜的軟體有自動格式功能，比較難組織HTML頁面。不建議使用TextEdit，它經常將檔案儲存成無法被瀏覽器識別為HTML的格式。你也可以用線上HTML編輯器。不建議初學者使用專業的HTML編輯程式。

（02）將檔案儲存為網頁。在上方選單中，選擇檔案（File），點選另存為（Save As）。將檔案格式改成“網頁”（Web Page）、“”或“”。存在容易找到的位置。上面三個選擇是一樣的，沒有差別。

（03）用網頁瀏覽器開啟檔案。雙擊檔案，它應該會自動在瀏覽器開啟，但現在還只是個空白網頁。你也可以先開啟瀏覽器，例如Firefox或Internet Explorer，再從檔案（File）標籤中，點選開啟檔案（Open File），然後選擇檔案。這個網頁並不在網上，只能在你的電腦上看到。

（04）更新網頁，檢視已儲存的更改。將<strong>Hello</strong>輸入空白的檔案。更新瀏覽器上的空白網頁，你應該可以看到網頁上方有個加粗的“Hello”字眼。在本教程中，你隨時可以測試新的HTML。只要儲存檔案，然後更新瀏覽器視窗，就能看到瀏覽器如何詮釋HTML。瀏覽器出現“<strong>”和“</strong>”字眼，代表你的檔案並未被正確詮釋為HTML。換個不同的文字編輯程式或瀏覽器。

（05）瞭解標籤。HTML的指示寫在標籤之間，告訴瀏覽器要如何詮釋及呈現網頁。標籤被尖括號<>括起來，網頁上看不到。你在上面的例子中已經用到它們了：<strong>是“首標籤”，或“起始標籤”。寫在這個標籤後的內容被定義為“重點強調的文字”（通常在網頁上以粗體顯示）。</strong>是“尾標籤”，或“結束標籤”。尾標籤有多一條斜槓“/”，表示重點強調的文字就此結束。大部分標籤都需要尾標籤，才能起作用，所以別忘了它。

（06）構建文件。刪除HTML文件裡的所有東西。一字不變地輸入以下文字，重新開始（忽略小圓點）。這個HTML程式碼告訴瀏覽器你使用哪一版HTML，網頁所有內容都在<html>和</html>標籤之間。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""><html></html>

（07）新增head和body標籤。HTML文件分為2個部分。“Head”部分是特別資訊，例如網頁標題。“Body”部分則包括網頁內容。將這兩個標籤放進文件，別忘了尾標籤。粗體字為新新增的文字。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""><html><head></head><body></body></html>

（08）取個標題。對初學者來說，head部分的標籤大多不重要。不過，標題標籤方便使用，而且決定了瀏覽器視窗，或選項卡上顯示的名稱。在head標籤的首標籤和尾標籤之間，寫下你喜歡的標題：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""><html><head><title>我的第一個HTML網頁。</title></head><body></body></html>

格式化文字

（01）在body部分新增文字。在這一部分，我們只輸入body標籤內的內容。文件裡仍然保留其它文字，不過在本指南中，為了節省空間，我們不會每次都重複一遍。在<body>和</body>標籤之間隨便寫一些東西，它們會成為網頁上的首個內容。舉個例子：<body>我正在按wikiHow指南編寫HTML網頁。</body>

（02）新增頁首。用頁首標籤組織網頁內容。瀏覽器會以比較大的字號，顯示頁首標籤內的文字。搜尋引擎和其它工具也會透過頁首標籤，確認你的網頁內容及編排。頁首標籤共有6個，<h1> </h1>最大，<h6> </h6>最小。在你的頁面上試一試：<body><h1>歡迎來到我的網頁</h1>我正在按wikiHow指南編寫HTML網頁。<h3>我今天的目標：</h3><h5>已完成的目標：</h5>學會用頁首。<h5>未完成的目標：</h5>學會更多文字格式化標籤</body>

（03）學會更多文字格式化標籤。你已經看過<strong>標籤了，但其實還有很多方法可以格式化文字。嘗試不同的標籤，或在相同的文字使用多種標籤。別忘了在文字後面新增尾標籤！<strong>重點強調的文字，在瀏覽器上以粗體顯示。</strong><em>強調文字，在瀏覽器上以斜體顯示。</em><small>比普通文字小一點。如果用在標題，則會自動縮放。</small><del>文字不再適用，以刪除線顯示。</del><ins>文件其餘部分之外的插入文字，以下劃線顯示。</ins>

（04）排列網頁上的文字。你可能注意到單靠按回車鍵，並不能分行顯示文字。別擔心，以下標籤能幫助你分段和換行，或是以其它方式排列文字：<p>“paragraph段落”的縮寫，標籤裡的文字為一個段落，並與之前和之後的文字分離。</p><br>換行。由於它並未改變任何內容，所以''不需要''尾標籤。寫詩詞或地址時可以用到，但不能用來分段。<pre>如果你需要非常精確地呈現文字，那麼這個標籤裡面的文字，將呈現為等寬字型，並像普通打字那樣空格和換行，不需要使用相關標籤。</pre><blockquote>引用自某個資料來源的文字。</blockquote>你可以在後面新增<cite></cite>標籤，描述資料來源。

（05）添加註解文字。comment標籤不會出現在網頁上，你可以利用它們，在HTML文件寫只給自己看的註釋，而不會影響網頁內容。不要新增尾標籤。有的標籤可以單獨存在，不需要尾標籤，被稱為“空標籤”。

（06）將所有標籤整合在一起。想記住這些標籤，最好的方法是在自己的網頁上使用它們。下面的例子使用了你目前學到的所有標籤。試著預測瀏覽器會如何呈現它們，然後複製貼上到文件，找出答案。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""><html><head><title>我的第一個HTML網頁。</title></head><body><h1>歡迎來到我的網頁。</h1>希望你喜歡本網站！<p><strong>這是為你而做的。</strong><h2>部分1：我是怎麼HTML的</h2>我已經學了HTML 差不多<del>1</del> <ins>2</ins>個小時，算得上是半個專家了吧。</body></html>

新增連結和圖片

（01）瞭解特性（attributes）。你可以在每個標籤裡，寫上詳細資訊。這些資訊被稱為“特性”，是標籤裡的額外描述資訊，格式為特性名字="特定值"。任何HTML標籤都可以有個標題特性：<p title="Introduction">在這裡寫一段介紹。</p>給這個段落取個標題叫“Introduction”，當你把滑鼠滑到網頁上的這一段文字時，標題就會出現。

（02）連線到另一個網頁。用<a> </a>標籤建立超連結，連線另一個網頁。用href特性插入你要連線的網頁地址。下面的例子連線到你現在閱讀的網頁：<a href="">網站訪客可以點選這裡的文字，隨著連結進入wikihow網頁。</a>

（03）給標籤新增id特性。任何HTML都能用的另一個特性是“id”元素。在任何一個標籤裡，寫下id="example"，或輸入沒有空格的名稱。現在，它還沒有明顯的作用，但我們會在下一步用到它。舉個例子，在文件裡輸入<p id="example">本段落將作為示例，展示id特性的作用。</p>

（04）連線到有特定id的元素。現在，我們可以用超連結標籤<a> </a>，連線到同一網頁的另一個目的地。我們用#符號代替網址，然後輸入要連線的id值。比如說，<a href="#example">這個文字將被連線到id為 "example"的段落。</a>所有HTML值都不分大小寫。不管是"#EXAMPLE"，還是"#example"，都會連線到同一個目的地。如果網頁太短，一次就能顯示全部內容，那麼點選瀏覽器裡的連結時，可能看不到它的作用。調整視窗大小，直到滾動條出現，然後再試一次。

（05）新增圖片。<img>標籤是個空標籤，也就是說不需要尾標籤。用特性新增顯示圖片所需的全部資訊。以下例子將顯示wikiHow的標誌，每個特性後面都有詳細的描述。<img src="http://pad2.whstatic.com/skins/owl/images/wikihow_logo.png" style="width:324px; height:84px" alt="wikiHow logo">src=" "特性說明圖片的所在位置（一般而言，顯示他人網站上的圖片是無禮的行為，而且如果有關網站下線了，圖片也會跟著消失）。style=" "特性有很多用途，最重要的還是以畫素為單位，設定圖片的寬度和高度。你也可以分開使用width=" "（寬度），和height=" "（高度）特性。但是，如果你之後用CSS，圖片大小會變得很奇怪。)alt=" "特性是圖片的簡要描述，如果圖片載入失敗，使用者就會看到這行替代文字。它被視為必要的資訊，因為盲人正是靠螢幕閱讀器，讀出這些資訊，來了解圖片內容。

瞭解更多並把網頁放上網

（01）驗證HTML。驗證HTML，檢查程式碼是否有錯誤。瀏覽器不能正確顯示網頁？進行驗證可以幫你找出有問題的錯誤。它也能識別出能正確顯示，但因為HTML規範更新而不建議使用的程式碼，使你更瞭解HTML。雖然過時的HTML也能用，但用不同瀏覽器顯示時，網頁可能不一致或有問題。嘗試W3C的免費線上驗證服務，或是在網上搜索其它的HTML 5驗證器。

（02）瞭解更多標籤和特性。HTML標籤和特性還有很多，如果你有興趣，可以在許多地方學習：W3schools（中英文）和HTML Dog（英文）有更多教程，和更完整的標籤列表。尋找你喜歡的網頁，用瀏覽器的“檢視頁面原始碼”（View Page Source）功能，自己看一看它們的HTML程式碼。把它複製貼上到你的文件，自己修改及測試，看看它們的作用。閱讀其它相關的網路文章。

（03）把網頁放上網。只要選擇一個網站託管服務，想上傳多少HTML頁面到個人網域都可以。你首先需要使用FTP上傳軟體。許多網站主機均有提供這項服務。連線自己網站上的網頁或圖片時，不需要使用完整的網址。舉個例子，如果你的域名是，輸入<a href="/journal/">文字</a>，就能連線到""。

（04）用CSS新增樣式。HTML頁面看起來有點簡單？不妨學一些基本的CSS，新增顏色、不同的字型，及更好地控制元素排列。將CSS的“stylesheet”連線到HTML頁面，這樣就能快速做出大改變，在一個特定標籤內，就能自動調整所有文字樣式。你可以用Notepad建立簡單的CSS樣式表，HTML Dog和W3schools也有提供更詳細的教程。

（05）新增JavaScript。JavaScript是給HTML頁面新增更多功能的程式語言。用<script> </script>標籤插入JavaScript命令，可以新增互動按鈕、計算數學題等。想了解更多，不妨參閱w3c的示例。

你需要準備

（01）簡單的文字編輯器，例如NotePad或TextEdit網頁瀏覽器，例如Internet Explorer或Mozilla Firefox（選擇性）HTML編輯器，例如Adobe Dreamweaver、Aptana Studio或Microsoft Expression Web

特別提示

本教程用的doctype是“loose HTML 4.0.1過渡模式”，這個簡單格式適合初學者使用。如果你希望瀏覽器把它詮釋為HTML 5嚴格模式，那就換成<!DOCTYPE html>。這是目前推薦的規範，但比較少人使用。

HTML意在用通用格式儲存內容。它不能控制網頁的呈現方式，像是背景顏色和元素的確切排列方式。雖然HTML也有相關標籤，可以控制網頁樣式，但還是強烈建議你用CSS，建立可控性更好、更一致的網頁。

HTML 頁面編寫