Download presentation
Presentation is loading. Please wait.
1
第 1 章 認識HTML
2
本章提要 1-1 什麼是 HTML 1-2 如何製作 HTML 文件 1-3 HTML 網頁與瀏覽器 1-4 HTML 的結構
3
1-1 什麼是 HTML 逛遍網路上形形色色的網頁, 有的是令人目眩神迷、唱作俱佳的多媒體網頁；有的是內容豐富別具特色的部落格；有的則是功能齊全、不出門就能 Shopping 的購物網站；不論是哪一種網頁, 都是以 HTML 為基礎建構而成的。 不論您是想架設自己的部落格, 或是想學習網頁程式設計, 學會 HTML 才能真正了解網頁的運作, 進而做到更精細的設定, 使您的網頁更加完美。
4
1-1-1 HTML 與網頁的關係 如果您平常是用 Internet Explorer 做為瀏覽程式, 執行『檢視』功能表中的『原始檔』命令後, Internet Explorer 就會顯示另外一個視窗, 視窗內所呈現的就是您所看到之網頁的原始文件內容, 如下圖所示：
5
1-1-1 HTML 與網頁的關係
6
1-1-1 HTML 與網頁的關係
7
1-1-1 HTML 與網頁的關係 我們稱這個原始文件為 HTML 網頁文件, 您要製作網頁時, 就是要做出一個如上圖所示的 HTML 文件, 因此我們必須學習 HTML (HyperText Markup Language), 中文可稱之為『超文字標記語言』。
8
1-1-2 HTML 文件是由標籤組成的 由前圖我們可以看到, HTML 文件中除了可在瀏覽器中所看到的文字外,還多出一些奇怪的文字, 像是 <head>、<frameset> 等等, 我們稱這些由小於 "<" 及大於 ">" 符號所組成的記號為『標籤』(tag)。
9
1-1-2 HTML 文件是由標籤組成的 您應該已經發現在 HTML 文件中, 除了這些穿插在文件中的標籤外, 其它都是一般的文字而已。
您不妨用瀏覽程式的存檔功能將所看到的任一個網頁儲存在您的硬碟中, 再用一般的文書處理器, 例如 Windows 的記事本或漢書等開啟之。 您就會發現原來 HTML文件不過就是和一般的文字檔一樣, 只是文字中有一些奇奇怪怪的 HTML 標籤罷了(至於圖形或圖片則是另外存成圖檔, 再用標籤加進文件中)。
10
1-1-2 HTML 文件是由標籤組成的 因此我們只要在文章之中, 加上適當的標籤, 則瀏覽程式在讀取該 HTML 文件時,就會依照各標籤所代表的意義, 將其後的文字做出靠左對齊、靠右對齊、放大、使用粗體字等各種效果,在瀏覽器的視窗顯示出來。
11
1-1-3 為什麼要學 HTML 自從幾年前 “網頁製作” 也成為 Internet 流行潮下的一股支流後, 為了讓多數的非電腦專業人士們也能輕鬆自製網頁, 因而出現了許多方便的網頁製作軟體, 也就是所謂的 “所見即所得” (What You See Is What You Get, WYSIWYG) 的網頁製作工具, 像是 FrontPage 和 Dreamweaver 等等。 這些工具讓使用者不需對 HTML 或其它的網頁製作技術有什麼瞭解, 即能做出圖文並茂的網頁, 那麼我們為什麼還要學 HTML呢?
12
1-1-3 為什麼要學 HTML 其實您如果只是要隨便做個個人網頁好玩,, 也許真的沒必要花時間學 HTML。
13
1-1-3 為什麼要學 HTML 其實一般的所見即所得網頁製作軟體, 也都有提供讓使用者直接編輯 HTML 內容的功能, 以補其功能上的不足。 其實要不要學 HTML 之類的問題在網路上也不時引起大家的討論, 身為初學者的我們, 不妨到網路上看看過來人的經驗談, 也許您會發現, 學習 HTML 的好處可多著呢!
14
1-1-4 HTML 的標準 在電腦上的『語言』都有一套標準, HTML 也不例外, HTML 標準的制定單位是大名鼎鼎的 W3C ( 目前標準最新版本是 4.01 版, 有興趣者可至 探個究竟。
15
1-1-4 HTML 的標準
16
1-2 如何製作 HTML 文件 HTML 的製作流程,大致上就像您在寫一篇研究或企劃報告一樣,其過程大致如下：
17
1-2-1 規畫 HTML 文件內容 您必須先想好文件中要放哪些東西, 例如:
套句商業術語, 就是要先決定並瞭解您的『客戶』群。明白目標後, 才能決定要在首頁中呈現什麼樣的資料。 蒐集所需的資料, 例如您已有一般的文件、圖片等要放到WWW上供大家瀏覽, 就將它們轉換成電腦上的檔案存起來。 構思要如何安排這些資料, 想好後就可準備開始動手了。
18
1-2-2 編輯 HTML 文件的工具 既然 HTML 文件只是一般的 ASCII 文字檔案, 我們就只要用普通的文書編輯程式來製作就可以了, 像是漢書、Windows 的記事本、甚至是 Word 都可用來編輯 HTML, 在存檔時要記得將副檔名設定成 .HTM 或 .HTML。
19
目前常見的編輯器簡介 以下對幾種比較知名的軟體做一些簡略的介紹供大家參考： Adobe Dreamweaver
Microsoft FrontPage NVU
20
Adobe Dreamweaver Dreamweaver 原本是由 Macromedia 公司出品, 是具有所見即所得功能的網頁製作工具, 也支援直接編輯 HTML 的功能。2006 年被 Adobe 公司收購, 是現在最流行的網頁編輯軟體。
21
Adobe Dreamweaver
22
Microsoft FrontPage 微軟公司出品的網頁編輯軟體。
除了強大的網頁製作功能, 以及所見即所得的編輯環境之外, 還提供了網站維護的工具。 FrontPage 都是隨著 Microsoft Office 軟體一起推出, 目前版本為 FrontPage 2003。 不過, 在即將面世的 Office 2007 中, 網頁編輯的功能將會整合到 SharePoint Designer 2007。
23
Microsoft FrontPage
24
NVU NVU 也是一套「所見即所得」的網頁編輯軟體, 並且屬於開放始碼 (Open Source) 軟體, 可以免費使用。
NVU 提供了不同作業系統的版本, 相當齊全。您可以到 moztw.org/nvu/ 網站下載 NVU 程式。
25
NVU
26
1-2-3 用瀏覽器預先觀看成果 文件編輯完成後, 當然是自己先用瀏覽器載入看看其顯示效果, 不合適的地方再回去修改。
通常我們都會在編輯與檢視成果間來回的進行, 所以此時若有一個網頁編輯器可以直接預覽編輯網頁的效果, 便顯得方便得多了 (這也是有人選擇使用 Dreamweaver 或 FrontPage 的原因)。
27
1-2-4 將 HTML 文件放到 WWW 伺服器 當完成 HTML 網頁用您主機的瀏覽器預覽時, 僅僅限於您的電腦可以看到。如果要公開讓大家一起欣賞您的成果時, 就必須將該文件公佈到一個 WWW 伺服器 (亦即有提供 HTTP 服務的主機) 上。 也就是說, 只要將做好的 HTML 網頁資料, 上傳到有提供個人網頁空間的 WWW 伺服器上, 大家就可以透過網路連線到這台 WWW 伺服器上觀賞您的網頁。
28
1-2-4 將 HTML 文件放到 WWW 伺服器 通常學校單位都有架設 WWW 伺服器, 並且會免費提供網頁空給學生使用。而各大入口網站, 如：PCHome、Yahoo 奇摩等, 都有提供免費網頁空間；或者您可以在搜尋引擎上尋找 “免費網頁空間“ 關鍵字, 也可以找到許多相關的資源。 如果您有申請寬頻網路, 也會根據公司以及優惠方案的不同, 而提供不等的網頁空間, 不妨善加利用。
29
1-2-4 將 HTML 文件放到 WWW 伺服器 如果您覺得這些免費的網頁空間太小, 或者限制太多, 您也可以在自己的電腦上架設 WWW 伺服器, 那麼整個硬碟都是您可以應用的網頁空間。比如說在 Windows XP 系統內的 IIS 伺服器程式, 就是很方便的 WWW 伺服器架站程式。
30
1-3 HTML 網頁與瀏覽器 設計 HTML 文件和寫程式有一個地方蠻相似的, 就是要考慮使用者 (瀏覽者) 的環境與需求。
和寫程式不一樣的是, 要寫一個適用於不同平台的程式要耗費一番工夫, 寫 HTML 文件則不然, 只要撰寫一次就可適用於各個平台, 因為只要使用者有『合適』的瀏覽器, 不管作業的平台是Windows、MacOS、Linux 或 Unix, 都能讀到您所撰寫的文件內容。
31
1-3 HTML 網頁與瀏覽器 實際上的情況其實並沒有如此簡單, 由於廠商們為了要在市場上搶得先機, 取得較大的市場佔有率, 因此會設法讓瀏覽器提供更新、更好、更吸引人的功能。 例如瀏覽器能看到 News、收發 及閱讀 RSS 等, 同時也能顯示出更花俏、變化更多的網頁內容。
32
1-3 HTML 網頁與瀏覽器 所有的網頁文件應該都是用『標準』的 HTML 語法所組織起來的, 但各廠商為了要讓自己的瀏覽器有更突出的顯示效果, 除了一些操作上的改進外, 就是支援所謂擴充的 HTML 語法 (HTML extensions)。 製作 HTML 網頁文件的人只要用了這些特殊的 HTML 語法, 同時使用者也使用支援該語法的瀏覽器, 就能看到在其它瀏覽器中看不到的效果。 所以要不要在網頁中使用這些非標準的內容就成為製作網頁時的一種考量。
33
1-3-1 設計 HTML 文件的注意事項 由於瀏覽器對於不認識的語法是採一概不理的方式, 所以若使用擴充的語法編輯網頁, 使用者就可能因為所用的瀏覽器不懂該語法, 而什麼都看不到或是看到非預期的效果。 所以在編輯文件時, 也要對是否使用擴充的語法來美化文件內容好好考量一番。
34
1-3-1 設計 HTML 文件的注意事項 為了使來參觀的人都能看到完整的內容, 尤其是廣告、推廣性質的網頁, 只用標準的HTML 語法來編輯是最好的了, 讀者也不會因為使用功能較『陽春』的瀏覽器, 而無法讀到您提供的資訊。
35
1-3-1 設計 HTML 文件的注意事項 以前要想讓自己的網頁較有看頭, 可能得花不少心思使用 Netscape 或 IE 的擴充語法來設計網頁。 但是到了 HTML 4.0、CSS (Cascading Style Sheets) 的出現,也差不多將各家原有的擴充語法中重要的部分都一網打盡了, 所以單靠 HTML 4.0 和 CSS 就足以做出效果極佳的網頁了。
36
1-3-1 設計 HTML 文件的注意事項 在製作網頁時仍需注意, 各瀏覽器廠商對一些 HTML 標準語法的支援不盡相同, 也就是說使用 “標準” (或草案中) 語法來製作網頁, 在不同的瀏覽器上仍可能會有不同的效果。 因此如果您希望每個參觀網頁的人都能看到相同的內容, 最好自己多使用不同的瀏覽器來測試效果。
37
1-3-2 學習的起點 - 觀摩他人的成果 您可以一邊學習一邊思考, 慢慢您就會對要放什麼樣的內容有較完整的概念。
另一個比較速食的方法就是模仿, 從別人的網頁來學習如何製作 HTML 文件、及應該放哪些內容。 這是一個不錯的學習方式,您只要將在網路上看到的 HTML 存檔, 然後用文書編輯程式修改其中的文字, 很快就能做出一個自己的網頁,不過這樣只是抄襲, 也有侵犯他人智慧財產之嫌, 所以還是觀摩觀摩就好,不要都用『抄』的。
38
1-3-2 學習的起點 - 觀摩他人的成果 以 Internet Explorer 而言, 在瀏覽別人的網頁時, 只要執行『檢視/原始檔』命令就能看到文件的原始內容。
39
1-4 HTML 的結構 請先準備好 HTML 編輯程式 (可以直接使用 Windows 的記事本即可), 接下來我們便要進入 HTML 的世界了。
40
1-4-1 純粹文字的 HTML 文件 其實 HTML 文件只是個普通的文字檔, 您可以在 Windows 的記事本 (或其它文書編輯程式) 中輸入以下內容, 並儲存為 HTML 文件 (假設命名為 ex01-01.html)：
41
1-4-1 純粹文字的 HTML 文件
42
1-4-1 純粹文字的 HTML 文件 將檔案命名為 .htm (或是 .html) 之後, 瀏覽器就會將這個檔案視為 HTML 文件了。
請您將同一個檔案複製後, 重新命名為 .txt 檔案, 再以 IE 瀏覽器開啟來觀看, 便會發現有些微的差異：
43
1-4-1 純粹文字的 HTML 文件 雖然只要將檔案的副檔名改成 .htm 或 .html 即可產生一個 HTML 文件, 但 HTML 文件必須以標籤來控制所有的圖片和文字, 才能展現出特色, 意即標籤是 HTML 的核心所在, 若不使用標籤便失去了儲存成 HTML 文件的意義了。
44
1-4-1 純粹文字的 HTML 文件
45
1-4-2 在 HTML 文件加入標籤 若您曾經使用過 IE 瀏覽器的『檢視/原始檔』功能, 來觀看別人的網頁, 就會發現其中包含了許多 HTML 標籤, 其格式如下：
46
1-4-2 在 HTML 文件加入標籤 標籤名稱都是英文, 也沒有大小寫的區別。例如 <body>、<BODY>、<bOdY> 的效果都是相同的。基本上 HTML 標籤依其用法可分為 2 種： 前後包夾型 單槍匹馬型
47
前後包夾型 這種標籤必須成對出現, 第二個標籤就是在標籤名稱前加上一個斜線 “/”, 例如在文件中有一個 <body> 標籤, 在稍後就會有一個 </body> 的標籤, 在這 2 個標籤間的文字就會被加上此標籤所定義的效果。不過有些也可視情況省略對應的結束標籤, 例如 <p>。
48
單槍匹馬型 這種標籤只需出現一次, 像是將 <br>、<hr> 等等。
49
1-4-2 在 HTML 文件加入標籤 雖然 HTML 的語法要求並不嚴格、彈性較大；不過在 XHTML 中對語法的要求較嚴謹, 標籤的大小寫是不同的, 因此建議您一律使用小寫的標籤；而本書所有的範例也都使用小寫的標籤。
50
1-4-3 什麼是標籤屬性 標籤的屬性 (Attribute) 可視為是標籤的『參數』, 可以讓同一個標籤展現出不同的效果。加入屬性時的標籤格式如下： 屬性不一定只有一個, 有多個屬性時的寫法如下：
51
1-5 最基本的 HTML 標籤 在這一節我們要介紹以下 4 個最基本的 HTML 標籤, 這幾個標籤架構出 HTML 文件的結構。
雖然實際上, 不使用這些標籤也能做出漂亮的網頁, 不過為了建立良好的文件架構, 以及避免瀏覽器的誤判, 建議大家還是應該在文件中使用這些標籤：
52
1-5 最基本的 HTML 標籤 <html>：HTML 文件的開始與結束 <head>：標示文件資訊
<title>：文件標題 <body>：標示本文
53
1-5-1 HTML 文件的開始與結束 －<html>
這個標籤表示 HTML 文件的開始與結束, 意即 HTML 文件應以 <html> 開始, 檔案最後則應以 </html> 做為結束：
54
1-5-1 HTML 文件的開始與結束 －<html>
實際上, 如果想偷懶, 不加上 <html> 標籤也是可以的。不過, 往後若有機會學習網頁程式語言 (ASP、PHP等) 時, 加上 <html> 標籤可以讓您的網頁結構分明, 更容易閱讀。 所以, 建議您還是養成習慣, 將文件加上 <html> 標籤。
55
1-5-2 HTML 和瀏覽器溝通的資訊 －<head>
<head> 標籤是用來標示文件的資訊, 主要是用以敘述 HTML 文件 (如說明此 HTML 文件的用途) 及宣告程式碼 (如宣告 Java Script 程式) 等。這些資訊只存在於 HTML 文件當中, 用瀏覽器觀看網頁時, 並不會看到這些資訊。
56
1-5-2 HTML 和瀏覽器溝通的資訊 －<head>
下列 3 種資訊可以放在 <head></head> 標籤之中： <title></title>：HTML 文件的標題。 <meta></meta>：記錄此 HTML 文件的相關資訊, 如此文件建立的日期, 使用的軟體等。 <script></script>：宣告使用的程式碼, 如 Java Script 的程式碼。
57
1-5-2 HTML 和瀏覽器溝通的資訊 －<head>
雖然上述的資訊應該要放在 <head></head> 標籤之中, 但若是省略了 <head></head> 標籤, 其中的資訊仍會正常運作, 並不會被當成本文顯示在瀏覽器上。
58
1-5-3 出現在瀏覽器上方的網頁標題－<title>
上述可放在 <head></head> 標籤中, 最常見、也是大家都會用的資訊, 就是網頁的標題, 這個標題會出現在瀏覽器視窗的標題欄上, 例如：
59
1-5-3 出現在瀏覽器上方的網頁標題－<title>
60
1-5-3 出現在瀏覽器上方的網頁標題－<title>
瀏覽器就會將 <title> 標籤之間的文字顯示在其視窗的標題欄上, 但不會出現在文件之中。如果我們未指定 <title>, 就 IE 瀏覽器而言, 會以用此文件的路徑 做為文件的標題。 另外請注意, 即使文件中未使用 <head> 標籤, 仍然可以用 <title> 標籤來指定文件的標題。
61
1-5-4 網頁的內容－<body>
62
1-5-4 網頁的內容－<body>
在 <body> 標籤之間可輸入任何想顯示在網頁上的文字, 也是大家發揮個人特色所在。簡單的說, 若是將事先編輯好的文字檔加到 <body> 標籤之中, 馬上就完成一個 HTML 文件了。 前例中, 只用了基本的標籤, 而未用到任何段落格式設定的標籤, 故所有的字就會一個接一個、一行接一行地顯示出來。
63
1-5-4 網頁的內容－<body>
文件中的空格並非沒有作用。當文件中有空格時, 瀏覽器只會空『一格』, 而且即使用十個、二十個空格連在一起, 其效果仍跟只空一格是一樣的, 至於換行在 IE 中是沒有效的 (有些瀏覽器則視為一個空格)。我們可從下列幾種情形瞭解文件中換行與空白的效果：
64
1-5-4 網頁的內容－<body>
65
1-5-4 網頁的內容－<body>
<body> 標籤還有許多屬性可設定, 如設定背景圖片的 background 屬性、設定文字顏色的 text 屬性等, 往後會陸續在相關的章節介紹。
Similar presentations
