第4章、HTML文件清單樣式設定
Download
Report
Transcript 第4章、HTML文件清單樣式設定
第5章、HTML文件超連結標籤設定
內容章節
1. 使用<a>標籤製作超連結
2. 使用<a>標籤製作錨點連結
3. 使用<a>製作E-mail連結效果
4. 設定沒有底線的超連結
5. 設定超連結說明框
HTML文件超連結標籤設定
5-1使用<a>標籤製作超連結
使用超連結標籤 <a> 用於製作具有超連結效果的文字
敘述。
在 <a>的href 屬性中加上所要連結前往之網頁的名稱
以及路徑，即可完成連結。
撰寫「超連結」的語法，介紹如下：
<a href=“連結前往的目地網頁” or href=“網域名稱”
or href=“IP 位址”>超連結底線的敘述文字 </a>
例如：
<a href=http://www.cafa.edu.tw/>空軍官校首頁</a>
HTML文件超連結標籤設定
5-1使用<a>標籤製作超連結(續)
超連結有兩種形式：
一、絕對路徑：在超連結的路徑設定整的路徑名稱
例如: <a
href=“http://www.cafa.edu.tw/teach/index.asp>
二、相對路徑：在超連結的路徑設定非完整路徑，
瀏覽器會自行找出正確的完整路徑
例如: <a href=“chap2_7.htm>
瀏覽器會會自動找出的路徑是：目前路徑 + 相對路
徑
假設目前路徑是http://www.cafa.edu.tw/teach，則
完整路徑為
http://www.cafa.edu.tw/teach/chap2_7.htm
HTML文件超連結標籤設定
5-1使用<a>標籤製作超連結(續)
超連結的對象可以是目前電腦下某個目錄的某
個檔案，也可以是完整的網站網址，當然也可
以是網站的IP Address
範例如下：
連結開啟目前目錄下的檔案
<a href=“chap1_1.htm”>前往第一章第一個網
頁檔</a>
連結開啟全球資訊網路W3c下的首頁
<a href=“http://www.w3c.org”>前往W3C全球資
訊網組識網頁的首頁</a>
HTML文件超連結標籤設定
5-1使用<a>標籤製作超連結(續)
連結一個特定IP位址下的網頁
<a href=“http://163.15.25.11”>前往空軍官校</a>
<html>
<head><title>製作超連結</title></head>
<body>
<a href="chap1_1.htm">前往第一章第一個網頁檔</a><p>
<a href="http://www.w3c.org">前往W3C全球資訊網組識網
頁的首頁</a><p>
<a href="http://163.15.25.11">前往空軍官校</a><p>
</body>
</html>
範例顯示
HTML文件超連結標籤設定
5-2 使用<a>標籤製作錨點連結
所謂的「錨點連結」，是連結到同一個檔案中的某個
段落，意即製作網頁內文的「錨點連結」。
通常使用時機在文章太長不易尋找所要的主題，或是
文章過於複雜的情況。
撰寫步驟有二
1.
2.
建立連結點
<a name=“錨點名稱”>…</a>
設定連結
<a href=“#錨點名稱”>...</a>
告知網路內
部連結
範例顯示
HTML文件超連結標籤設定
5-3 使用<a>製作E-mail連結效果
使用超連結標籤 <a>，製作E-mail連結效果。
撰寫連結的語法，介紹如下：
<a href=“mailto:目的地郵件位址>郵件連結敘述</a>
例如：<a href=“mailto:[email protected]”>寄信給
我</a>
<html>
<head><title>使用超連結標籤製作E-mail連結效果</title></head>
<body>
Email: <a href=“mailto:[email protected]”>寄信給我</a><br>
</body>
</html>
範例顯示
HTML文件超連結標籤設定
5-4 設定沒有底線的超連結
之前所設定的超連結，預設狀態下都有底線
欲使用 <a>標籤設定沒有底線的超連結文字，
要用style屬性
撰寫連結的語法，介紹如下：
<a href=“目的地網頁” style=“text-decoration:none”>
不顯示底線</a>
例如：<a href=“http://www.w3c.org” style=“textdecoration:none”>不顯示底線的連結</a>
範例顯示
HTML文件超連結標籤設定
設定超連結說明框
設定超連結說明框的主要目地在簡單敘述該連
結。
超連結說明框不一定需要，但有效使用可以宣
告該連結的意義
撰寫說明框的語法，介紹如下：
<a href=“目的地網頁“ title=“要顯示的文字框說明文
字”>超連結底線的敘述文字 </a>
例如：<a href=“http://www.w3c.org” title=“全球資訊
網協會”>連結到全球資訊網協會</a>
範例顯示
HTML文件Body標籤屬性設定
設定超連結的顏色
連結顏色屬性
1.
2.
3.
尚未點選連結，超連結所顯示的顏色
<body link=“顏色值”>
當按下連結時，超連結所顯示的顏色
<body alink=“顏色值”>
當超連結已經被連結過，超連結所顯示的顏色
<body vlink=“顏色值”>
<html>
<head><title>在body設定連結顏色屬性</title></head>
<body link="#00FF00" alink="#FF00FF" vlink="#9900FF">
<a href="chap1_1.htm">前往第一章第一個網頁檔</a><p>
<a href="http://www.w3c.org">W3C全球資訊網組識網首頁</a><p>
<a href="http://163.15.25.11">前往空軍官校</a><p>
</body>
</html>
範例顯示