網頁設計 – HTML 超連結 - 博全科技有限公司 PHD Technology Co., Ltd.

前面我們曾經在 HTML 簡介中提到， HTML 是一種「超文字標示語言」，而這一篇我們要介紹的是「超連結」。

超連結的英文被稱做是 hyperlink ，聽起來好像很專業、很難懂的樣子，其實不然。所謂的超連結，目前已被大家直接簡稱為「連結」了。沒錯！它幾乎就是我們一般常講的連結的意思。

一般我們在網頁文章中，可能會提到一些名詞，或相關的網站，文章的作者可能會在文章中加上一個超連結，連到那個介紹網頁去，這就是用超連結來達成的；或是有些網站中有許多的功能選單或多個網站內頁，也會利用超連結的方式，讓人點選之後，網頁能夠導到讀者想要看的那個內容頁去；如果你在搜尋引擎中查詢某個關鍵字，然後搜尋引擎會列出這個關鍵字的搜尋結果，而你就可以透過點選搜尋結果中的連結，連到你所想要看的網站去了。

如果說 HTML 是帶動整個全球資訊網發展的最重要功臣，則超連結則可以說是 HTML 中最具有代表性的重要功能了。不知道如何在網頁中加入超連結，就別說你懂得 HTML 網頁設計了。

在 HTML 中加入超連結

超連結是使用 <a> 這個標籤， a 是取自於英文 anchor 的第一個字母，是「錨」或「停留點」之意，代表每一個超連結所連結過去的網頁，都是看這篇文章的人可能會另外去停留觀看的內容。

<a> 標籤有一個 href 屬性，取自於英文 hypertext reference 簡稱，中文譯為「超文字參考」。比較白話的說，就是你要參考的內容，是要連結到什麼 URL 網址去。

我們先來看一個簡單的超連結範例：

<html>

  <head>
    <title>網頁設計教學 HTML - 加入超連結</title>
  </head>
  
  <body>
    這篇文章出自於 <a href="//phd.com.tw">博全科技</a> 的網頁。
  </body>
  
</html>

執行結果如下：

這篇文章出自於 博全科技 的網頁。

URL 網址在上面的範例中所用的 //phd.com.tw 就是我們一般所說 HTTP 網址。而其實 URL 網址並非只有 HTTP 網址一種，它還可以是 E-mail 信箱位址。也可以是 FTP 位址，或是其它更多型態的位址。

不同的幾個 URL 連結範例：

<html>

  <head>
    <title>網頁設計教學 HTML - 其它常用的 URL 連結</title>
  </head>
  
  <body>
    這篇文章出自於 <a href="//phd.com.tw">博全科技</a> 的網站。<br>
	HTTP 網址是： <a href="//phd.com.tw/knowledge/html/hyperlink">HTML 超連結教學網頁</a><br>
	站內相對網址是： <a href="/knowledge/html/hyperlink">HTML 超連結教學網頁</a><br>
	本公司 E-mail 信箱是： <a href="mailto:[email protected]">博全科技信箱</a>
  </body>
  
</html>

執行結果如下：

這篇文章出自於 博全科技 的網站。
HTTP 網址是： HTML 超連結教學網頁
站內相對網址是： HTML 超連結教學網頁
本公司 E-mail 信箱是： 博全科技信箱

HTML 超連結的目標視窗屬性

前面的超連結範例，點選連結後，連結的網頁畫面都會取代現有的瀏覽器視窗，但是有時我們會想要點選超連結之後，是另開一個瀏覽器視窗來顯示，而不是取代現有的畫面。

其實這也還蠻簡單的，您只需要在 <a> 超連結標籤之中，加入一個 target 目標視窗屬性，並且再將屬性值設為 "_blank" 即可。

以下是另開視窗的範例：

<html>

  <head>
    <title>網頁設計教學 HTML - 超連結另開瀏覽器視窗</title>
  </head>
  
  <body>
    另開視窗到： <a href="//phd.com.tw" target="_blank">博全科技</a>
  </body>
  
</html>

執行結果如下：