Download presentation
Presentation is loading. Please wait.
1
4-1 甚麼是HTML 當我們瀏覽網路中的網頁時，可曾想過這個文件是怎麼做出來的呢？當你要打報告多半透過Word來完成，簡報則有PowerPoint等簡報軟體來處理，而網頁也有網頁編輯軟體來協助你完成網頁。當你透過網頁編輯軟體(本書使用的是Dreamweaver)開啟一個常見的網頁文件時，會發現當你切換到程式模式時，會看到一堆的英文和數字，這些文字就是網頁的原始檔，也就是HTML程式碼。
2
文件格式的統一 隨著輸入文字的不同，每個標籤都有各自代表的意義，插入表格、設定文字的大小、色彩等，透過標籤的輸入一一設定各種效果，透過瀏覽器軟體就可以顯示這些效果。這時產生了第一個問題，當不同系統的文件格式不統一時，資料是無法進行互換的，因為自己的文件資料只能在自己的系統中被辨識。
3
製作HTML的工具 當你要製作HTML文件時，最簡單的方式就是開啟記事本，輸入HTML程式碼之後，將檔案加以儲存，並將檔案的副檔名設定為.HTM或.HTML，就可以完成一個HTML文件。這樣的方式雖然簡單，但對初學者而言也是最痛苦的方式，因為你必須獨力輸入所有的標籤、語法，萬一有打錯的地方也得自己慢慢的找出來，實在不太好用。
4
文件內容和實際瀏覽的差異 當你透過Dreamweaver等網頁編輯軟體來製作HTML文件的另一個好處，就是可以無須儲存HTML文件就可直接開啟Internet Explorer來檢視網頁內容。所有的HTML文件在編輯之後都必須透過瀏覽器軟體來開啟，才能呈現最後完成的結果。網頁編輯軟體的所看即所得功能雖說可以瀏覽，但還是有部份的效果特別是涉及程式的部份是無法呈現的。
5
為甚麼需要學HTML而非網頁編輯軟體 目前多數人學習網頁時都直接從網頁編輯軟體開始，而不再學習HTML程式，畢竟程式和應用軟體比起來相對難度較高。不過筆者會建議多數人還是必須具備基本HTML程式的能力，即使是初學者也得要大略看懂常見HTML標籤所代表的意義，主要考量的原因有二。
6
HTML是不少程式的基礎 對有志於網頁設計或想製作出漂亮網頁的人，除了網頁編輯軟體、影像編輯軟體外，動畫軟體如Flash更是必備工具。要製作出漂亮的Flash動畫也得熟悉Flash Active Script程式。若不想利用動畫軟體，那DHTML、Java Script等程式，也可以完成特效功能。
7
部份網頁特效還需要利用程式 對不少網頁初學者而言，直接套用現成的Java Script或Java Applet特效是最方便的，要套用這些特效，就是要把程式碼加到自己的網頁中，不過特效程式碼加入後往往還需要修改，這對不懂HTML的人當然困難不少。
8
使用HTML的優點 對初學者而言，學習HTML標籤會較清楚網頁的架構。 輸入程式碼後可以馬上瀏覽到文件內容，建立程式設計的觀念。
當您想學習Java Script或其他網頁程式時，必須以HTML作為起步。
9
使用HTML的缺點 不少網頁編輯軟體開啟HTML文件時，會自行修改程式的內容，加上自己的標籤，而增加修改的時間。
在圖形的大小控制上較為複雜。 在製作複雜的網頁時，HTML程式也會變的相對複雜，您必須不斷的輸入相對應的標籤，輸入時容易發生錯誤。
10
4-2 如何製作並開啟HTML文件 HTML是用來撰寫網頁的程式語言，這個網頁程式語言和其他程式語言相比，不論語法和格式都有所不同。HTML程式是純文字組成，所以您可以直接使用記事本等純文字編輯工具來撰寫HTML程式，只要透過網頁瀏覽，就可以顯示正確的內容。
11
HTML的觀念 雖然目前很多網頁編輯程式都是所見即所得，不需要了解HTML就可以製作網頁，不過當您要加入Java程式或其他特效時，還是需要編輯HTML。所以先透過本篇建立HTML的觀念並認識HTML的語法，對日後製作網頁也會有所幫助。
12
認識HTML的語法 HTML的程式語法相當簡單，透過標籤和屬性來定義網頁的內容，就可以完成不同的網頁效果。標籤的名稱都是英文，不過大小寫並沒有差異，不論你輸入的是大寫的英文或是小寫，其效果都是一樣的。
13
標籤 HTML的標籤是以『<』、『>』這兩個符號括起來，以代表標籤，標籤多半是成對出現，也就是對應，例如當定義網頁內容時，會先加上標籤<body>，而定義完內容後的最後一行，就是結束的標籤</body>。HTML的標籤隨著使用方式的不同，而為前後對應和孤立標籤二類。
14
屬性 屬性主要用來定義程式碼的相關樣式，HTML的標籤所能描述的特性有限，例如當我們要將上一行文字設定字體為藍色、置中對齊，這後者就得靠屬性來定義。當您要在標籤名稱後加入多個屬性時，請注意屬性和屬性之間必須使用一個或多個空白來加以分隔，屬性的排列前後並不重要，因為並不影響文件的顯示。
15
程式碼的使用 你可以直接在Dreamweaver中輸入程式，或利用記事本來輸入程式再貼到網頁編輯軟體中，但若使用Word等文書編輯軟體來輸入HTML程式，請不要直接貼上。因為會將Word的格式設定一併貼入網頁中。
16
值 如同標籤會有起始標籤和結束標籤，屬性也會有其對應的值，而且這個值必須要從定義好的內容來設定，而無法自己輸入，您自行輸入的值屬性是無法辨識的。例如上面程式當我們要指定對齊方式(屬性為Align)，對齊方式只有靠左、靠右和置中三種，所以值也只有Left、Center、Right三種。
17
巢狀標籤 當需要定義的資料較多時，需要不只一個以上的標籤來定義樣式時，就會用到巢狀標籤，也就是在標籤中還有標籤。在前面我們利用屬性和值設定了文字的顏色和對齊方式，底下再將文字設為標題1、並將字體設定為斜體效果。就需要加上<h1>標題1的標籤、<i>斜體的標籤，程式如下。 <h1 align="center"><i><font color="#0000FF">將文字放大再加上斜體效果</font></i></h1>
18
空白與特殊字元 在輸入程式碼時，另一個需要注意的就是空白字元，在標籤的值和屬性中間，就必須加上空白字元來分隔。此外，為了讓程式碼容易閱讀，也有些人習慣在程式前面加上空白字元，這些空白字元並不會影響網頁的版面。
19
HTML 標籤範例 當您開啟一份HTML網頁時，除了最前面的版本宣告之外，程式法應該會分別放在底下這些標籤中。HTML 基本上是由多種不同的標籤所組成，整個文件包含在 <HTML> </HTML> 標籤裡，在 <HEAD> </HEAD> 標籤裡主要是放一些網頁的相關資訊，如標題等等，而網頁的內容全部都放在 <BODY> </BODY>裡，關於這些標籤的意義後續會說明，先來看看文件的架構。
20
<HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>
21
4-3 最簡單的HTML文件 從本節開始，來介紹如何編輯HTML文件，筆者會從最常見的基本標籤加以說明，從認識HTML的基本架構，來熟悉HTML文件。在上個範例中介紹了四個HTML文件中最基本的標籤，透過這幾個標籤來區隔HTML文件的內容，底下先來看看這幾個標籤的應用。部份人再撰寫HTML文件時，常習慣省略部份的基本標籤，這樣頗容易讓瀏覽器誤判而產生網頁錯誤，筆者建議大家還是養成使用的習慣。
22
HTML的整體架構 HTML的整體架構可以將程式分為三部分，分別是HTML版本宣告、標題宣告和文件內容。讓我們來看看底下的程式，配合加以說明。
23
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <title>網頁範例</title> </head> <body> HTML測試網頁 </body> </html>
24
HTML的版權宣告 如果您使用FrontPage或Dreamweaver 來編輯HTML程式，會發現版本宣告的內容不太相同，這是因為軟體會加入了自己的版本宣告，表示這是使用HTML來編輯。
25
撰寫HTML注意事項 在說明標籤之前，先來說明HTML文件的基本原則及觀念，就算您搞不清楚HTML文件如何編寫，也得學習看懂文件的內容。每個網頁的開頭都是以<HTML>標籤起頭，</HTML>標籤結束，所以網頁的內容都包含在這二個標籤中。
26
<HTML>..</HTML>標籤
<HTML>標籤是用來識別這是屬於HTML文件的標籤，不過實際上當您宣告的HTML版本後，這個標籤的用途並不大。<HTML>標籤是HTML架構中最外側的標籤，其他標題、文件主題等內容，都涵括在<HTML>…</HTML>標籤中。<HTML>放在文件的開頭而</HTML>則在文件的最末。
27
<HEAD>..</HEAD>標籤
<HEAD></HEAD>標籤中主要是放置文件的整體資訊，像文件的標題、定義文件的樣式，若網頁有加入Script多半也是將程式碼放置在其中。一份HTML文件可區隔為文件的資訊和文件的本文兩部份，文件的資訊如文件標題就在<HEAD></HEAD>標籤中定義，而文件的本文內容則是透過<BODY>標籤來定義。
28
<TITLE>..</TITLE>標籤
<TITLE></TITLE>標籤用來指定文件的標題，也就是瀏覽器標題列的文件。<TITLE></TITLE>標籤一定是包含在<HEAD></HEAD>標籤中。這也是HTML文件中少不了的內容。這裡所說的標題並非網頁內容的標題，而是顯示在網頁視窗的標題欄中。 若你沒有在文件中輸入網頁標題就存檔，那網頁編輯軟體會以預設的文件名稱作為標題，若是純文字文件，那文件的路徑會作為文件的標題。
29
<BODY>..</BODY>標籤
<BODY></BODY>標籤用來顯示文件的內容，像網頁背景、顏色、圖片等都在再此設定，幾乎所有文件內容的樣式都是在<BODY></BODY>標籤中。當然這個標籤一定得成對出現。
30
如何使用Dreamweaver編輯HTML文件
對初學者而言，使用記事本來編輯HTML文件並不方便，因為無法馬上看到結果，萬一程式碼出現錯誤，也必須一一重新檢查。這時，您可以利用網頁編輯軟體來編輯HTML文件，本書會以Dreamweaver來輸入程式。當您啟動Dreamweaver並開啟新文件後，切換到分割檢視，就可以在視窗的上面輸入程式碼，而下方可以直接預覽文件內容。
31
4-4 基本的文字編輯 認識HTML的基本標籤和架構之後，底下開始透過實際的範例來輸入網頁的文字。文字可說是網頁的必要內容，您得輸入想說明的東西才能讓瀏覽網頁的人知道您想表達些甚麼。前面的實作範例中，完成了第一個簡單的網頁，你可以直接輸入文字。有不少人會先利用文書編輯軟體或是記事本將文字打好，A貼入網頁中。但這時就會發現問題了。
32
基本的文字格式 筆者在光碟中準備了一個純文字檔，文字檔中共有三段的文字，請先複製第一段文字到網頁中，來了解當你貼入文字時容易產生的問題。下圖是筆者選取記事本中的文字，並取消記事本中的『自動換行功能』。
33
文字的段落與換行 底下來看看要如何設定文字的段落，這可說是最基本的格式設定。畢竟文字必須要分段才會清楚。在文書處理軟體中，會自動處理文字的段落，而在網頁文字就得透過段落標籤。
34
瀏覽器忽略的內容 當您在撰寫HTML文件時，有些標籤或其他訊息瀏覽器並不會顯示而加以忽略，例如前面介紹空白，就如同撰寫程式時需要加上註解一般，當您撰寫HTML時，也可以利用這些標籤來輔以說明，讓您的程式碼更容易被閱讀。
35
4-5 將首頁上傳到Web伺服器 完成了HTML文件只有自己可以看到當然不滿意，要想大家都看到你設計的網頁，必須要將網頁上傳到Web伺服器中，輸入正確的網址才能瀏覽網頁。多數Web伺服器預設首頁的名稱為『index.htm』或『index.html』。
36
首頁的名稱 多數伺服器的首頁名稱為index，但也有部份伺服器會將名稱設定為default.htm或default.asp等，隨著作業系統的不同而有所差異，所以當你要將檔案上傳到伺服器時得先看清楚首頁的規範，這樣上傳的網頁才能順利讀取。
37
透過哪些方式可以上傳檔案 要將檔案上傳到Web伺服器的方法很多，只是每個Web伺服器所支援的上傳方式都不同，所以得先搞清楚你所要上傳的網頁空間支援哪些服務。 透過FTP上傳：網頁空間提供了FTP的方法來進行上傳，你可以使用瀏覽器或是FTP軟體或是網頁編輯軟體如Dreamweaver來進行上傳。 Web上傳：透過網頁直接上傳。
Similar presentations
