HTML超連結及多媒體 靜宜大學 資管系 楊子青

大綱 超連結 內置框架 多媒體 圖片 音樂 影音 Flash動畫 YouTube影音

1. 超連結 Hyperlink 點選文字或圖片，連結到另一個網頁、BBS 、FTP 、檔案或e-mail

超連結語法 <a href="網址" target="開啟目標"> 屬性 值 描述 href URL 例如設計一個超連結，開啟新視窗連結到靜宜大學: <a href="http://www.pu.edu.tw" target="_blank">靜宜大學</a> 屬性 值 描述 href URL Specifies the URL of the page the link goes to target _blank _parent _self _top framename Specifies where to open the linked document 顯示於新視窗 顯示於上一層框架 顯示於目前視窗(預設值) 移除框架，顯示於目前視窗 顯示於特定框架

絕對路徑與相對路徑 絕對路徑 相對路徑 絕對的位置，並不會隨著現在目錄的改變而改變 相對於現在目錄的路徑表示法，所指到的檔案或目錄，會隨著現在目錄的不同而改變 分類 範例 說明 絕對路徑 http://www.google.com 連結至Google網站Server file:///D:/test.htm 連結至本機D磁碟機的test.htm 相對路徑 test.htm 連結至同一資料夾下的tets.htm image/test.gif image資料夾下的test.gif ../index.htm 上一層資料夾的index.htm ../test/menu.htm 上一層資料夾下的test子目錄下的menu.htm

連結至E-mail信箱 <a href="mailto:E-mail帳號">…</a> 例如： <a href="mailto:tcyang@pu.edu.tw">寄信給子青老師</a> 設定主旨 <a href="mailto:tcyang@pu.edu.tw?subject=HTML5">寄信</a> 郵件副本 <a href="mailto:tcyang@pu.edu.tw?cc=a@mail.com">寄信</a> 密件副本 <a href="mailto:tcyang@pu.edu.tw?bcc=a@mail.com">寄信</a> 郵件主旨內容 <a href="mailto:tcyang@pu.edu.tw?body=Have a Nice Day!">寄信</a>

2. 內置框架 把外部網頁嵌入自己網頁中，語法： <iframe src="欲插入的網頁網址" width= "框架寬度" height="框架高度" scrolling="yes"> </iframe> 實例：http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe 實例： <iframe src="http://www.pu.edu.tw" width="600" height="400" scrolling="no"> <p>Your browser does not support iframes.</p> </iframe>

3. 多媒體 (1) 圖片 建議的圖片格式：JPEG、GIF 建議的圖片解析度：只要72dpi(電腦螢幕的解析度，每英吋72點)，圖檔愈小愈好(但需考慮清晰度 ) 語法： <img src="圖檔來源" alt= "說明文字" width="圖寬" height="圖高" /> 例如： <img src="http://www.csim.pu.edu.tw/files/users/pic/cache.21_54aae2f0.jpg.w95_h95.jpg" width="95" height="95" alt="子青老師個人照"></img>

多媒體 (2) 音樂 常見的音樂格式：WAV、MP3、OGG等 語法： <audio src="音樂來源" type="audio/mpeg"> </audio> 實例： http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_audio

多媒體 (3) 影音 常見的音樂格式：MP4、OGG、WebM等 語法： <vidio src="影音來源" type="vidio/mp4"> </vidio> 實例： http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video

多媒體 (4) Flash動畫 格式：SWF檔 語法： <embed src="動畫來源"> </embed> 實例： http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_embed

多媒體 (5) YouTube影音 利用iframe嵌入YouTube影音，語法： <iframe src="http://www.youtube.com/embed/影片網址?autoplay=0" allowfullscreen> </iframe> YouTube影片網址，取v=後面：lXHEnZ1KanI https://www.youtube.com/watch?v=lXHEnZ1KanI 也可由影片「分享」獲知影片網址 autoplay=1則可自動播放

參考資料 教科書 網路資源 榮欽科技、陳婉凌，網頁設計必學的程式實作技術：HTML5+CSS3+JavaScript，2012年，博碩。 Chap 08: 建立超連結 Chap 06: 圖片的處理 Chap 09: 多媒體影音的運用 網路資源 http://www.w3schools.com/tags/