HTML語言的介紹
一、WWW（World Wide Web，全球資訊網）
1989年，WWW由 CERN (the European Laboratory for Particle Physics，歐洲量子物理實驗室)的
Tim Berners-Lee 所研發創設，當初 CERN
為建立一個高效率的分散式超媒體系統，以便整合分
散各地的研究員之資料，乃著手進行WWW計畫，未想「無心插柳柳成蔭」，如今WWW竟成
全球注目的焦點。
WWW採用 Client / Server 的架構，Web Server
提供超媒體文件之服務，使用者也就是 Client 端 只要執行瀏覽器
(Browser)且上了 Internet ，便能瀏覽 Server 上的資料。Web browser 和 Web
Server 間溝通的協定是 Hypertext Transfer Protocol (HTTP)，它是構築在 TCP / IP
之上的。
WWW可說是促成Internet蓬勃發展的大功臣，原因是過去Internet的查看方式以文字為主，而
WWW技術的出現使查看方式變成多媒體方式，Internet變成了傳送文件、圖形、聲音、影像的
媒介。結合了影音效果的超文件展示方式，大大提昇人們使用Internet的興趣。全球目前存在上
萬個Web站台，透過Internet連結全球的Web網站，如此構成綿密的網狀組織即可稱為WWW。 ((BACK))
二、Home Page（首頁）
Web 站台是由一堆Home Page組成，Home Page 就是 Internet
資料放置的型態之一，它以一頁一
頁的方式在電腦螢幕上呈現，就像雜誌的版面一般，它結合文字和影像（靜態或動態）的排版
效果，不同的是Home Page的頁與頁間是由一種叫超連結的技術來連接，也就是Home
Page的頁
與頁之間是跳接的而不是連續的的關係，這種能力讓使用者在Internet上尋找相關資料相當方
便。
Home Page的意義雖是指首頁，但通常連結出去的頁次也泛指在內，為避免混淆，也有人把第
一頁稱首頁，其餘頁次稱Web Page。在本專題中，我們統一稱為Home Page。 ((BACK))
三、HTML （Hyper Text Markup
Language，超文件標記語言）
World Wide Web
中充滿了大量的教育、文化、新聞、娛樂、工商等資訊，且其空間仍持續擴展
中，這些以超媒體文件展示出來的資訊分佈在世界各地，我們可透過網際網路加以存取，
但無論Web文件（也就是Home Page）來自何方，它們均是使用HTML語言所撰寫的。
HTML就是用來撰寫Home Page
的一種『語法』，但它不像傳統程式語言可寫出一個程式來執 行。HTML只是一大堆文字加上特殊標記，如果配合了所謂的『瀏覽器』觀看時，就會呈現出
不同的字體大小及顏色來。當然配合不同功用的標記，我們可在Home
Page文章中插入影像、 圖片、聲音及超連結…等，讓Home Page生動活潑。
換言之，HTML對單調的電腦文字檔就如同雜誌編輯之於作者的草稿，而WWW瀏覽器則相當
於印刷廠。HTML直接在電腦文字檔中加入排版命令，再交由瀏覽器來解譯加入HTML命令的
文字檔案，呈現在使用者眼前的便是多彩多姿的Home Page 。 ((BACK))
四、HTML的歷史
HTML語言出現於1990年並成為國際準組織 (International
Standard Organisation , ISO) ISO 8870 標 準文件 SGML
的應用作品之一。換言之，HTML 源自 SGML (Standard Generalized Marked Language，標準格式化標註語言)。網路上各種檔案格式不統一，往往造成資訊交流的困難，
SGML
的目的就是為了讓文件格式統一，易更正修改，適用於網路群眾。
HTML 採用 SGML "文件格式定義"
(Doucment Type Definition) 的概念，超文件作者在文件內標註不同區段的格
式，再由 WWW 瀏覽器負責解譯 HTML 命令，並格式化文件，以期能原"頁"重現!
HTML 的版本從1.0版發展至現今已是3.2版 (HTML 3.2)，除此之外還有各瀏覽器廠商自行發展
的延伸格式，所以可預見 HTML
的功能會愈來愈豐富，但離統一的目標愈來愈遠。 ((BACK))
五、HTML的功能
當使用者按下表示超連結的圖示，文字或圖形時，可以連按到另外一個Internet結點、另一頁
WWW文件、同一份文件的某一段、讀取某個特殊的檔案或執行其它功能
字型、粗斜體、閃爍或是以原始格式顯示
標題、段落、分行或表列清單（數字型或標點型等）
可調影像大小、加框，影像圖位置連結（Image Map），文繞圖等排版效果
利用於資料或文字、圖形的排版，欄寬可任意調整且格線可隱藏
資料庫形式的表格，內含文字方塊、清單、目錄、查核方塊、選擇圓鈕等
, 通常用於查詢或填 表時使用
利用框架的功能來分割螢幕畫面，並且可將不同的網頁顯示在不同的框架內。若做用超連結
時，也可指定連結的網頁顯示在特定的框架內。
((BACK))
六、HTML文件的基本架構
Head：標頭，包含文件的標題（Title）
Body：主體，透過瀏覽器真正顯示在畫面上的
部份
((BACK))
七、HTML基本元素（Element）與標籤（Tag）
HTML使用元素來定義文件的結構與格式，HTML元素就是一個單獨標籤或一對標籤所定義的
區域。標籤是小於（<）與大於（>）符號所括起來的一段字串，起始標籤的開頭無斜線字元
（/），結束標籤以斜線字元做為開頭
整體架構
 標示HTML元件
