==== HTML ====

一、什麼是 HTML

HTML (Hypertext Markup Language) 超本文標註語言是一種撰寫網頁的語言,也是網頁語法的標準。一個簡單的 HTML 檔案如下:

<html>
<head>
<title>網頁標題</title>
</head>
<body>
網頁內容
</body>
</html>

上面出現許多 <html>、<head> 之類的東西,這個稱做 HTML 的標籤( tag),而前面多一條斜線的 </html>、</head> 則是它的結束標籤。一個 HTML 檔案由一對的 <html></html> 開始與結束, 裡面包括一對 <head></head><body></body><head> 標籤內包涵網頁的相關資訊(如標題、語系、作者、編輯器等),而 <body> 標籤內則是網頁的內容(瀏覽器看到的部分)。

另外, HTML 語法是不分大小寫的(Javascript 除外),還有標籤必須是一層包住一層,不可以交叉出現,例如 <b><i>123</i></b> 是正確的,而 <b><i>123</b></i> 是錯誤的。最後,HTML 檔案在被瀏覽器解讀時,會壓縮連續空格成一個,並忽略換行。需要較大的空格時,可以使用全形空格;而需要強迫換行時,可以使用 <br> <p> 等標籤。

 

二、<HEAD> 標籤

<HEAD> 是網頁的相關資訊,它裡面可以使用下面的標籤:

以上 <META>、<LINK>、<BASE> 可在 Dreamweaver 中以「插入」→「檔頭標籤」的方式插入,其中 <META> 有個特殊用法,可以過指定時間後自動換頁到另一個網頁,其語法如下:

<meta http-equiv="refresh" content="5; url=http://www.google.com/">

上面的 5 為所指定的秒數,而 url 後面的東西為所要轉換的網址

至於 <STYLE><SCRIPT> 語法可以做出許多特效,我們可以在網頁建置百寶箱找到許多特效的語法,特別是 Java ScriptCSS 控制術 兩個部分。

 

三、<BODY> 標籤

<BODY> 是網頁的內容,它可以使用的標籤非常地多,由於大部分的網頁編輯軟體都可以幫我們自動使用那些標籤,所以我們下面只介紹幾個比較重要或是要切換到 HTML 手動插入的標籤:

 

<BODY>:<BODY> 是整個網頁的內容,它本身有一些設定,例如文字顏色、背景顏色、連結顏色等等,我們是在 <BODY> 標籤裡加上一些屬性,像 BGCOLOR 是背景顏色、TEXT 是文字顏色等,我們寫成:

<body bgcolor="#ffff00" text="0000ff">

要把屬性寫在開始的標籤中標籤名的英文後面,屬性後面接一個等號 = ,然後用一對雙引號 "" 夾住要設定的值即可。屬性本身沒有先後關係,哪個寫前面寫後面都可以。

 

<A>:<A> 標籤本身有兩種功能,一是錨點,另一個是連結。如果指定了 NAME 屬性,它就變成一個錨點,而如果指定了 HREF 屬性,它就變成一個連結,例如:

<a name="a1"></a>
<a href="index.htm">首頁</a>

至於連結的種類,可以分成三種,第一種是站內連結,直接輸入檔名就行了;第二種是站外連結,要以 http:// 、 https:// 、 ftp:// 、 telnet:// 等開頭,例如連到 Yahoo!奇摩 是設定在 http://tw.yahoo.com/ ,如果只輸入 tw.yahoo.com 則會變成連結到該網頁所在資料夾中檔名為 tw.yahoo.com 的檔案,而要連結到 E-mail 則是用 mailto:xxx@aaa.bbb.ccc 的方式;第三種是連結到一個錨點,則是輸入一個井字號 # 後面接上錨點的名稱,例如: #a1 ,而要連結到其他外部檔案的錨點也是可以的,例如: index.htm#a1

 

<TEXTAREA>:文字區域,可以輸入一段文字的欄位,在 Dreamweaver 中可由「插入」→「表單物件」→「文字區域」來插入,例如:

至於文字區域的文字顏色以及字型大小和背景顏色等,可以用 CSS 樣式來修改。

<BGSOUND>:背景音樂(IE專用),也是在「頁面元素」裡。只要 Media Player 可以播放的檔案,包括 .mid.mp3.wma 等都可以使用,至於 .rm 檔則需要先轉檔成 .mp3 或 .wma 才能使用。

 

<MARQUEE>:跑馬燈(IE專用),也是在「頁面元素」裡。先把要做跑馬燈效果的文字和圖片反白後再插入會比較好,另外,它有一些屬性 可以使用:

  • DIRECTION :捲動方向( LEFT 左、RIGHT右、UP 上、DOWN 下)
  • BEHAVIOR :表現方式(SCROLL 捲動、SLIDE 滑動 、ALTERNATE 交替)
  • SCROLLDELAY :延遲時間(越小則越快)
  • SCROLLAMOUNT :移動距離(越大則越快)

範例一(向上捲動,設定 direction="up"):

 

範例二(左右來回,設定 behavior="alternate"):

卓峙南疆 濱攬鯤洋

台中首府 吾校發祥

卓峙南疆 濱攬鯤洋

台中首府 吾校發祥

猗歟盛哉 桃李芬芳

德智體群 四育作方為女德之臧

吁嗟吾校與日月並光 山河同長