第 1 章 認識 HTML 著作權所有 © 旗標出版股份有限公司.

Presentation on theme: "第 1 章 認識 HTML 著作權所有 © 旗標出版股份有限公司."— Presentation transcript:

1 第 1 章 認識 HTML 著作權所有 © 旗標出版股份有限公司

2 本章提要 什麼是 HTML 如何製作 HTML 文件 瀏覽器與 HTML 文件的關係

3 什麼是 HTML HTML 與網頁的關係 HTML 文件結構 什麼是 SGML 為什麼要學 HTML

4 HTML 與網頁的關係 在瀏覽程式中所看到的內容 原始的文件內容 (執行『檢視/原始檔』命令)

5 HTML 文件結構 在 HTML 文件中由小於 "<" 及大於 ">" 符號所組成的記號稱為標籤 (tag)。
原來 HTML 文件不過就是和一般文字檔一樣, 只是文字中夾雜一些特定的 HTML 標籤。當瀏覽程式在讀取我們的 HTML 文件時, 就會依照各標籤所代表的意義, 將其後的文字做出不同的特殊效果。

6 什麼是 SGML SGML (Standard Generalized Markup Language) 是一種電子文件交換的國際標準, 其作用是在各種不同類型的電腦世界, 提供一個大家都能使用的文件格式。 將 SGML 拿到任何一種系統上, 只要有 SGML 的語法分析程式 (parser), 就能解讀含有 SGML 的文字檔, 同時也達到檔案能在各種電腦系統上用的目的。

7 HTML 與 SGML HTML 其實就是依 SGML 為基礎發展而來的, 要學習 HTML 其實不用管什麼是 SGML, 照樣也能做出非常精采的 HTML 文件。 若有興趣更進一步認識 SGML, 可到 看看。

8 HTML 的標準 HTML 標準的制定單位是 W3C ( 目前標準最近版本是 4.01 版, 有興趣者可至 探個究竟。

9 為什麼要學 HTML 若想學好網頁的製作, 就必須對這個網頁的基本構成要素有一定瞭解, 因為就算使用所見即所得的工具來製作, 最終的製作成果也都是存成 HTML 檔。 有些特效是網頁製作軟體無法做出的, 只要通 HTML, 這時就可以自己動手編輯, 將所需的效果設計出來。

10 如何製作 HTML 文件 製作流程 規畫文件內容 編輯 HTML 文件 檢視編輯成果 將文件放到伺服器上

11 製作流程 規劃文件內容 編輯文件 不滿意再回去修改 瀏覽程式預先觀看 放到可供大家存取的 WWW 伺服器 自已先在網路上測試
到適當的地方發佈首頁面世消息 不滿意再回去修改

12 規劃文件內容 了解您的客戶群, 也就是想吸引什麼樣的人來參觀您的網頁。 蒐集所需的資料。 構思如何安排這些資料。

13 編輯 HTML 文件 使用一般文書編輯器, 像是漢書、Windows 的記事本、Word…。不過, 在存檔時要記得將副檔名設定成 .htm 或 .html。 使用 HTML 編輯器, 只要選選功能表項目、按按工具列上按鈕, 就能將 HTML 標籤加到文件中, 簡化不少編輯工作。

14 目前常見的編輯器簡介 Macromedia Dreamweaver FrontPage AceHTML 5 Freeware HotDog

15 Macromedia Dreamweaver

16 FrontPage

17 AceHTML 5 Freeware

18 HotDog

19 在 HTML 文件中整合文字以外的多媒體檔案
在瀏覽網頁時, 都會看到不少的圖形, 有些還有動畫、音效等。這些特殊的物件, 都是以單獨的檔案椠於文件之外的, 例如音效可能是 MIDI 、WAVE 檔, 圖形有 JPEG 、GIF 檔等等。 我們必須另外準備這些檔案, 然後在 HTML 文件中用特別的語法來標示這些物件在網頁中出現位置、排列方式等等。

20 檢視編輯成果 通常我們都會在編輯與檢視成果間來回進行, 以確定顯示效果合適的。所以一個編輯器與瀏覽器整合在一起的環境會比較方便 (這也是很多人選擇使用 Dreamweaver 或 FrontPage 的原因)。

21 將文件放到伺服器上 WWW 伺服器 網路上提供個人放置 Home Page 的地方

22 WWW 伺服器 HTML 網頁文件要放到開放給大家存取的 WWW 伺服器上, 注意一定要是一個有提供 WWW (HTTP) 服務的主機才行。

23 網路上提供個人放置 Home Page 的地方
若您是學生或老師, 通常學校都會提供讓您免費放置的地方。 一般用各 ISP 撥接號的社會人士, 則可以在網路上找提供免費的硬碟空間, 供人申以放置私人的網頁。 若是使用 Windows XP 系統, 還可利用附於 Windows XP 光碟中的 IIS 伺服器程式。

24 瀏覽器與 HTML 文件的關係 要設計 HTML 文件應考慮使用者 (瀏覽者) 的環境與需求。可注意以下 2 點： 各家瀏覽器會有擴充功能

25 各家瀏覽器會有擴充功能 各家廠商為了讓自己的瀏覽器有更突出的顯示效果, 除了一些操作上的改進外, 就是支援所謂擴充的 HTML 語法 (HTML extensions), 製作 HTML 網頁文件的人只要用了這些特殊的 HTML 語法, 而使用者也使用支援讓語法的瀏覽器, 就能看到在其它瀏覽器中看不到的效果。

26 設計 HTML 文件的注意事項 為了使來參觀的人都能看到完整內容, 只用標準的 HTML 語法來編輯是最好的了, 讀者也不會因為使用功能較遜的瀏覽器, 而無法讀到您提供的資訊。 而各瀏覽器廠商對一些 HTML 標準語法的支援不盡相同, 在 Netscape 與 IE 上瀏覽仍會有不同的效果。所以最好自己多先用不同的瀏覽器來測試效果。