網頁程式設計 學習紀錄 (四) HTML 超連結與圖片
包含以下九個部分：
- URI的類型
- 標示超連結 - <a>元素
- 指定相對 URL 的路徑資訊 - <base>元素
- 指定文件之間的關聯 - <link> 元素
- 建立書籤
- 嵌入圖片
- 影像地圖 - <map>、<area> 元素
- 標註 - <figure>、<figcaption> 元素
- 建立繪圖區 - <canvas> 元素
1.URI的類型
超連結的定址方式稱為 URI (Universal Resourse Identifier)
URL (Universal Resourse Locator) 則是 URI 的子集合
URI包含以下部分：
通訊協定://伺服器名稱[:通訊準編號]/資料夾/文件名稱
(1)絕對 URI
絕對URI包含通訊協定、伺服器名稱、資料夾、文件名稱
通常指定至網際網路的超連結都必須是 絕對 URI
(2)相對 URI
相對URI(Relative URI) 通常只包含資料夾和文件名稱
當所要連結的文件和超超連結的文件位於相同伺服器或相同資料夾時，就可以使用相對URI
(3)伺服器相對 URI
伺服器相對 URI 是相對伺服器的根目錄
如果要表示任何檔案或資料夾時，都必須從根目錄開始
2.標示超連結 - <a>元素
<a> 元素用來標示超連結，其屬性如下表：
| 屬性 | 說明 |
| charset="..." | 指定超連結的編碼方式 |
| coords="x1,y1,x2,y2" | 指定影像地圖的熱點座標 |
| href="uri" | 指定超連結所連結之文件的相對或絕對位址 |
| hreflang="language-code" | 指定 href 屬性值的語系 |
| name="..." | 指定書籤(bookmark)的名稱 |
| rel="..." | 指定從目前文件到 href 屬性指定之文件的關聯 |
| rev="..." | 指定從href 屬性指定之文件到目前文件的關聯 |
| shape="{rect,circle,poly}" | 指定影像地圖的熱點形狀 |
| target="..." | 指定目標框架的名稱 |
| type="content-type" | 指定內容類型 |
| media="{screen,print,projection,braille,speench,tv,handle,all}" | 指定目的媒體類型(螢幕；印表機、投影機、點字機、聲音合成器、電視、可攜式裝置、全部)，預設值為 all |
(1)連接至 E-mail 地址、電話、簡訊的超連結
指定mail地址可以在前面加上mailto:通訊協定
指定電話可以在前面加上tel:
指定傳送簡訊可以在前面加上sms:
而也能用<a>元素的 title 屬性來指定提示文字
以下為範例：
<a href = "sms:0916666666" title="簡訊號碼">傳送簡訊給客服</a>
3.指定相對 URL 的路徑資訊 - <base>元素
在 HTML 文件中，指定連接到圖片、檔案、程式或是樣式表的超連結，都依靠 URI 來指定路徑。
通常是將檔案放在相同資料夾，然後使用將對 URI 來表示超連結的位址
若要將檔案搬移，則可以使用 <base> 元素來指定相對 URI 的路徑資訊
<base> 元素放在 <head> 裡面，並且沒有結束標籤：
以下的範例實際位址會連結到："http://www.test.com/books/HTML5/html"
<!DOCTYPE html> <html> <head> <title>示範相對位址</title> <base href="http://www.test.com/products/hello.html"> </head> <body> <a href="../books/HTML5/html">範例</a> </body> </html>
4.指定文件之間的關聯 - <link> 元素
<link> 元素用來指定目前文件與其他文件之間的關聯，其中stylesheet 表示連結外部的 CSS 樣式表檔案
常見關聯如以列表整理：
| 關聯 | 說明 |
| appendix | 附錄 |
| alternate | 替代表示方式 |
| author | 作者 |
| contents | 內容 |
| index | 索引 |
| glossary | 名詞解釋 |
| copyright | 版權宣告 |
| next | 下一頁(和rel=一起使用) |
| pre | 上一頁(和rev= 一起使用) |
| start | 第一個文件 |
| help | 線上說明 |
| bookmark | 書籤 |
| stylesheet | CSS樣式表 |
| search | 搜尋 |
| top | 首頁 |
<link> 元素要放在 <head> 元素裡面，並且沒有結束標籤
以下以列表整理其屬性：
| 屬性 | 說明 |
| charset="..." | 指定正在建立關聯之文件的字元編碼方式 |
| href="uri" | 指定正在建立關聯之文件的的相對或絕對位址 |
| hreflang="language-code" | 指定 href 屬性值的語系 |
| name="..." | 指定名稱給正在定義的關聯 |
| rel="..." | 指定目前文件到與其他文件的關聯 |
| rev="..." | 指定目前文件到與其他文件的反向關聯 |
| target="..." | 指定目標框架的名稱 |
| type="content-type" | 指定內容類型 |
| media="{screen,print,projection,braille,speench,tv,handle,all}" | 指定目的媒體類型(螢幕；印表機、投影機、點字機、聲音合成器、電視、可攜式裝置、全部)，預設值為 all |
5.建立書籤
當網頁內容超過一頁十，為了方便使用者瀏覽資料，可以針對網頁上的主題建立書籤
建立書籤分為兩個部分：
- 在終點使用 <a> 元素的 name 屬性指定書籤名稱
- 在起點使用 <a> 元素的 href 屬性指定所連結的書籤名稱
以下為範例，點選跳轉後，頁面即會跳轉到書籤的位置：
<body> <a href="#書籤">點此跳轉</a> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <p>內容</p> <a name="書籤">書籤</a> <p>內容</p> <p>內容</p> <p>內容</p> </body>
6.嵌入圖片
除了文字外， HTML 文件還可以包含圖片、聲音、影片或其他 HTML 文件
<img> 元素在 HTML 文件中嵌入圖片，該元素沒有結束標籤
以下列表整理其屬性：
| 屬性 | 說明 |
| src="uri" | 指定圖片的相對或絕對位址 |
| name="..." | 指定圖片的名稱，供 Scripts、Apples 或書籤使用 |
| alt="..." | 指定圖片的替代文字 |
| longdesc="uri" | 指定圖片的說明文字 |
| width="n" | 指定圖片的寬度(n為像素數) |
| height="n" | 指定圖片的高度(n為像素數) |
| align="{left,right,center,middel,bottom}"(Deprecated) | 指定圖片的對齊方式 |
| border='n"(Deprecated) | 指定圖片的框線粗細(n為像素數) |
| hspace='n"(Deprecated) | 指定圖片的水平間距(n為像素數) |
| vspace='n"(Deprecated) | 指定圖片的垂直間距(n為像素數) |
| ismap | 指定圖片為伺服器端的影像地圖 |
| usemap="uri" | 指定影像地圖所在的檔案位址及名稱 |
| lowsrc="uri" | 指定低解析度圖片的相對或絕對位址 |
| crossorigin="..." | 指定圖片允許跨文件存取 |
(1)圖片的高度、寬度、框線
使用src指定圖片的相對或絕對位置
還可以透過height、width、border屬性指定圖片的高度、寬度、框線
若沒有指定高度、寬度，會以原始大小來顯示
若沒有指定框線，通常預設值為沒有框線
(2)圖片的對齊方式
<img>的 align 屬性 提供了 left(靠左)、right(靠右)、top(靠上)、bottom(靠下)等對齊方式
不過這些建議使用之後的CSS將之取代
7.影像地圖 - <map>、<area> 元素
影像地圖，分為伺服器端和用戶者端
差別在於使用者按下影像地圖的熱點(hot spot)時，
前者由伺服器決定熱點所連結文件，會增加伺服器負荷
後者由瀏覽器決定所連結文件，速度較快、會顯示所連結之URI或座標，開發者也可直接在本機上進行測試
(1)繪製圖片並定義熱點
HTML 支援 三種熱點形狀
圓形(circle)：在影像處理軟體中開啟圖片，先記錄圓心座標，再決定半徑
矩形(recrangle)：在影像處理軟體中開啟圖片，記錄矩形範圍的左上角與右下角
多邊形(polygon)： 在影像處理軟體中開啟圖片，順時針紀錄各個角點
(2)在 HTML 中建立影像地圖
此時會使用到<map>、<area>兩種元素
<map>用來指定用戶端影像地圖
屬性為全域屬性、事件屬性、
name="..."：指定影像地圖的名稱
<area>用來描述用戶端影像地圖的熱點，該元素沒有結束標籤，其屬性如下：
| 屬性 | 說明 |
| shape="{default,circle,rect,poly}" | 指定熱點的形狀(整個範圍、圓形、矩形、多邊形) |
| coords="x1,x2,y1,y2" | 指定熱點的座標 |
| href="uri" | 指定熱點所連結的文件 |
| nohref | 指定熱點沒有連結至任何文件 |
| alt="..." | 指定熱點的替代顯示文字 |
| target="..." | 指定用來顯示熱點的目標框架名稱 |
| hreflong="languaue-code" | 指定href屬性值的語系 |
| rel="..." | 指定從目前文件到href屬性指定之文件的關聯 |
| type="content-type" | 指定內容類型 |
| type="content-type" 指定內容類型 media="{screen,print,projection,braille,speench,tv,handle,all}" | 指定目的媒體類型，預設值為all |
(3)指定圖片與影像地圖的關聯
要指定圖片與影像地圖的關聯，要在影像地圖的前面加上嵌入圖片的敘述
然後使用<img>的usemap屬性指定影像地圖名稱
<img src="zoo.jpg" border="0" alt="動物園地圖" usemap="#pic_zoo">
若所在位置為不同檔案，則需要再#符號前面加上影像地圖定義所在的檔案
usemap="檔名.html#pic_zoo"
留言列表
NAS (1)