留言板張貼圖片、音樂、影片之超連結語法介紹
教師網頁之「留言板、計數器」編輯教學

張淑寬 2004/12/8 撰於高市瑞祥國小

    前言
  • WWW網路是一個多媒體環境,配合瀏覽器的支援就能展現出一個圖文并茂、影音雙全的介面。學校留言板也是其中之一,當然也具備這些特點,但如果您只能在留言板上張貼文字,卻不熟悉如何分享音樂、影片、動畫、圖片等多媒體素材,那這個網頁就最適合您瀏覽了。
  • 連結非文字的其他素材,使其能同步顯現在留言板上,或經由留言板連結到別的網頁、網站,其實是很簡單的,您只要學會下述三種HTML超連結語法就大多能搞定:
    一、<a href=""></a>
    二、<img src="">
    三、<embed src="">

    怎樣?非常簡單吧!
  • <a>、<img> 及 <embed> 都是HTML語法裡的『標籤』,以下,就分別敘述這三個標籤的用法及用途。

1.<a href=""></a>  2.<img src="">  3.<embed src="">

 

一、連結到其他檔案 ( <a href=""></a> )

語法範例1:

各位老師,公佈教學檔案格式範例,<a href="http://net-hdisk.rsps.kh.edu.tw/~tc138/文件/教學檔案格式範例.doc">請按這裡</a>,有問題請與我聯絡。

    說明:
  • 以上一段張貼在留言板上的範例文字,留言者希望讀者能去看「教學檔案格式範例.doc」。
    (範例文字的色彩只是為了方便解說,實則全為黑色)
  • 就以上範例,您必須先把「教學檔案格式範例.doc」檔案上傳到教職員網路硬碟裡,存放位置是( CuteFTP pro 畫面 ):
  • 整個藍色部分文字就是超連結語法,<a href=""></a>是成套的,不可以只有<a href="">部分,而忘了打入</a>
  • 超連結網址『<a href="http://net-hdisk.rsps.kh.edu.tw/~tc138/文件/教學檔案格式範例.doc">』在本校留言板輸入時,應成連續狀態,請勿按 Enter 鍵而造成中斷。其中
    http://net-hdisk.rsps.kh.edu.tw/~tc138/文件/教學檔案格式範例.doc
    是『目標網址』。
  • 只要是合法(合於語法)網址,都可以放入 href="" 的雙引號內成為目標網址,例如
    href="http://www.rsps.kh.edu.tw"
    href="http://www.cwb.gov.tw/V4/index.htm"
    href="http://www.rsps.kh.edu.tw/一般圖片/HappyNewChineseYear.jpg"
    ....
    等。
  • 紅色部分(夾在<a href=""></a>之間的文字)是要給讀者「點按」的文字,也叫「連結入口」。
  • 適合使用 <a href=""></a> 連結語法的目標有:
    1.網站:如 http://www.cwb.gov.tw/  (注意它末尾沒有指定檔案)
    2.網頁:如 http://tw.stock.yahoo.com/h/getclass.php (目標檔案副檔名是 .htm .html .asp .php ...等)
    3.文件:副檔名是 .doc .txt .ppt .swf .xls ...非常多
     ☆ <a href=""></a> 標籤是所有超連結的基礎,幾乎所有類型目標,不管是文字、圖片、照片、影音、網頁...檔案,都可以使用這個標籤來指定超連結,本來學會這個也就夠用了,只是它有一個特點,就是瀏覽者必須『按它一下』才能顯現目標內容,它無法同步顯現目標檔案於畫面上,換句話說,如果您想在畫面上同時出現您輸入的文字與照片(或影片、音樂),它就辦不到了,所以,本網頁才會介紹給您另二個標籤。
  • 其實,您可以反白複製上方的範例語句,直接貼入留言板中,再稍加修改即可,但請注意其中「http://net-hdisk.rsps.kh.edu.tw/」是教職員硬碟網址,全校大家都一樣,而「~tc138」應該不是您的帳號位址,您可別照抄。(您的網址請上教職員網頁查詢。)
  • 超連結語法還可以寫成這樣:
    <a target="_blank" href="http://www.edu.tw/">教育部</a>
    這例子要連結到教育部,標籤裡多了一個「target="_blank"」,意思是,當瀏覽者點入連結時,螢幕上多出一個瀏覽器視窗顯示教育部網站。
  • 細節解說:
    ☆ href、target 都是 <a> 標籤的『屬性』,_blank 是 target 的『值』、而 http://www.edu.tw/ 是 href 的值。
    ☆ 對 <a> 標籤而言,href 屬性一定要有,否則就無意義(另一 name=### 用法以後有機會再詳述),但 target 屬性可視需要取捨。
    ☆ 不同的標籤有不同的屬性設定,可用的屬性數量也不一定,有些屬性是許多標籤共通的,但有些則是獨有,不能一概而論或張冠李戴。
    ☆ 指定給屬性的『值』通常都用雙引號框住,雙引號『"』是成雙配對的,請別遺漏,也勿多出。省略頭尾雙引號雖然也可以(如:width=600),但某些時候會出錯,這可能不容易查出來。

以上範例在留言板顯示的結果是:

各位老師,公佈教學檔案格式範例,請按這裡,有問題請與我聯絡。
    注意:
  • 屬於語法的部份,都必須使用半形英文字母(不分大小寫)、符號,切勿不小心打入全形英文字母、符號,否則會發生錯誤。
  • 輸入標籤語法時,全形空白最容易造成錯誤,而且難以發現,請隨時注意您的中文輸入法狀態。

二、連結照片、圖片 ( <img src="">)

語法範例2:

各位同仁,這是我家的可魯,可不可愛?<br><img src="http://net-hdisk.rsps.kh.edu.tw/~tc138/圖片/可魯24.jpg">

    說明:
  • 就上例,必須先把『可魯24.jpg』圖片上傳到教職員網路硬碟,存放在帳號 tc138 的 public_html\圖片 資料夾中。(參看前一語法說明)
  • <br> 是『換行』標籤,這樣會使圖片顯示在文字之下一行,與圖片標籤<img>無關。
  • <img> 沒有終止標籤,不用打入 </img>
  • <img> 標籤的圖片位址屬性名稱是 src 不是 href,這裡容易弄錯!
  • 可以在圖片四周加上邊框:
    <img border="2" src="...">
    border 屬性用來指定邊框大小,單位是像素。
  • <img> 標籤可顯示的圖片格式有 *.jpg *.gif *.bmp,不是每一種圖片格式都能使用 <img> 標籤直接在瀏覽器上顯示,它不接受。
  • 如果要圖文並列,如:


    本範例裡,許多文字依靠著圖片周圍顯示,頗符合傳統文件版面的習慣,要達到這樣的效果,需要指定圖片的對齊:
    <img align="left" src="...">
    <img> 標籤的 align 屬性指定圖片靠左。當然,也可以指定靠右:align="right"

    ☆或許你注意到上例中,圖片與文字似乎過於接近,如要改善這種狀況,只要加入兩個屬性設定即可:
    <img align="left" hspace="12" vspace="4" src="...">
    hspace, vspace 分別指定圖片水平與垂直的周圍間距,其值為任意數字,單位也是像素:


    ☆如果沒有指定 align 對齊屬性呢?那就會變成這樣:


範例2在留言板顯示的結果是:

    此外:
  • 圖片如單獨一行顯示,在沒有特別指定的情況下通常都會靠左顯示,如果要讓圖片左右置中,就需要加入段落標籤 <p>,而且要指定屬性 align 的值為 center,如:
    <p align="center"><img border=1 src="..."></p>
    當然,也可以讓圖片靠右:align="right"
    ☆使用
    <center><img border=1 src="..."></center>
    這樣的語法也可以使圖片置中,但要變更為靠左或靠右就沒辦法了。
  • 某些照片尺寸很大,超出畫面能容納的範圍甚多,造成瀏覽者需要捲動畫面才能看到全部,或造成留言板頁面凌亂;又或者您希望圖片能縮小一些,以配合其他圖片或文字,顯示出較為整齊美觀的畫面。有這些情形,可以用 width,height 兩個屬性來改善:
    <img border=4 src="..." width="720" height="540">
    ☆指定圖片的寬、高屬性,您可能需要先了解螢幕解析度的意義。目前較常見的螢幕解析度是 1024x768 與 800x600 兩種。
    ☆通常,把較大的圖片縮小一些顯示不會有甚麼問題,反之,就可能產生影像模糊的狀況。還有,保持圖片原來的高、寬比例也很要緊,如隨手任意給予一個數值,最後顯示出來的結果可能不是您所期待的。
  • 圖片也可以是超連結入口,例如:
    <p align=center><a href=".../戶外教學.htm"><img border=1 src=".../std01.jpg"></a></p>
    ☆這個範例省略了路徑,用『...』替代。
    ☆圖片「std01.jpg」被夾在 <a href=".../戶外教學.htm"></a> 之間,它便成了「戶外教學.htm」的連結入口。也就是點按 std01.jpg 圖片就可以連結到「戶外教學.htm」。
    ☆段落標籤「<p></p>」的存在,是為了使 std01.jpg 這個圖檔在瀏覽器畫面中左右置中顯示,並非必須。

三、連結音樂、影片 ( <embed src=""> )

語法範例3:

請您聽音樂演奏,「情非得已」:<br><embed width="400" height="45" src="http://net-hdisk.rsps.kh.edu.tw/~tc138/音樂/情非得已.mid">

    說明:
  • <embed> 標籤是用來呼叫瀏覽器的外掛物件(通常是 Windows Media Player)播放音樂。
  • 播放物件常常有它的控制面板,面板上有「播放、停止、暫停、音軌進程...」等按鈕,所以我們可以指定它在畫面顯示的大小,就是上例中的 width,height 兩個屬性。
  • 如果想讓音樂有「背景效果」,只要設定 width="0" height="0" 即可。這樣畫面上看不到播放器面板,但卻有音樂聲傳出來。如:
    <embed width="0" height="0" src="http://net-hdisk.rsps.kh.edu.tw/~tc138/音樂/birthday.mid" loop="3">
    loop 屬性限制這首音樂需重播三次,內定是一次,如果要重複不停的播放,設為 loop="-1"
  • 如果有多首音樂要讓瀏覽者點播(讓讀者喜歡聽哪一首自己按),那就需要加入 autostart 屬性,如:
    <embed autostart="false" width="400" height="45" src="http://net-hdisk.rsps.kh.edu.tw/~tc138/音樂/情非得已.mid">
    <embed autostart="false" width="400" height="45" src="http://net-hdisk.rsps.kh.edu.tw/~tc138/音樂/wyyy1.mid">
    embed 物件內定有自動播放功能,而 autostart="false" 屬性設定抑制了此項功能,所以,瀏覽者需要用滑鼠按下面板上的「play」按鈕才會播放音樂,要注意的是,此時面板大小(width,height)設定就不能是 0,否則便看不到按鈕,也就無從播放。
  • 如果要貼影片或有動態畫面的音樂,語法完全一樣,只要注意 width,height 兩個屬性即可,它們是有比例關係的,通常是寬4高3,4:3。如:
    <embed width="600" height="450" src="http://net-hdisk.rsps.kh.edu.tw/~tc138/movie/ohoh.wmv">
    ☆每一台安裝 Windows 作業系統的PC,都有 Windows Media Player 播放物件,它支援的格式有:

    只要是上述格式檔案,瀏覽者就可以順利播放您張貼的影音、圖片檔案。
    ☆某些影音檔案格式需要不同的軟體才能開啟、播放,如 Real Player、Quick Time ,所以,最好是轉成 Windows Media Player 有支援的格式再貼出,以確保瀏覽者能看得到。不然,您可能就必須告訴瀏覽者去哪裡取得播放物件,否則,您就有「資訊的傳達與接收斷層」的問題了。

  • ☆ 本網頁是寫給初學者看的,內容只是針對本校留言板上超連結語法張貼的實用性,對於其他標籤的說明較為簡略,事實上還有許多的應用並未闡明,如您有任何疑問,請上其他留言板留言或 Email 給我(tc138)。
  • ☆ 如果您對HTML語法有興趣,坊間有很多書籍可供研究,或者參閱WWW官方網站HTML部分,也可獲得更詳盡的說明。