|
■ 網站與網頁：
在網際網路上，只要用滑鼠點一點，就可以看到很多的資訊，
這些豐富資料，就是HTML語法所顯示出來的。
到底什麼是HTML呢？
網站又是什麼？
簡單來說，網站乃是一堆網頁的集合！
■ 學習 HTML 的目的
- 瞭解網頁內部組織
- 學習使用標籤
- 未來網站功能設計的踏板
同學會覺得納悶，為什麼不使用網頁製作軟體，
如：Dreamweaver、Frongpage、PhotoImpact來製作，
或更省事，直接以Word轉存成網頁就好？
當然依賴網頁編輯的軟體是很方便，
但卻不能瞭解網頁內容的架構，
如果將來要再學習進階網頁技術時，將造成基礎不熟的負擔。
因為各位同學將來一定有機會學習程式或網頁語言，
如：PHP、Java、或C/C++，
或是如果想要使用別人已經開發的免費網站模組或系統，
也必須回過頭來學習 html 語法，
才能夠使用或撰寫像是計數器、留言版、討論區等網路系統。
此外，若使用微軟的Word或一些排版介面編輯軟體，
在轉儲存成網頁檔時，會轉換出大量的樣式標籤，
除了造成檔案肥大，也讓瀏覽器讀取緩慢，
若使用其他不同軟體編輯，也不容易瞭解和修改，
學習 html 也有助於瞭解別人優秀的網頁架構、組織，
讓你有機會去模仿或融會。
■ 網頁的內部組成
HTML（是 Hyper
Text
Markup
Language
的縮寫）
中文全名稱為：超文字 標記 語言
為何稱超文字呢？
除了可以讓文字變顏色、放大縮小外，
最特殊的是可以「連結」到別的網頁/網址！
其二，HTML還是一種簡單的直譯語言(Interpreter
Language)(1999, W3C; 單維彰,1999)
網頁內容的標籤語法，透過瀏覽器的解讀，
轉以網頁畫面顯示其效果。
此外，html 網頁檔也是目前網路上廣為通用文件之一(2003,
洪朝貴)，
因為網頁的內容就是文字檔，
換句話說，網頁內容既然是純文字檔，就讓我們來驗證一下；
請您開啟「記事本」或文字編輯器，輸入文字檔案內容如下：
存檔成 index.html
HTML語言教室:
文字檔也可以當網頁,
我的第一個網頁!
|
直接點選這個檔，或以瀏覽器 [開啟舊檔]，是否看得到內容呢？
然而，以文字檔儲存的網頁，卻只能夠顯示文件內容，
無法讓瀏覽器發揮潛力！
但是可證明，網頁是可以使用文字編輯器來編輯，
（譬如：Unix下的vi、joe，Windows下的記事本等，皆可）。
同學可以到Google上去找，搜尋關鍵字「HTML」或「文字編輯器」，
可找到很多製作網頁內容的共享或免費軟體，例如：PSPad。
推薦免費的網頁編輯軟體：
- Notepad2 (下載): 一個比記事本還好用的記事本。
- PSPad v5.0 (下載):
免安裝、免費版，解壓縮後即可使用。
- NotePad++(Web|下載):跟上面記事本相似，
也是開放碼的自由軟體。
- Nvu(下載): 一套跟Frontpage類似的自由軟體，由Mozilla社群開發。
網頁的內容，卻不等於你所看到的網頁。
也就是說「內容」 ≠ 「所見」。
若要顯示豐富的變化，
必須透過標籤(Tag)和瀏覽器(Browser)
的搭配運作，
才得以發揮效果，包括字體、圖形、聲音甚至具有影像的文件。
網頁是透過<標籤>，來告訴瀏覽器，
是否為一個網頁檔，以及什麼樣的內容需要作何種變化。
以下為一個網頁最基本的架構，
請將以下內容輸入，並存檔成
index.html
再以瀏覽器打開這個網頁存檔，
應該會看到下列顯示(請觀察上述內容所在的位置)：
嚴格說起來，HTML網頁的架構分為三部分，
- HTML的文件資訊，說明網頁文件種類的定義document type
definition (DTD)。
- 檔頭資訊，<HEAD>標籤括住的部分。
- 網頁文件內容，一般是以<BODY>或<FRAMESET>來標示。
參考:
The global structure of an HTML document
W3C (1999).
HTML 4.01 Specification
單維彰 (1999).
HTML 教材.
■ 網頁的檔案名稱
☉ 首頁檔：一般稱為首頁連結檔，
顧名思義，就是直接打網址，網站系統就會自動連結到此檔。
常見的首頁檔名為
index.html
或 index.htm
(如果是網站管理者，也可以透過設定更改首頁檔檔名)
☉ 網頁檔：必須為「.html」
或「.htm」
網頁檔
的檔名可自取，但副檔名必須如上。
■ 瀏覽器(Browser)的重要
- 歷史
從有網路開始，瀏覽器的戰爭一直不斷發生。
1992年，美國伊利諾大學
National Center for Supercomputing
Applications(NCSA)
首先開發出第一套圖形介面的瀏覽器 Mosaic，
開啟瀏覽器歷史的第一時代(Era)。
1994.12月，Netscape 承Mosaic之後，
獲得優勢(dominance)，號稱第二時代。
1995.8月，當微軟以Explorer進軍瀏覽器市場，
正式向 Netscape宣戰，開啟第三時代。
在市場被微軟IE蠶食、Netscape逐漸凋零，
演變成Mozilla/Firefox等自由軟體與專利軟體的對決，
卻喚起瀏覽器爭霸的第四時代(2003, Koch)。
- 種類：
-
FireFox
火狐狸，目前熱門的網頁瀏覽器
Firefox是Mozilla Application
Suite衍生開發出的瀏覽器，從2005年開始，每年被PC
Magazine評定年度最佳網頁瀏覽器。市場使用率曾經高達30%。較特別的是阻擋廣告彈出功能、且有外掛支援只能用IE才看得到效果的網站。
-
Netscape Navigator
曾經在1994年代，由Mosaic
Communications所更名，且叱吒風雲的網頁瀏覽器。但是，在後來1995年，微軟IE4.0版做出作業系統內建瀏覽器的置入性免費行銷後，Netscape一蹶不振。1999年，AOL公司以42億買下Netscape
communications，但是後面的努力都不見市場的使用率有所起色，一直到2007.12月，AOL正式宣告停止Netscape的發展，正式走入歷史；並建議使用者改用firefox或flock瀏覽器。
-
Mozilla
1998年，網景公司(Netscape)在程式碼開放的許可認證下，公布大部分原有netscape瀏覽器的程式碼，而當初將這個開放程式碼的Netscape
Communicator版本的發展計畫，稱之為Mozilla，而網景公司也正式成立Mozilla組織，正式來發展接續的Mozilla瀏覽器版本。
-
Chrome
2009年9月3日，Google推出的瀏覽器，宣稱執行他們的服務會有加速的效果，其使用和Safari相似的Webkit核心，對於網頁中的Javascript有不錯的效能。但有網友測試，在URL中輸入「:%」，可讓瀏覽器reboot的現象。
-
 Safari
