HTML網頁教學

這些豐富資料，就是HTML語法所顯示出來的。

... 此外，html 網頁檔也是目前網路上廣為通用文件之一(2003, 洪朝貴)， ... 常見的首頁檔名為index.html 或index.htm HTML網頁教學 初寫:2006.01.29,更新日期:2021.09.09 　 作者：曾聖超老師 　 ■網站與網頁： 在網際網路上，只要用滑鼠點一點，就可以看到很多的資訊， 這些豐富資料，就是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(下載):一個比記事本還好用的記事本。

PSPadv5.0(下載): 免安裝、免費版，解壓縮後即可使用。

NotePad++(Web|下載):跟上面記事本相似， 也是開放碼的自由軟體。

Nvu(下載):一套跟Frontpage類似的自由軟體，由Mozilla社群開發。

網頁的內容，卻不等於你所看到的網頁。

也就是說「內容」≠「所見」。

若要顯示豐富的變化， 必須透過標籤(Tag)和瀏覽器(Browser) 的搭配運作， 才得以發揮效果，包括字體、圖形、聲音甚至具有影像的文件。

網頁是透過，來告訴瀏覽器， 是否為一個網頁檔，以及什麼樣的內容需要作何種變化。

以下為一個網頁最基本的架構， 請將以下內容輸入，並存檔成 index.html  再以瀏覽器打開這個網頁存檔， 應該會看到下列顯示(請觀察上述內容所在的位置)： 嚴格說起來，HTML網頁的架構分為三部分， HTML的文件資訊，說明網頁文件種類的定義documenttype definition(DTD)。

檔頭資訊，

標籤括住的部分。

網頁文件內容，一般是以或來標示。

參考: TheglobalstructureofanHTMLdocument W3C(1999). HTML4.01Specification 單維彰(1999). HTML教材. ■網頁的檔案名稱 ⊙首頁檔：一般稱為首頁連結檔，           顧名思義，就是直接打網址，網站系統就會自動連結到此檔。

         常見的首頁檔名為 index.html 或index.htm 　　　(如果是網站管理者，也可以透過設定更改首頁檔檔名) ⊙網頁檔：必須為「.html」 或「.htm」          網頁檔 的檔名可自取，但副檔名必須如上。

■瀏覽器(Browser)的重要 歷史 從有網路開始，瀏覽器的戰爭一直不斷發生。

1992年，美國伊利諾大學 NationalCenterforSupercomputing Applications(NCSA) 首先開發出第一套圖形介面的瀏覽器Mosaic， 開啟瀏覽器歷史的第一時代(Era)。

1994.12月，Netscape承Mosaic之後， 獲得優勢(dominance)，號稱第二時代。

1995.8月，當微軟以Explorer進軍瀏覽器市場， 正式向Netscape宣戰，開啟第三時代。

在市場被微軟IE蠶食、Netscape逐漸凋零， 演變成Mozilla/Firefox等自由軟體與專利軟體的對決， 卻喚起瀏覽器爭霸的第四時代(2003,Koch)。

種類： FireFox 火狐狸，目前熱門的網頁瀏覽器 Firefox是MozillaApplication Suite衍生開發出的瀏覽器，從2005年開始，每年被PC Magazine評定年度最佳網頁瀏覽器。

市場使用率曾經高達30%。

較特別的是阻擋廣告彈出功能、且有外掛支援只能用IE才看得到效果的網站。

NetscapeNavigator 曾經在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系統改用IEfor Mac(MacOSX10.3版是使用IE)。

2003.6，蘋果推出自己開發的Safari瀏覽器，正式內建在Mac系統內。

Opera (98全國) 2009.9發佈Opera 10正式版，號稱是全世界最快的瀏覽器。

且儘量不外掛程式而讓使用者能享用一些便利的功能；另外，其對於W3C官方標準支援的堅持，也曾讓Opera在過去曾經遭受不少排擠。

MicrosoftInternetExplorer 這應該不用介紹，微軟Windows內建的瀏覽器。

Mosaic:在1993.4月誕生的 一個瀏覽器，由NCSA工程師MarcAndreessen 領導設計的軟體，並將原始碼置於網站上讓人下載研究，造成當時許多使用者研發的風潮 ；在1994年，Andressen離開NCSA，創立後來知名的Netscape公司，開發出另一款的Netscape Navigator瀏覽器！ 比較： 根據PChome電腦家庭No108.，比較IE與Firefox， 除網頁支援度外，在分頁便利性、阻擋彈出廣告、網頁安全性(Active X)、即時書籤RSS支援、擴充性等項目上，都是Firefox勝出。

未來： 不論如何發展，市場、商業總會存在諸多標準； 目前看來，除了微軟 Explorer， GoogleChrome、FireFox 也逐漸侵蝕微軟IE的市場， 網頁的顯示效果會因支援瀏覽器標準的不同，而有差異。

製作網頁時，最好能註明使用哪種瀏覽器，能得到最佳 的表現效果， 否則，若想呈現較為細緻的效果，會讓使用不同瀏覽器的使用者看不到。

參考: PChome(2005.1).FirefoxvsIE.v108, p152-161. P.P.Koch(2003). 瀏覽器的戰爭：史詩仍在繼續(BrowserWarsII:TheSaga Continues). P.P.Koch 瀏覽器的歷史(BrowserHistory). 微軟不鳥W3C，只搞自己的標準 R.Lemos(2004). 統計：Firefox侵蝕微軟IE市場. R.Lemos&P.Festa(2004). IE漏洞不斷對手瀏覽器看漲. S.Olsen(2002). Mozilla1.1問世反應不一. ■學習和觀摩的方法《檢視原始檔》 ⊙使用Explorer，在[檢視]的[原始檔] 可看到目前正在瀏覽網頁的寫法。

⊙使用Netscape則是在[檢視]的[網頁原始內容]。

⊙遵循官方網站的標準www.w3.org 備註:　Optional選擇性,　Forbidden禁用的,　Empty空的,　Deprecated不宜使用,　Loose DTD寬鬆的,　FramesetDTD視窗設定的. 參考資料: W3C:www.w3.org。

HTML4。

標籤索引表(IndexofHTMLElements)。

HTML5elements HTML5attributes 林信良(2017)非前端開發的HTML5觀點 https://www.ithome.com.tw/voice/117596 「HTML5test」測試你的瀏覽器對HTML5支援度有多高 http://html5test.com/ HTML5 DifferencesfromHTML4