HTML連結篇

網路○泡泡○新聞 Internet Pop-up News：網站建置：HTML連結篇

○HTML連結篇○

HTML使用超連結(hyperlink)連到網路的另一個頁面。

○範例

創造超連結
這個範例示範如何在HTML文件中創造連結。

<html>
<body>
<p>
<a href="index.htm">
這個連結</a> 會連到這個網站的首頁。
</p>
<p>
<a href="http://www.kimo.com.tw/">
這個連結</a>會連到奇摩站。
</p>
</body>
</html>

以圖檔作連結
這個範例示範如何使用圖檔作連結。

<html>
<body>
<p>
你可以使用圖檔作連結：
<a href="index.htm">
<img border="0" src="button.gif" width="120" height="60">
</a>
</p>
</body>
</html>

○下錨(Anchor)標籤與超文件參考標的(Href, Hypertext REFerence)屬性

HTML使用<a>下錨標籤來創造連結到另一個頁面。

下錨可以指向網路的任何資源：網頁、圖檔、聲音檔、影像檔等等。

下錨的句型如下：

<a href="網址">要呈現的頁面</a>

<a>標籤是用來創造所要連結的錨，href屬性是用來說明所要連結的頁面，而在下錨標籤開始與結束之間的文字會呈現出超連結。

這個錨定義到網路泡泡新聞的連結：

<a href="http://home.kimo.com.tw/jeannylei/">歡迎來網路泡泡新聞！</a>

上面這一行在瀏覽器裡看起來像這樣：

歡迎來網路泡泡新聞！

○標的(Target)屬性

標的屬性是用來定義連結的頁面在哪裡打開。

下面這行會讓頁面在瀏覽器的新視窗中呈現：

<a href="http://home.kimo.com.tw/jeannylei/" target="_blank">歡迎來網路泡泡新聞！</a>

○下錨標籤與名稱屬性

名稱屬性是用來創造一個指名的錨。使用指名的錨所創造的連結，可直接跳向頁面上指定的區域，方便使用者更容易找到正確的位置，不必費力到處搜尋。

指名的錨句型如下：

<a name="籤條">要呈現的內文</a>

名稱屬性是用來創造一個指名的錨。錨的名稱可以是你想要使用的任何內文。

以下這行定義一個指名的錨：

<a name="Href">Href屬性</a>

你應該注意到一個指名的錨並未以特殊的方式呈現。

要連結到指名的連結，必須在網址後面添加#和錨的名稱，如下例：

以上這行會將使用者直接帶到"website14.html"這個頁面的錨<a name="Target">... </a>的內文處。

在"website14.html"這個檔案裡面建立"標的屬性"的超連結，寫法如下：

○基本附註──實用秘訣

在次一層參考標的之後添加一個反斜線。如果你的連結像這樣：href="http://home.kimo.com.tw/jeannylei"，你會對伺服器產生兩個HTTP的要求，因為伺服器會在地址之後添加一個反斜線，並創造一個新的要求像這樣：href="http://home.kimo.com.tw/jeannylei/"。

指名的錨通常用於冗長文件的開頭創造"目錄"(table of contents)。在文件裡的每一章都設定一個指名的錨，並將這些錨的連結放在文件的頂端。

如果瀏覽器無法找到已設定的指名的錨，它會回到文件的頂端。不會發生錯誤的網頁。

○更多的範例

開啟連結在新的瀏覽器視窗
這個範例示範如何藉由新開視窗連結到另一個網頁，如此網友就不必離開你的網站。

<html>
<body>
<a href="lastpage.htm" target="_blank">上一頁</a>
<p>
如果你設立一個連結的標的屬性為"_blank"，這個連結會新開一個視窗。
</p>
</body>
</html>

連結到同一頁的某個位置
這個範例示範如何利用連結跳到文件的另一個部分。

<html>
<body>
<p>
<a href="#C4">
請看第四章
</a>
</p>
<p>
<h2>第一章</h2>
<p>這一章主要是說明...</p>
<h2>第二章</h2>
<p>這一章主要是說明...</p>
<h2>第三章</h2>
<p>這一章主要是說明...</p>
<a name="C4"><h2>第四章</h2></a>
<p>這一章主要是說明...</p>
<h2>第一章</h2>
<p>這一章主要是說明...</p>
</body>
</html>

自框架中跳離
這個範例示範如何自框架中跳離，如果你的網站被框架鎖住了。

<html>
<body>
<p>被鎖在框架裡了？</p>
<a href="http://www.kimo.com.tw/"
target="_top">點這裡！</a>
</body>
</html>

創造郵件連結
這個範例示範如何連結郵件訊息(只有在你輸入郵件地址時才有效)。

<html>
<body>
<p>
這是一個郵件連結：
<a href="mailto:jeannylei@email.com?Subject=Hello again">
寄信給我</a>
</p>
</body>
</html>

創造郵件連結二
這個範例示範如何創造一個更複雜的郵件連結。

<html>
<body>
<p>
這是另一個郵件連結：
<a href="mailto:jeannylei@email.com?
cc=jeannylei@yahoo.com&
bcc=jeanny.lei@msa.hinet.net&
subject=Summer%20Party&
body=You%20are%20invited%20to
%20a%20big%20summer%20party!">寄信給我</a>
</p>
<p><b>
注意：</b>在字與字之間的空格應該以%20來代替(不要直接空格)。
如此瀏覽器才會在郵件裡正確地呈現你的內文。
</p>
</body>
</html>

○連結標籤與標的屬性

NN代表Netscape，IE代表Internet Explorer，W3C代表網路標準

開始標籤	NN	IE	W3C	目的
<a>	3.0	3.0	3.2	定義一個錨

標的屬性	目的
target="_blank"	將新文件下載到新的空白視窗
target="_self"	將新文件下載到同視窗中的錨(預設)
target="_parent"	將新文件下載到父層框架(有使用框架時)
target="_top"	將新文件下載到整個瀏覽器的視窗中(跳離框架的好方法)

Today's Pup-up News

網路○泡泡○新聞 Internet Pop-up News

  首頁

  網路資訊

  網路媒體

  電子商務

  網站建置

  電腦資訊

  學習日誌

  靈力補給站

  新鮮玩意兒

  EMAIL