何謂ＨＴＭＬ？ 
　　超文件標示語言（HyperText Markup Language : HTML）
是一種直譯式語言，簡單的說，就是一種標示規格，能夠使文
字、圖形、聲音....等物件直接在瀏覽器上顯示，使得您能輕
易地設計出多采多姿的超媒體文件作品。

　　HTML文件是利用一般普通文字格式（ASCII碼）來編寫，
因此使用者要編輯HTML，可透過一般的文書處理軟體，如 
Word、PE2、vi...等，也可以使用一些專門用來編寫HTML的軟
體，如Htmlabc，Htmledit...等。

　　它必須透過瀏覽器才能看到它的執行結果。並且透過網路
通訊協定（HyperText Transfer Protocl : HTTP ），能在全
球資訊網（World Wide Web : WWW）架構上作跨平台的流通，
輕易地藉由 Internet 來感受漫遊全球多媒體資訊網的樂趣。
HTML文件架構
  1. 文件架構：

    
<html>
      <head>
         <title>標題</title>
      </head>
      <body>
      ．
    　主要HTML文件的內容寫在這裡
　　　．
      </body>
</html>

  2. 主體<body>：

    <BODY
    BACKGROUND=image_filename超文件背景圖案
    BGCOLOR=#rrggbb超文件背景顏色
    TEXT=#rrggbb文字顏色
    LINK=#rrggbb未連結文字或圖形的顏色
    ALINK=#rrggbb滑鼠在連結上按的顏色
    VLINK=#rrggbb曾經連結過的顏色
    >

  3. 備註：

    1. HTML的指令都是成對的，以<指令>開始以</指令>結束。如下：

      <FONT SIZE=5>本指令在設定字型大小 </FONT>

    2. 在HTML中我們要用到<（小於）和>（大於）和""（雙引號）時，

      在文件中要顯示這些符號就得用到特殊字元。如下：

      HTML特殊字元
      HTML字元 實際顯示
      &amp; &
      &quot;"
      &lt; <
      &gt; >
      &nbsp;代表空白
HTML字元排版
  1. 字元大小與格式

  2. 標題文字：<Hn ALIGN=left|center|right>......</Hn>

    Hn分別可使用H1到H6，其字型分別由大到小，
    HTML語法實際顯示
    <H1>H1的標題</H1>

    H1的標題
    <H2>H2的標題</H2>

    H2的標題
    <H3>H3的標題</H3>

    H3的標題
    <H4>H4的標題</H4>

    H4的標題
    <H5>H5的標題</H5>
    H5的標題
    <H6>H6的標題</H6>
    H6的標題

    ALIGN屬選用性質，它可調整標題在螢幕的左、中、右等位置。範例如下：
    HTML語法實際顯示
    <H3 ALIGN=center>H3的標題並置中</H3>

    H3的標題並置中
    <H4 ALIGN=right>H4的標題並置右</H4>

    H4的標題並置右
    <H5 ALIGN=left>H5的標題並置左</H5>
    H5的標題並置左

  3. 一般文字：<FONT COLOR=#RRGGBB SIZE=+n>......</FONT>
    HTML語法實際顯示
    <font color=#ff0000>紅色字型</font> 紅色字型
    <font color=#00ff00>綠色字型</font> 綠色字型
    <font color=#0000ff>藍色字型</font> 藍色字型
    <font size=+4>６號字體</font> ６號字體
    <font size=+3>５號字體</font> ５號字體
    <font size=+2>４號字體</font> ４號字體
    <font size=+1>３號字體</font> ３號字體（預設）
    <font size=-1>２號字體</font> ２號字體
    <font size=-2>１號字體</font> １號字體

  4. 標示語法

    HTML語法實際顯示使用說明
    <strong>粗體字型</strong> 粗體字型
    <b>粗體字型</b> 粗體字型
    <code>代碼標示</code> 代碼標示
    <kbd>鍵碼標示</kbd> 鍵碼標示
    <samp>樣本標示</samp> 樣本標示
    <tt>打字體字型</tt> 打字體字型
    <cite>引證標示</cite> 引證標示
    <em>強調標示</em> 強調標示
    <var>變數標示</var> 變數標示
    <i>斜體字型</i> 斜體字型
    <address>地址標示</address>
    地址標示
    <!-- 註解標示 --> 不顯示

  5. 排版標示符號

  6. 段落：<p>

  7. 換行：<br>

  8. 預先格式化文字：<pre>

  9. 水平分隔線：<hr>

