前面我們曾經在 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>

執行結果如下:

另開視窗到: 博全科技

超連結的 target 屬性值,除了填入 "_blank" 來另開視窗之外,其實還可以填入「視窗名稱」或 "_self" 、 "_parent" 、 "_top" 等屬性值,各有不同的用途。不過其它用途因為您目前應該還用不到,我們等到之後較進階的篇章時再來做介紹囉。

<< 上一篇: HTML 文字變化 [ HTML 教學目錄 ] 下一篇: HTML 影像、圖片 (建構中) >>
4 回復
  1. kent
    kent says:

    谢谢你们。真的很仔细,我是完全没有HTML知识的人,一看就懂了,真的教的一点都不马虎,真的好用心的教。 好期待HTML 影像、圖片 (建構中)的教学

    回覆
  2. 沈函函
    沈函函 says:

    試做都有成功耶!!太感謝您了!
    我跟大家一樣都沒有概念,完全一頭霧水。但是您教的真的比書更容易懂多了
    期待下一章~~

    回覆

發表評論

Want to join the discussion?
Feel free to contribute!

發佈回覆給「kent」的留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *