目錄
部分1：建立文檔1、開啟簡單的文字編輯器。2、將檔案儲存爲網頁。3、用網頁瀏覽器開啟檔案。4、更新網頁，檢視已儲存的更改。5、瞭解標籤。6、構建文檔。7、添加head和body標籤。8、取個標題。部分2：格式化文字1、在body部分添加文字。2、添加頁眉。3、學會更多文字格式化標籤。4、排列網頁上的文字。5、添加註解文字。6、將所有標籤整合在一起。部分3：添加連結和圖片1、瞭解特性（attributes）。2、連接到另一個網頁。3、給標籤添加id特性。4、連接到有特定id的元素。5、添加圖片。HTML（超文字標記語言）是建立網頁的基礎語言。這是一種十分簡單、靈活的編碼語言，幾乎所有網頁都由某種形式的代碼構成（例如ColdFusion、XML、XSLT）。HTML很容易學，但要掌握所有功能，則需要很長的時間。想讓網頁更多姿多彩，變得更有趣？學會製作基本HTML頁面後，不妨學習基本的CSS。
1、開啟簡單的文字編輯器。NotePad是不錯的選擇，而且可以免費下載。大部分文字編輯軟件都能編寫HTML，不過，複雜的軟件有自動格式功能，比較難組織HTML頁面。不建議使用TextEdit，它經常將檔案儲存成無法被瀏覽器識別爲HTML的格式。
你也可以用在線HTML編輯器。不建議初學者使用專業的HTML編輯程序。
2、將檔案儲存爲網頁。在上方選單中，選擇 檔案（File），點擊 另存爲（Save As）。將檔案格式改成"網頁"（Web Page）、".html"或".htm"。存在容易找到的位置。上面三個選擇是一樣的，沒有差別。
3、用網頁瀏覽器開啟檔案。雙擊檔案，它應該會自動在瀏覽器開啟，但現在還只是個空白網頁。你也可以先開啟瀏覽器，例如Firefox或Internet Explorer，再從檔案（File）標籤中，點擊開啟檔案（Open File），然後選擇檔案。這個網頁並不在網上，只能在你的電腦上看到。
4、更新網頁，檢視已儲存的更改。將<strong>Hello</strong>輸入空白的檔案。更新瀏覽器上的空白網頁，你應該可以看到網頁上方有個加粗的"Hello"字眼。在本教程中，你隨時可以測試新的HTML。只要儲存.html檔案，然後更新瀏覽器視窗，就能看到瀏覽器如何詮釋HTML。瀏覽器出現"<strong>"和"</strong>"字眼，代表你的檔案並未被正確詮釋爲HTML。換個不同的文字編輯程序或瀏覽器。
5、瞭解標籤。HTML的指示寫在標籤之間，告訴瀏覽器要如何詮釋及呈現網頁。標籤被尖括號<>括起來，網頁上看不到。你在上面的例子中已經用到它們了：<strong>是"首標籤"，或"起始標籤"。寫在這個標籤後的內容被定義爲"重點強調的文字"（通常在網頁上以粗體顯示）。
</strong>是"尾標籤"，或"結束標籤"。尾標籤有多一條斜槓"/"，表示重點強調的文字就此結束。大部分標籤都需要尾標籤，才能起作用，所以別忘了它。
6、構建文檔。刪除HTML文檔裏的所有東西。一字不變地輸入以下文字，重新開始（忽略小圓點）。這個HTML代碼告訴瀏覽器你使用哪一版HTML，網頁所有內容都在<html>和</html>標籤之間。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
</html>
7、添加head和body標籤。HTML文檔分爲2個部分。"Head"部分是特別資訊，例如網頁標題。"Body"部分則包括網頁內容。將這兩個標籤放進文檔，別忘了尾標籤。粗體字爲新添加的文字。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
8、取個標題。對初學者來說，head部分的標籤大多不重要。不過，標題標籤方便使用，而且決定了瀏覽器視窗，或選項卡上顯示的名稱。在head標籤的首標籤和尾標籤之間，寫下你喜歡的標題：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>我的第一個HTML網頁。</title>
</head>
<body>
</body>
</html>
1、在body部分添加文字。在這一部分，我們只輸入body標籤內的內容。文檔裏仍然保留其它文字，不過在本指南中，爲了節省空間，我們不會每次都重複一遍。在<body>和</body>標籤之間隨便寫一些東西，它們會成爲網頁上的首個內容。舉個例子：<body>
我正在按wikiHow指南編寫HTML網頁。
</body>
2、添加頁眉。用頁眉標籤組織網頁內容。瀏覽器會以比較大的字號，顯示頁眉標籤內的文字。搜尋引擎和其它工具也會透過頁眉標籤，確認你的網頁內容及編排。頁眉標籤共有6個，<h1> </h1>最大，<h6> </h6>最小。在你的頁面上試一試：<body>
<h1>歡迎來到我的網頁</h1>
我正在按wikiHow指南編寫HTML網頁。
<h3>我今天的目標：</h3>
<h5>已完成的目標：</h5>
學會用頁眉。
<h5>未完成的目標：</h5>
學會更多文字格式化標籤
</body>
3、學會更多文字格式化標籤。你已經看過<strong>標籤了，但其實還有很多方法可以格式化文字。嘗試不同的標籤，或在相同的文字使用多種標籤。別忘了在文字後面添加尾標籤！<strong>重點強調的文字，在瀏覽器上以粗體顯示。</strong>
<em>強調文字，在瀏覽器上以斜體顯示。</em>
<small>比普通文字小一點。如果用在標題，則會自動縮放。</small>
<del>文字不再適用，以刪除線顯示。</del>
<ins>文檔其餘部分之外的插入文字，以下劃線顯示。</ins>
4、排列網頁上的文字。你可能注意到單靠按回車鍵，並不能分行顯示文字。別擔心，以下標籤能幫助你分段和換行，或是以其它方式排列文字：<p>"paragraph段落"的縮寫，標籤裏的文字爲一個段落，並與之前和之後的文字分離。</p>
<br>換行。由於它並未改變任何內容，所以''不需要''尾標籤。寫詩詞或地址時可以用到，但不能用來分段。
<pre>如果你需要非常精確地呈現文字，那麼這個標籤裏面的文字，將呈現爲等寬字型，並像普通打字那樣空格和換行，不需要使用相關標籤。</pre>
<blockquote>引用自某個資料來源的文字。</blockquote>你可以在後面添加<cite></cite>標籤，描述資料來源。
5、添加註解文字。comment標籤不會出現在網頁上，你可以利用它們，在HTML文檔寫只給自己看的註釋，而不會影響網頁內容。<!---在這裏寫下你的註釋。--->不要添加尾標籤。有的標籤可以單獨存在，不需要尾標籤，被稱爲"空標籤"。
6、將所有標籤整合在一起。想記住這些標籤，最好的方法是在自己的網頁上使用它們。下面的例子使用了你目前學到的所有標籤。試着預測瀏覽器會如何呈現它們，然後複製粘貼到文檔，找出答案。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>我的第一個HTML網頁。</title>
</head>
<body>
<h1>歡迎來到我的網頁。</h1>
希望你喜歡本網站！<p><strong>這是爲你而做的。</strong>
<h2>部分1：我是怎麼HTML的</h2>
<!---給自己的提示：記住"h1"頁眉比"h2"大--->
我已經學了HTML 差不多<del>1</del> <ins>2</ins>個小時，算得上是半個專家了吧。
</body>
</html>
1、瞭解特性（attributes）。你可以在每個標籤裏，寫上詳細資訊。這些資訊被稱爲"特性"，是標籤裏的額外描述資訊，格式爲特性名字="特定值"。任何HTML標籤都可以有個標題特性： <p title="Introduction">在這裏寫一段介紹。</p> 給這個段落取個標題叫"Introduction"，當你把鼠標滑到網頁上的這一段文字時，標題就會出現。
2、連接到另一個網頁。用<a> </a>標籤創建超連結，連接另一個網頁。用href特性插入你要連接的網頁地址。下面的例子連接到你現在閱讀的網頁：<a href="http://127.0.0.1:5366/wangzhi/51dongshi.php?url=http://www.wikihow.com/Write-an-HTML-Page">網站訪客可以點擊這裏的文字，隨着連結進入wikihow網頁。</a>
3、給標籤添加id特性。任何HTML都能用的另一個特性是"id"元素。在任何一個標籤裏，寫下，或輸入沒有空格的名稱。現在，它還沒有明顯的作用，但我們會在下一步用到它。舉個例子，在文檔裏輸入<p >本段落將作爲示例，展示id特性的作用。</p>
4、連接到有特定id的元素。現在，我們可以用超連結標籤<a> </a>，連接到同一網頁的另一個目的地。我們用#符號代替網址，然後輸入要連接的id值。比如說，<a href="http://127.0.0.1:5366/wangzhi/51dongshi.php?url=">這個文字將被連接到id爲 "example"的段落。</a>
如果網頁太短，一次就能顯示全部內容，那麼點擊瀏覽器裏的連結時，可能看不到它的作用。調整視窗大小，直到滾動條出現，然後再試一次。
5、添加圖片。<img>標籤是個空標籤，也就是說不需要尾標籤。用特性添加顯示圖片所需的全部資訊。以下例子將顯示wikiHow的標誌，每個特性後面都有詳細的描述。 <img src="http://pad2.whstatic.com/skins/owl/images/wikihow_logo.png" style="width:324px;" >
src=" " 特性說明圖片的所在位置（一般而言，顯示他人網站上的圖片是無禮的行爲，而且如果有關網站下線了，圖片也會跟着消失）。
特性有很多用途，最重要的還是以像素爲單位，設定圖片的寬度和高度。你也可以分開使用width=" "（寬度），和height=" "（高度）特性。但是，如果你之後用CSS，圖片大小會變得很奇怪。)
特性是圖片的簡要描述，如果圖片加載失敗，用戶就會看到這行替代文字。它被視爲必要的資訊，因爲盲人正是靠屏幕閱讀器，讀出這些資訊，來了解圖片內容。
趣知科普吧
