1 / 65

第 1 章

第 1 章. 認識 HTML. 本章提要. 1-1 什麼是 HTML 1-2 如何製作 HTML 文件 1-3 HTML 網頁與瀏覽器 1-4 HTML 的結構 1-5 最基本的 HTML 標籤. 1-1 什麼是 HTML. 逛遍網路上形形色色的網頁 , 有的是令人目眩神迷、唱作俱佳的多媒體網頁；有的是內容豐富別具特色的部落格；有的則是功能齊全、不出門就能 Shopping 的購物網站；不論是哪一種網頁 , 都是以 HTML 為基礎建構而成的。

yuki
Download Presentation

第 1 章

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第 1 章 認識HTML

  2. 本章提要 • 1-1 什麼是 HTML • 1-2 如何製作 HTML 文件 • 1-3 HTML 網頁與瀏覽器 • 1-4 HTML 的結構 • 1-5 最基本的 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。 • 但如果想學好網頁的製作, 就必須對這個網頁的基本構成要素有一定的瞭解, 因為就算使用所見即所得的工具來製作, 最終的製作成果也都是存成 HTML 檔。 • 若有什麼效果是製作軟體的功能所無法做出的, 如果您通曉 HTML, 這時就可自己動手編輯, 將所需的效果設計出來。

  13. 1-1-3 為什麼要學 HTML • 其實一般的所見即所得網頁製作軟體, 也都有提供讓使用者直接編輯 HTML 內容的功能, 以補其功能上的不足。 • 其實要不要學 HTML 之類的問題在網路上也不時引起大家的討論, 身為初學者的我們, 不妨到網路上看看過來人的經驗談, 也許您會發現, 學習 HTML 的好處可多著呢!

  14. 1-1-4 HTML 的標準 • 在電腦上的『語言』都有一套標準, HTML 也不例外, HTML 標準的制定單位是大名鼎鼎的 W3C (http://www.w3.org), 目前標準最新版本是 4.01 版, 有興趣者可至http://www.w3.org/Markup/ 探個究竟。

  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 提供了不同作業系統的版本, 相當齊全。您可以到http://www. 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、收發 E-mail 及閱讀 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) 可視為是標籤的『參數』, 可以讓同一個標籤展現出不同的效果。加入屬性時的標籤格式如下： • 屬性不一定只有一個, 有多個屬性時的寫法如下：

More Related