<html>
整份文件
</html>
標頭
<head>
這是標頭
</head>
標題
<title> 忠信高工商校園資訊網 </title>
主體
<body>
文件主體
</body>
按一下這裡，你會看到此範例的效果
文字變化和排版
<h#> … </h#> 區段標題
#字號是代表文字標題的大小 ，一般是從 1 到 6
<font size=#> … </font> 字級的大小
#為 1 到 7，預設值為 3，也可以用加減號來變化字體的大小。例：
<font size=5> 也可以寫成 <font size=+2>
<b> … </b> 黑體字
<i> … </i> 斜體字
<u> … </u> 加底線
<blink> … </blink> 文字閃爍 (Netscape)
<br> … </br> 換行
<p> 段落分格
<pre> … </pre> 預先格式化文字
<center> … </center> 置中
<ol> … </ol> 有順序編號的表列清單
<ul> … </ul> 無順序編號的表列清單
<body bgcolor = #nnnn> 背景顏色，nnnn從0000∼ffff，代表不同顏色
<body background = "圖檔檔名">
<hr> 水平線
| 含指令文件 |
在瀏覽器中所看到的 |
| <h1>這是一段h1的文字</h1> <h2>這是一段h2的文字</h2>
<h3>這是一段h3的文字</h3>
<h4>這是一段h4的文字</h4>
<h5>這是一段h5的文字</h5>
<h6>這是一段h6的文字</h6> |
這是h1的文字
這是一段h2的文字
這是一段h3的文字
這是一段h4的文字
這是一段h5的文字
這是一段h6的文字
|
| 在這裡加個<br>文字就換行了 |
在這裡加個
文字就換行了 |
| <b>文字加粗</b> <i>傾斜</i>
<u>加底線</u>
<blink>閃爍</blink> |
文字加粗 傾斜
加底線
|
| <hr> |
|
超連結
<a> … </a> 連結
屬性： 連結至何處 HREF
例：<a href ="另一連結的文件"> … </a>
下錨在另一文件，按下連結按鈕後可連
結至下錨處
<a href ="旗標名標"> … </a>
按下連結按鈕後可連結至旗標處
影像
<img> 插入圖形
屬性： 指出圖形檔名稱 SRC
對齊 ALIGN="right","left","middle"...
留白 VSPACE，HSPACE
用文字取代圖形 ALT
設定圖形大小 HEIGHT，WIDTH
| <img src="a3.JPG"
width="356" height="243"> |
 |
表格
<table> … </table> 表格宣告
<caption> … </caption> 標題
<tr> … </tr> 每一列開頭
<td> … </td> 每個欄位資料
屬性： 框線 BORDER
間格 CELLSPACING，CELLPADDING
寬度 WIDTH
下面我們舉一個規則的表格
要畫成這個表格非常簡單，程式碼如下:
| <table border="2" width="40%"> <tr> <td>一</td> <td>二</td>
<td>三</td> </tr>
<tr> <td>四</td> <td>五</td>
<td>六</td> </tr>
<tr> <td>七</td> <td>八</td>
<td>九</td> </tr>
</table> |
((BACK)) |