4/06/2020

在HTML文件設置超文本鏈接(hyper text link)

本文簡單介紹在HTML文件中設置超文本鏈接的方法,以及注意事項,也就是<a>標記的使用要點。

在網頁中出現超文本鏈接(以下簡稱超鏈接),意味著瀏覽者可以藉由滑鼠/游標的簡單點擊,開啟另一個網頁,或是快速跳到同一網頁的特定段落。這實現了網際網路「互聯」的概念,對文本來說也實現了「概念」的互聯!

<a>標記的設置是HTML語言的基礎,初學者都不可能錯過它。用多了之後漸漸熟悉,<a>標記除了可以鏈接網址,還可以用來開啟電子郵件程式、(手機)開啟電話撥號功能。


<a>標記的基本功能:建立超文本鏈接

*<a>標記最常用來鏈接不同的網頁,讓瀏覽者能從當前頁面透過「點擊」,開啟另一個網頁(目標頁)。
*用<a>標記不是只能指向另一個.html文件(網頁),也能指向一張圖片的存放網址、指向一個PDF檔案的存放網址。
*<a>標記可以用來指向一個電子郵件地址,而瀏覽者點擊之後,會開啟電子郵件程式,讓人可以寫郵件到該電子郵件地址。
*<a>標記可以用來指向一個電話號碼,而點擊之後,可以進行撥號(限手機)。


<a>標記的寫法

*建立超鏈接,使用的是<a></a>標記,基本寫法為:

<a href="https://www.abcd.com/newlink.html">GO TO NEW LINK</a>

其中,被<a></a>圍住的文本(GO TO NEW LINK),在網頁上會顯示為變色、有下划線,讓人看得出來它是個「超鏈接」,可以點擊。
單箭頭內的文字符號則不會顯示在網頁上,它是用來告訴瀏覽器,該去哪裡抓取目標頁。


href屬性說明

*href是<a>標記的「屬性」,用來指明目標網頁的存放位置和文件名稱。
*href是hyper text reference的縮減寫法,意思就是「超文本引用」。
*href的表示方式,有「絕對路徑」和「相對路徑」兩種(注1)。
絕對路徑:
需寫出完整的網址,例如:<a href="https://www.abcd.com/newlink.html">GO TO NEW LINK</a>
相對路徑:
如果目標網頁就存在同一個網站內部(本範例為www.abcd.com),那麼可以選擇使用相對路徑來表示目標網頁的存放位置,
例如:<a href="../images/newlink.html">GO TO NEW LINK</a>

*<a></a>標記若圍住一段文字,點擊這段文字就能開啟目標網頁。
*<a></a>也可以圍住圖片,點擊圖片可以開啓目標網頁。
*建立電子郵件超鏈接的寫法:<a href="mailto:myname@domain.com">E-mail me!</a>。設置好之後,別忘了測試一下。
*建立電話超鏈接:<a href="tel:+886-2-23456789">+886-2-23456789</a>。設置好之後,別忘了測試一下。


title屬性說明

*title是用來注明「目標網頁」的標題名稱。
 例如:<a href="newworld.html" title="A new world">Go to a new world</a>
*設置title屬性後,當滑鼠/游標移到超鏈接文字的上方時,會浮現title的內容。
*title文字的設置,可以作為盲人識讀的輔助(據說可以用語音讀出內容,但我個人沒有試過)。


target屬性說明

*target是用來設置「目標網頁」的開啟窗口,主要分為「在原有視窗開啟」,以及「新增視窗開啟」兩種。
在原有視窗開啟:
<a href="newpage.html" target="_self">go to new page</a>
target="_self"是在當前視窗開啓目標網頁,這代表會離開(關閉)當前網頁,以目標網頁取代。
新增視窗開啟:
<a href="newpage.html" target="_blank">go to new page</a>
target="_blank"是要新增一個瀏覽器視窗(或標籤頁)來開啓目標網頁。這代表當前網頁會保留著。
*如果不特別設定target屬性,通常點擊超鏈接後,瀏覽器會在原有的視窗開啓目標網頁,也就是會覆蓋原來的網頁頁面。某些SEO(搜索引擎優化)觀點認為,這樣會使網站的「跳出率」提高,不利於網站的優化,因此有些人建議,把超鏈接都設置為新增視窗開啟比較好。
*現在,不同的瀏覽器似乎會自訂網頁開啓規則,例如360瀏覽器會自動以新的標籤頁開啓目標網頁,而Chrome則會讓目標網頁覆蓋原有網頁。


id屬性說明(進階概念)

*注意,id不是<a>標記的屬性,而是HTML其他標記的屬性,但是id屬性的使用,與<a>息息相關。
*id可以說是一個用來「做記號」的屬性。我們先在目標網頁的某處HTML標記中使用id屬性,用id定義一個名稱(例如id="detail")。另外在當前網頁的某個<a>標記處標註這個id名稱,就可以實現「點擊後跳轉到目標網頁中的特定位置」。
*使用方法(以id="detail"為例):
1. 假設當前網頁是here.html,目標網頁是there.html。
2. 在目標網頁there.html的某個特定段落,是我們要跳轉到達的位置,在該處的某個標記中加入id="detail",例如:<h2 id="detail">標題內容</h2>。
3. 在當前網頁here.html文件中,某個<a>標記的網址末尾,加上該id名稱:<a href="there.html#detail">See detail</a>。
4. 如此一來,點擊當前網頁中的超鏈接「See detail」,就會開啟目標網頁,顯示<h2>的所在位置。

*任何標記(如<h3>、<p>、<blockquote>)都可以加上id屬性,給予一個名稱,使其成為超鏈接點擊後的目標位置。
*一個網頁文件中可以設置多個id名稱,但同個網頁中的id名稱不能重複。
*實際運用上,可以利用id="top",設置「回到頁面頂部」的鏈接。
*id名稱的開頭必須是字母,後面可接字母、數字或符號,但中間不能有空格。



注1:相對路徑和絕對路徑的區別
用途
相對路徑:用來指向網站內部的網頁或文件。
絕對路徑:用來指向外部網站的網頁或文件,但也可以用來指向網站內部的網頁或文件。
優點
相對路徑:只要網站的網頁文件、圖片存放位置不變,相對路徑可保持有效。若是把整個網站的文件夾搬移到新的網址(例如更換域名),相對路徑還是有效,超連結也還是有效,不必修改。
絕對路徑:方便設置。
缺點
相對路徑:必須寫出目標網頁相對於當前網頁的路徑和位置,對不熟悉的人來說容易出錯。
絕對路徑:萬一域名需要變動,所有內部網頁的絕對路徑都會失效,必須重新設置。

1 則留言:

  1. In 1963, the primary all-electromechanical "Money Honey" slot machine was casino.edu.kg invented by the Bally firm. It is the world's first slot machine with an automatic payout of a lot as} 500 cash with out outer intervention. The recognition of this slot machine gave rise to the wild enlargement of digital gambling and its evolution. Despite the strict restrictions, the federal government has failed to deal with the problem in lengthy run|the lengthy term}.

    回覆刪除