Download presentation
Presentation is loading. Please wait.
1
HTML – 超連結與圖片 資訊教育
2
超連結 <a></a> href：連結 target：目標視窗 title：標題(滑鼠提示文字)
name：文件內的目標名稱
3
連結種類 一般： <a href=" <a href="ftp:// ">文字</a> <a href="telnet://bbs.wretch.cc">文字</a> ： <a <a 站內連結： <a href="#name">文字</a> <a href="link.htm">文字</a>
4
目標視窗 target _blank _parent _self 框架名稱，EX：mainFrame
5
如何消除連結的底線 加上style="text-decoration:none"
<a href=" style="text-decoration:none">文字</a>
6
圖片 <img /> src：圖片路徑 width：寬度 height：高度 align：對齊方式 alt：圖片註解
bottom、middle、top、left、right alt：圖片註解 title：圖片標題(滑鼠提示文字) border：外框粗細
7
圖片路徑 建議使用相對路徑 或是以http開頭的檔案網址 這樣才可避免圖片無法顯示的問題！
<img src="img/qoo.gif" /> 或是以http開頭的檔案網址 <img src=" /> 這樣才可避免圖片無法顯示的問題！
8
圖片註解vs.圖片標題 正常情況： 圖片被移除或更名時： 只看得到圖片標題(title) 可看到圖片註解(alt)了
9
圖片也可以當作超連結 如下： 為了美觀，可將圖片的border設為0，這樣就不會有框線跑出來了！
<a href=" <img src="img/qoo.gif" border="0" /> </a> 為了美觀，可將圖片的border設為0，這樣就不會有框線跑出來了！
10
練習5 請選擇一位名人當做主題，並做介紹 檔名：學號_ex5.htm 請在自己的首頁，列出練習5的超連結 範例、參考資料
文字格式：字體大小、字型、顏色... 表格：框線、背景顏色、對齊... 圖片：標題、框線、對齊... 超連結：站內連結、有無底線、顏色... 檔名：學號_ex5.htm 請在自己的首頁，列出練習5的超連結 連結範例 範例、參考資料
Similar presentations
