Get me outta here!

網頁教學:加入超連結(hyperlink)

壹、超連結之紹介 

      超連結(hyperlink),係指在網頁內容中之文字或圖片加入特定之連結,所以在瀏覽網頁時,當瀏覽者點選網頁內容中之文字或圖片,會立刻被引導到另一個網頁內容、檔案及FTP站,或是當使用者按下連結時,會自動開啟建立E-mail的畫面。

      通常在進行網頁設計時,設計者常有將有設定超連結的文字或圖片會以一些特殊的方式來顯現,用以區別其和網頁內容中其它一般文字與圖片之不同,其顯示之方式有很多種,如不同的文字顏色、大小、有無底線或樣式,或是當滑鼠移動到超連結位置時,滑鼠游標會變成小手之形狀。【小提示:若無特定指定超連結文字與圖片之顯示方式,一般預設是以加上底線的藍色字體顯示,而且當滑鼠游標移動到具有超連結之文字與圖片之位置時,游標會變成小手的形狀,示如圖1。】

超連結:預設樣式 圖1  具有超連結之文字與圖片之預設顯示方式

貳、如何加入超連結設定 

一、超連結的語法

      不管是文字或圖片皆可加上超連結,超連結標記的輸入語法如下所示:

<a href="預連結之網址或檔案路徑">文字或圖片</a>

二、超連結標記之屬性

1.<href>屬性

      <href>屬性係設定該連結所要連結的網址或檔案路徑。

2. <target>屬性

      <target>屬性係設定連結的網頁開啟方式。常用的方式有以下幾種:

   (1)在新視窗開啟

      連結的目標網頁會在新的視窗開啟 。其語法如下(示如圖2及圖3):

                    <a href=〝預連結之網址或檔案路徑〞target="new" >文字或圖片</a>
              或是<a href=〝預連結之網址或檔案路徑〞target="_blank" >文字或圖片</a>

   (2)在目前的視窗中開啟

      連結的目標網頁會在目前的視窗開啟。其語法如下:

                    <a href=〝預連結之網址或檔案路徑〞target="_parent">文字或圖片</a>

   (3)在目前執行的視窗中開啟(預設值)

      連結的目標網頁會開啟在目前執行的視窗中。其語法如下:

                    <a href=〝預連結之網址或檔案路徑〞target="_self">文字或圖片</a>

超連結:標記之使用

圖2  超連結標記之語法

超連結:標記之使用2

圖3  具有超連結之文字之預設顯示方式