1 / 13

HTML 超連結及多媒體

HTML 超連結及多媒體. 靜宜大學 資管系 楊子青. 大綱. 超連結 內置框架 多媒體 圖片 音樂 影音 Flash 動畫 YouTube 影音. 1. 超連結. Hyperlink 點選文字或圖片，連結到另一個網頁、 BBS 、 FTP 、檔案或 e-mail. 超連結語法. <a href=" 網址 " target=" 開啟目標 "> 例如設計一個超連結，開啟新視窗連結到靜宜大學 : <a href="http://www.pu.edu.tw" target="_blank"> 靜宜大學 </a>. 顯示於新視窗. 顯示於上一層框架.

rowan-ferrell
Télécharger la présentation

HTML 超連結及多媒體

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

  4. 超連結語法 • <a href="網址" target="開啟目標"> • 例如設計一個超連結，開啟新視窗連結到靜宜大學: <a href="http://www.pu.edu.tw" target="_blank">靜宜大學</a> 顯示於新視窗 顯示於上一層框架 顯示於目前視窗(預設值) 移除框架，顯示於目前視窗 顯示於特定框架

  5. 絕對路徑與相對路徑 • 絕對路徑 • 絕對的位置，並不會隨著現在目錄的改變而改變 • 相對路徑 • 相對於現在目錄的路徑表示法，所指到的檔案或目錄，會隨著現在目錄的不同而改變

  6. 連結至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>

  7. 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>

  8. 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>

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

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

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

  12. 多媒體 • (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則可自動播放

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

More Related