(98桃竹苗區賽)
蘋果公司所發展的網頁瀏覽器，於2007.6推出Windows版本
在1997年前，Mac系統使用的是Netscape瀏覽器，但後來微軟以幫蘋果開發Mac版的MS
Office作為條件，要求Mac系統改用IE for
Mac(Mac OS X 10.3版是使用IE)。
2003.6，蘋果推出自己開發的Safari瀏覽器，正式內建在Mac系統內。
-
Opera
(98全國)
2009.9發佈Opera
10正式版，號稱是全世界最快的瀏覽器。
且儘量不外掛程式而讓使用者能享用一些便利的功能；另外，其對於W3C官方標準支援的堅持，也曾讓Opera在過去曾經遭受不少排擠。
-
Microsoft Internet Explorer
這應該不用介紹，微軟Windows內建的瀏覽器。
-
 Mosaic: 在1993.4月誕生的
一個瀏覽器，由 NCSA 工程師 Marc Andreessen
領導設計的軟體，並將原始碼置於網站上讓人下載研究，造成當時許多使用者研發的風潮
；在1994年，Andressen離開NCSA，創立後來知名的Netscape公司，開發出另一款的Netscape
Navigator瀏覽器！
- 比較：
根據PC home電腦家庭No108.，比較IE與Firefox，
除網頁支援度外，在分頁便利性、阻擋彈出廣告、網頁安全性(Active
X)、即時書籤RSS支援、擴充性等項目上，都是Firefox勝出。
- 未來：
不論如何發展，市場、商業上總會存在諸多標準；
目前看來，除了微軟
Explorer，
Google Chrome、FireFox
也逐漸侵蝕微軟IE的市場，
網頁的顯示效果會因支援瀏覽器標準的不同，而有差異。
製作網頁時，最好能註明使用哪種瀏覽器，能得到最佳
的表現效果，
否則，設計較為細緻的效果，將會讓使用不同瀏覽器的使用者看不到。
參考:
PC home (2005.1). Firefox vs IE. v108,
p152-161.
P. P. Koch (2003).
瀏覽器的戰爭：史詩仍在繼續(Browser Wars II: The Saga
Continues).
P. P. Koch
瀏覽器的歷史(Browser History).
微軟不鳥W3C，只搞自己的標準
R. Lemos (2004).
統計：Firefox侵蝕微軟IE市場.
R. Lemos & P. Festa (2004).
IE漏洞不斷 對手瀏覽器看漲.
S. Olsen (2002).
Mozilla 1.1問世 反應不一.
■ 學習和觀摩的方法《檢視原始檔》
☉ 使用Explorer，在 [檢視] 的 [原始檔]
可看到目前正在瀏覽網頁的寫法。
☉ 使用Netscape則是在 [檢視] 的 [網頁原始內容]。
☉ 遵循官方網站的標準www.w3.org
備註:( Index of Element HTML4,)
element table裡，標記註解記號:
Optional選擇性,
Forbidden禁用的,
Empty空的,
Deprecated不宜使用,
Loose DTD寬鬆的,
Frameset DTD視窗設定的.
|
|