清單運用
清單可分為三種型態：
順序式清單<OL>
Order List		 無順序清單<UL>
Unorder List		 定義清單<DL>
Define List
這三種清單亦可交插使用!

（一）順序式清單：

HTML語法實際顯示 
<OL>
<LI>第一項
<LI>第二項
<LI>第三項
　　.
　　.
　　.
</OL>
  1. 第一項
  2. 第二項
  3. 第三項
    .
    .
    .
 
<OL TYPE=A START=5>
<LI>第一項
<LI>第二項
<LI>第三項
　　.
　　.
　　.
</OL>
  1. 第一項
  2. 第二項
  3. 第三項
    .
    .
    .
（二）無順序清單：
HTML語法實際顯示 
<UL>
<LI>第一項
<LI>第二項
<LI>第三項
　　.
　　.
　　.
</UL>
  • 第一項
  • 第二項
  • 第三項
    .
    .
    .
 
<UL>
<LI TYPE=disc>第一項
<LI TYPE=circle>第二項
<LI TYPE=square>第三項
　　.
　　.
　　.
</UL>
  • 第一項
  • 第二項
  • 第三項
    .
    .
    .
    		•
    （三）定義式清單：
    HTML語法實際顯示 
     <DL>
 <DT>五年一班
         <DD>班長
         <DD>風紀 
         <DD>學藝
 <DT>五年二班
         <DD>班長
         <DD>風紀
         <DD>學藝
 <DT>五年三班
         <DD>班長
         <DD>風紀
         <DD>學藝
 </DL>
    五年一班
    班長
    風紀
    學藝
    五年二班
    班長
    風紀
    學藝
    五年三班
    班長
    風紀
    學藝
    秀圖符號
    <IMG SRC=圖檔名稱>說明文字</IMG>
    HTML語法實際顯示 
    <IMG SRC=pen.gif>pen
    		 pen 
    <IMG SRC=pen.gif border=3>
    		 
    <IMG SRC=pen.gif align=left>
    圖片在左，說明文字在右
    		 圖片在左，說明文字在右 
    <IMG SRC=pen.gif  align=bottom>
    圖片在左，說明文字在右
    		 圖片在左，說明文字在右下 
    <IMG SRC=pen.gif  align=right>
    圖片在右，說明文字在左
    		 圖片在右，說明文字在左 
    <IMG SRC=pen.gif align=middle>
    圖片在左，說明文字在右中
    		 圖片在左，說明文字在右中 
    <IMG SRC=pen.gif alt="pen">
    		 pen
    文件連結
    1. 指向外界的連結
      語法：<a href=相對路徑[URL] target=NAME>名稱</a>
      例子：
      <a href=http://www.yoyo.com.tw/>悠遊yoyo挑戰台</a>
      指到原來的視窗
      <a href=http://www.yoyo.com.tw/ target=_parent>悠遊yoyo挑戰台</a>
      將所有的子視窗打開
      <a href=http://www.yoyo.com.tw/ target=blank>悠遊yoyo挑戰台</a>
      指到一個新視窗
      <a href=http://www.yoyo.com.tw/ target=windows>悠遊yoyo挑戰台</a>
      指到一個名為windows的子視窗

    2. 各頁間的連結
      語法：<a href=絕對路徑 target=NAME>名稱</a>
      TARGET的用法同前一項

    3. 單頁內的連結
      請看下面『拋錨鏈結』
    拋錨鏈結
    1. 單頁內的連結
      語法：
      <a href=#name>名稱</a>
      <a name=name>
      例子：
      <a href=#1>哈囉!</a>
      ↓
      ↓
      ↓
      <a name=1>在現今的資訊.......

    2. 指定頁內的連結
      <a href=index.shtml#1>HTML教學</a>
      ↓
      ↓
      ↓
      [index.shtml]
      <a name=1>HTML教學
    表格運用
    1. 基本表格介紹 <TABLE>
      <TR></TR>
      <TD></TD>
      <TH></TH>
      </TABLE>

      例:
      <tr><td><pre> <table border=5> <caption>銷售排行榜</CAPTION> <tr><th>書名<th>數量<th>定價
      <TR><TH>北港香爐人人插<TH>20000<TH>160
      <TR><TH>于美人的風采<TH>20000<TH>160
      </TABLE> 實例:
      銷售排行榜
      書名數量定價
      北港香爐人人插20000160
      于美人的風采20000160

      回到前頁