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>
是網頁的相關資訊,它裡面可以使用下面的標籤:
以上 <META>、<LINK>、<BASE> 可在 Dreamweaver
中以「插入」→「檔頭標籤」的方式插入,其中 <META>
有個特殊用法,可以過指定時間後自動換頁到另一個網頁,其語法如下:
<meta http-equiv="refresh"
content="5; url=http://www.google.com/">
上面的 5 為所指定的秒數,而
url 後面的東西為所要轉換的網址。
至於 <STYLE> 和
<SCRIPT> 語法可以做出許多特效,我們可以在網頁建置百寶箱找到許多特效的語法,特別是
Java Script 及
CSS 控制術 兩個部分。
<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"):