本節書摘來自異步社群《adobe dreamweaver cs6中文版經典教程》一書中的第2 章，第2.3節，作者：【美】adobe公司 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
編寫代碼的思想聽起來可能很困難，但是建立網頁實際上要比你所想的容易得多。在下面幾個練習中，你将通過建立一個基本的網頁以及添加并格式化一些簡單的文本内容，來學習html的工作方式。
注意：
你可以自由地在練習中使用任意文本編輯器，但是一定要将檔案儲存為純文字檔案。
1．啟動“記事本”（windows）或textedit（mac）。
2．在空白文檔視窗中輸入以下代碼：
3． 把檔案儲存到桌面，并把它命名為firstpage.html。
提示：
在textedit中，在可以把檔案另存為.html之前，可能需要選擇format > format as plain text。
一些文本編輯器可能嘗試更改.html擴充名，或者提示你确認所做的選擇。
4． 啟動chrome、internet explorer、safari、firefox或者安裝的其他web浏覽器。
5． 選擇“檔案”>“打開”。導航到桌面并選擇firstpage.html，然後單擊“确定”/“打開”按鈕。
恭喜，你剛才建立了第一個網頁，如圖2.2所示。建立一個有用的網頁并不需要太多的代碼。
2.3.1 了解html文法
通過向新的網頁中添加内容，你将學習html代碼文法的一些重要方面。
1．在不關閉浏覽器的情況下切換回文本編輯器。
2．在文本“welcome to my first page”的末尾插入光标，并按下enter/return鍵插入一個段落回車符。
3．輸入“making web pages is fun”，然後按下空格鍵5次，插入5個空格。最後，在同一行上輸入“and easy!”。
4．儲存檔案。
5．切換到浏覽器，并重新整理視窗，加載更新過的頁面，如圖2.3所示。
可以看到，浏覽器顯示的是新文本，但是它忽略了兩行之間的段落回車符以及額外的空格。事實上，你可以在行之間添加數百個段落回車符、在每個單詞之間添加數十個空格，但是浏覽器的顯示将不會有什麼不同。這是由于浏覽器被編寫成忽略額外的空白，并且隻注重html代碼元素。通過在各處插入标簽，可以輕松地建立所需的文本顯示。
2.3.2 插入html代碼
在這個練習中，你将插入html标簽，以生成正确的文本顯示。
1．切換回文本編輯器。
2．給文本添加如下所示的标簽：
為了在一行文本内添加字母間距或其他特殊字元，html提供了稱為實體（entity）的代碼元素。實體以不同于标簽的方式輸入到代碼中。例如，用于插入非間斷空格的方法是輸入實體“& nbsp;”。
實體使用的一個經驗法則是看看是否能用标準的101鍵鍵盤輸入一個字元。如果這個字元無法顯示，那麼你就可能必須使用實體。
利用非間斷空格替換文本中的5個空格，使得文本看上去如下所示：
儲存檔案。切換到浏覽器，并重新加載或重新整理頁面顯示。
浏覽器現在将顯示段落回車符和想要的間距（如圖2.4所示）。
2.3.3 利用html格式化文本
标簽通常服務于多個目的。除了如前面所解釋的那樣建立段落結構和空白之外，它們還可以影響基本的文本格式化效果和辨別頁面内容的相對重要性。例如，html提供了6個标題标簽(< h1 >～< h6 >)，可以使用它們設定與正常段落區分開的标題。在這些被标簽不僅為文本設定不同于段落文本的格式，還有其他含義。标題标簽自動格式化為粗體，相對的尺寸也往往更大。标題的号碼也有作用：< h1 >标簽把标題辨別為具有最進階别的重要性。在這個練習中，你将向第一行添加标題标簽。
2．給文本添加加粗的标簽，如下所示：
注意文本如何變化。它現在的格式将變得更大并且是加粗的，如圖2.5所示。
2.3.4 應用内聯格式化
迄今為止，你使用過的所有标簽都是作為段落或者獨立的元素工作的。這些稱為塊（block）元素。html還提供了對包含在另一個标簽内的内容（或内聯（inline））應用格式化和結構的能力。 聯代碼的典型應用是對某個詞或段落的一部分應用粗體或斜體樣式。在這個練習中，你将應用内聯格式化。
要特别留意标簽的嵌套方式，以便正确地封閉它們。注意< em >标簽是如何在< strong >标簽封閉之前封閉的。
儲存檔案。切換到浏覽器，并重新加載或重新整理頁面顯示，如圖2.6所示。
大多數格式化（包括内聯及其他格式化）都是使用css（cascading style sheet，層疊樣式表）應用的。< strong >和< em >标簽是少數幾種仍然可接受的使用嚴格的html代碼元素應用内聯格式化的方式。從技術上講，這些元素的意圖更多的是為文本内容添加語義含義，但是效果相同：文本仍然預設顯示為粗體或者斜體。行業支援的一種轉變——将内容與其表示（或格式化）分隔開。
2.3.5 添加結構
大多數網頁都具有至少3種基本元素：根（通常是< html >）、主體（< body >）和頭部（< head >）。這些元素建立了網頁的必不可少的底層結構。根元素包含網頁的所有代碼和内容。它用于聲明浏覽器、任何浏覽器應用程式以及期望在頁面内包含什麼類型的代碼元素。< body >元素存放所有的可見内容，比如文本、表格、圖像和影片等。< head >元素存放用于執行至關重要的背景任務的代碼，包括樣式、連結及其他資訊。
你建立的示例頁面沒有< head >元素。網頁可以沒有這個區域，但是如果沒有它，将很難向這個頁面中添加任何進階功能。在這個練習中，你将向網頁中添加< head >和< title >元素。
2．給文本添加加粗的标簽和内容，如下所示。
3．儲存檔案。切換到浏覽器，并重新加載或重新整理頁面顯示。
你注意到什麼變化了嗎？它最初可能不明顯。看看浏覽器視窗的标題欄。語句“html basics for fun and profit”現在魔術般地出現在網頁上方，如圖2.7所示。通過添加< title >元素，你建立了這種顯示。但是，它并不隻是一種很酷的技巧，它對你的業務也是有益的。
google、yahoo及其他搜尋引擎編目了每個頁面的< title >元素并使用它以及其他條件，對網頁進行評級。标題的内容是通常會在搜尋的結果内顯示的項目之一。具有良好标題的頁面可以比具有糟糕标題或者根本沒有标題的頁面得到更高的評級。 一定要保持标題簡短且有意義。例如，“abc首頁”這樣的标題不能真正傳遞有用的資訊。“歡迎來到abc公司的首頁”可能更好。通路其他網站（特别是同行或者競争對手），看看它們是如何确定網頁标題的。
2.3.6 在dreamweaver中編寫html代碼
那麼，一個必然會被問到的問題是“如果我可以在任何文本編輯器中編寫html代碼，為什麼我需要使用dreamweaver呢？”盡管要等到你學完了後面的13課内容之後才能得到完整的答案，但是可以先給該問題一個快速的解釋。在這個練習中，你将使用dreamweaver重新建立相同的網頁。
1．啟動dreamweaver cs6。
2．選擇“檔案”>“建立”。
3．在“建立文檔”視窗中，從第一列中選擇“空白頁”。
4．從“頁面類型”列中選擇“html”，并從“布局”列中選擇“< 無 >”。然後單擊“建立”按鈕。
在dreamweaver中打開新文檔視窗。該視窗可能預設為以下3種顯示之一：“代碼”視圖、“設計”視圖或“拆分”視圖。
5．如果還沒有選擇“代碼”視圖，可以在文檔視窗的左上角單擊“代碼”視圖按鈕，如圖2.8所示。
在“代碼”視圖視窗中，應該注意的第一件事是：與使用文本編輯器相比，dreamweaver的領先優勢巨大。頁面的基本結構已經編寫好了，包括根、頭部和主體，甚至還包括标題标簽等。dreamweaver需要你做的唯一事情是添加内容本身。
6．在< body >開始标簽後面插入光标，并在标簽後面輸入“welcome to my second page”。
dreamweaver可以簡單地把第一行格式化為标題1。
7．把光标移到文本“welcome to my second page”的開始處，輸入“< ”開始< h1 >代碼元素。
注意dreamweaver是怎樣自動打開相容的代碼元素的下拉清單的。這是dreamweaver的代碼提示特性。在激活時，代碼提示提供了可用的html、css和javascript元素的下拉清單。
8． 輸入h，觀察代碼提示視窗，如圖2.9所示。
dreamweaver過濾提示清單，隻顯示以“h”開頭的元素。
9． 從清單中輕按兩下“h1”，在代碼中插入它。然後輸入“>”關閉元素。
10． 把光标移到文本的末尾。在句子末尾輸入“< /”。
注意dreamweaver是怎樣自動關閉< h1 >标簽的。但是大多數編碼員會在編寫代碼時添加标簽，其方式如下。
11． 按下enter/return鍵，插入一個換行符。然後輸入“<”。
12． 輸入“p”，并按下enter/return鍵插入元素。然後輸入“>”關閉元素。
13． 輸入“making webpages in dreamweaver is even more fun!”，然後輸入“< /”關閉< p >元素。
手工編碼還是會使人疲勞吧？dreamweaver提供了多種方式，用于格式化你的内容。
14． 選取單詞“more”。在“屬性”檢查器中，單擊b和i按鈕，對文本應用< strong >和< em >标簽。 這些标簽将對所選文本産生粗體和斜體格式化外觀。
有什麼遺漏嗎？
在第14步中單擊b和i按鈕時，它們遺漏了嗎？在“代碼”視圖中執行更改時，“屬性”檢查器偶爾需要進行重新整理，才可以通路那裡具有的格式化指令。簡單地單擊“重新整理”按鈕，将重新顯示格式化指令，如圖2.10所示。
在新頁面完成之前，隻剩下兩個任務了。注意，dreamweaver建立了< title >元素，并在其中插入了文本“無标題文檔”。你可以在代碼視窗内選取該文本，并輸入一個新标題，或者可以使用另一種内置特性更改它。
15． 找到文檔視窗頂部的“标題”框，并選取“無标題文檔”文本。
16． 在“标題”框中輸入“html basics, page 2”。
17． 按下enter/return鍵完成标題，如圖2.11所示。
“标題”框允許更改< title >元素的内容，而不必在html代碼中工作。
新标題文本将出現在代碼中，并且替換原始内容。現在應該儲存檔案，并在浏覽器中預覽它。
18． 選擇“檔案”>“儲存”。導航到桌面，把檔案命名為“secondpage”。然後單擊“儲存”按鈕。
dreamweaver将自動添加适當的擴充名（.html）。
19． 選擇“檔案”>“在浏覽器中預覽”。
完成的頁面将出現在浏覽器視窗中，如圖2.12所示。
你剛才完成了兩個網頁——一個是用手工完成的，另一個是使用dreamweaver完成的。在這兩種情況下，都可以看到html是怎樣在整個過程中起着中心作用的。