首頁 > 教學資料庫
 本文章點閱
[臺大]HTML 的發展過程

文章來源 : http://ctld.ntu.edu.tw/_epaper/news_detail.php?nid=52

 

 

文/李侑龍 (本中心多媒體程式設計師)

 

  HTML 是 HyperText Markup Language,「超文件標示語言」的縮寫。HTML 被用來結構化資訊,例如標題、段落和列表等等,也可用來在一定程度上描述文檔的外觀和語意。在 1982 年由 Tim Berners-Lee 建立最初的 HTML 系統,以便於電腦之間交換資料。經過多年的發展,HTML 增加了許多元素和屬性來豐富網頁效果;規則也更加嚴謹,撰寫網頁時只要符合規則,在不同的設備及瀏覽器都能顯示出設計者建製該網頁的樣式。


         目前已經發展到 HTML 4.01 版本,在發展的過程中,全球資訊網聯盟(World Wide Web Consortium, W3C)同時增加及刪減元素及屬性,並將一些元素和屬性標記為「過時的(deprecated)」,雖然有些瀏覽器還是支持這些過時的元素和屬性,但是在此不建議使用。


  事實上我們要學的是 XHTML,W3C 在 2002 年 8 月建議使用修訂過的 XHTML 1.0 來做為網頁的標準。 XHTML 是 Extensible HyperText Markup Language,「可擴展超文件標示語言」的縮寫。XHTML 1.0 是更嚴謹且更簡潔版本的 HTML。它的規則幾乎和 HTML 4.01 相同,而且被所有主要的瀏覽器支援。另外,XHTML嚴謹的頁面元素架構結合了 CSS(樣式表)後,更能發揮它的威力。

  HTML 對於語法的要求比較鬆散,這樣對於網頁編寫的人來說比較容易,但是會造成終端機器在解讀上的困難。在行動裝置上的瀏覽器,由於沒有桌上型電腦強大的處理能力,所以就無法正確解讀結構鬆散的 HTML 網頁。


從 2002 年到現在 XHTML 才漸漸成為主流,到下一個 HTML5 成為標準之前,XHTML 1.0 還會是業界的標準。

編寫網頁的步驟

在編寫 HTML 時會經過三或四個階段,以下分別介紹之:
  編輯:編寫程式語言時請使用「純文字編輯器」,Word 是屬於「文書處理器」,主要用來做文件的出版列印,因此會自動在檔案中加入只有 Word 才看得懂的資訊,但這些都不是任何程式語言所需要。所以請不要用 Word 來寫 HTML。純文字編輯器不會替文字加上任何樣式,僅提供簡單的複製貼上、尋找取代功能。有些純文字編輯器還會將程式語言的關鍵字以不同顏色和字體特別標示出來,讓版面更易讀。

 

  上傳:我們需要有一個公開的網頁空間才能讓網友造訪,台大的師生及職員都有自己的個人網路空間,請參考這裡來建立及上傳。FTP 為 File Transfer Protocol 的縮寫,這種協定讓網路上的二台機器能交換檔案。雖然瀏覽器也有陽春的 FTP 功能,不過還是建議使用專門的 FTP 軟體,如 FileZilla 和 Cyberduck 這些免費的開源軟體。

 

  檢查:上傳之後請用瀏覽器連到網址或是打開硬碟裡的檔案,來檢查是否跟你的設計一樣。我們不能限制使用者會用什麼瀏覽器來上網,所以網頁設計師最重要的任務是讓設計的網站在任何平台及任何瀏覽器都有一樣的版面和功能。因此在正式公開網站之前,務必用所有的瀏覽器打開你的網站,反覆測試,看看有沒有什麼地方跟你設計的不一樣。沒有的話恭喜你,可以回到編輯器製作下一個頁面。常見的瀏覽器有 Microsoft Internet Explore 9, 8, 7 (Win), Google Chrome (Win, Mac), Mozilla Firefox (Win, Mac), Apple Safari (Mac), Opera (Win, Mac)。還有別忘了在最近愈來愈多人使用的智慧型手機和平板電腦上也看看你的網頁喔!

 

  除錯:如果不幸的在檢查時你發現到網頁有怪怪的地方,如果你不能立刻就判斷出來是哪一行原始碼寫錯的話,就要進入除錯(debug)階段了。筆者最喜歡用的 HTML 除錯工具是 Firefox 的 Firebug 插件,它可以即時顯示網頁上被選取的元素的 HTML 及 CSS 原始碼,並且能在瀏覽器中做編輯測試,等到確定無誤後再回到編輯器正式修改上傳。

 

  接下來說明一下 HTML(XHTML 1.0 版本)的規則。
1、一個 HTML 元素(element)是包含開始標籤(tag)到結束標籤內的所有東西。

如果是空標籤(empty element)的話,例如圖像(img)、分行(br)、橫線(hr),因為沒有內容,所以要用 /> 來關閉標籤,如 <img /> <br /> <hr />。


2、標籤必須以巢狀式排列。換句話說,愈晚的標籤要愈早關閉。
正確:<p>ASK<a href="http://google.com">Google</a></p>
錯誤:<p>ASK<a href="http://google.com">Google</p></a>


3、標籤名稱必須小寫
<div> 和 <DIV> 是不一樣的。


4、屬性值必須使用雙引號
正確:<td rowspan="3">
錯誤:<td rowspan=3>

在這裡介紹一些基本的 HTML 標籤,各位可以把 HTML code 複製起來,貼到你所使用的純文字編輯器,儲存成 .html 檔案在桌面上,再用瀏覽器開啟,看看有沒有跟示範的圖一樣。如果有亂碼出現,請將你瀏覽器的編碼(text encoding)改成 UTF-8。
Headings

 

<h1>這是 h1 標題</h1>
<h2>這是 h2 標題</h2>
<h3>這是 h3 標題</h3>
<h4>這是 h4 標題</h4>
<h5>這是 h5 標題</h5>
<h6>這是 h6 標題</h6>

Paragraphs

<p>這是一個段落。</p>
<p>這是另一個段落。</p>

Text Formatting

<p>bold: <b>這段字是粗體</b></p>
<p>big: <big>這段字比較大</big></p>
<p>small: <small>這段字較小</small></p>
<p>italic: <i>這段字是斜體</i></p>
<p>code: <code>This is computer output</code></p>
<p>superscript/subscript: 有些<sup>上標</sup>和<sub>下標</sub>字</p>

<p>delete: <del>這些字被刪除了</del></p>

Lists

Unordered Lists(清單項目為黑點)
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Ordered Lists(清單項目為數字)
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Links (a 表示 anchor)

<a href="http://www.ntu.edu.tw" target="_blank">國立台灣大學</a>


Images
<img src="http://www.ntu.edu.tw/images/heading_left.jpg" width="396px" height="124px" alt="國立台灣大學" />


下一回再介紹更多的 HTML 標籤及屬性。