連 結 標 籤 教 學
事前解說
連結 ( 超連結 ) 的指令很簡單就是<A>
而在網路上其實不就是到處連來連去的嗎,所以連結標籤是很重要的東西
不過連結這個標籤很危險哦,用的時候一定要結尾,尤其到留言版留言時要更小心使用,不過其實每個 HTML的語法都要結尾,除了不須結尾的語法以外
 連結格式說明
其實連結不只可以連結網頁,文件 ( HTTP ) , 檔案傳輸 ( FTP ) , 新聞群組 ( NEWS ) ...等等的, 不過常用的也只有HTTP及FTP兩種
連結還有一個常用的功能,但用的不多,一頁通常會用個一次,那就是寄E-MAIL,常看到按一段文字,或按個圖片 就會跑出郵件程式 ( 寫E-MAIL )
 HREF
HREF是用來指定所要連結到的地方 ( 包括路徑及檔名,或只有路徑,只有檔名 )
而在<A>和</A>之間,可以打上文字插入圖片,而在<A>和</A>之間的東西 則是連結時所會出線底線會外框,就表示按這個地方就可以連結到別地去了哦
<A HREF="image/ex71.gif">按這裡會看到可愛的小綿羊哦</A>
按這裡會看到可愛的小綿羊哦相對位置含路徑檔名

<A HREF="index.htm">按這裡會回到教學文件首頁</A>
按這裡會回到教學文件首頁相對位置只有檔名

<A HREF="ftp://ftp.ht.net.tw">按這裡會到仲琦的FTP站</A>
按這裡會到仲琦的FTP站絕對位置只有路徑

<A HREF="http://members.xoom.com.tw/larry629/teach/TEACH.zip">按這裡下載本教學文件</A>
按這裡下載本教學文件絕對位置含路徑檔名

 圖片取代文字
其實很簡單,只要將剛才中間那些文字換成圖片就可以了,就是把圖片插入
<A HREF="image/ex71.gif"><IMG SRC="image/ex71.gif"></A>

其實圖片取代文字很簡單,要說明的是圖片來連結的話會出現邊框,而這樣是不是有點難看, 而解決的方法,就是在IMG標籤中把BORDER值設為0
<A HREF="image/ex71.gif"><IMG SRC="image/ex71.gif" BORDER=0></A>

 寄E-MAIL
寄E-MAIL也很簡單,只要把所要連結的位置填上MAILTO:再加上E-MAIL 置
<A HREF="mailto:larrychen@ms1.url.com.tw"><IMG SRC="image/ex71.gif" BORDER=0>larrychen@ms1.url.com.tw</A>
larrychen@ms1.url.com.tw
上面的例子是圖片加上文字,從這看出只要是在兩個A標籤中的東西都會變成連結,而一但沒結尾,就會在這指令的後的所有東西都變成連結了哦
 NAME屬性
NAME就是名字的意思,其功能在於一個文章中有分,章,節,可能你只要讀某一部份, 但是這個剖份在整份文章中間,而當我們瀏覽是都是從文件最上面開始瀏覽,若想直接跳到所要的地方 ,這時NAME就可以發揮功能了哦,這個功能都用在自己做的文件中而以哦
 目的地用法
就是你想要連結到的那個部份,其位置放在所要連到地方的前面,而這我們給它一個名字EX1
<A NAME="EX1">

 來源地用法
這位置和連結用法一樣,愛放那自己決定,而置則是加我們給它的名字EX1
<A HREF="#EX1">按這裡跳到目的地哦</A>
按這裡跳到 連結格式說明

這個<A NAME="EX1">的目的地我是放在這頁中的 連結格式說明 ,所以你按下去會跳到上面的 部份去,這就是NAME的功能了

 連到其它頁中的某一部份
目的地用法一樣,是放在所要連結到的那一頁中的某一部份前面
來源地用法其實只是合在一起而以
<A HREF="page7.htm#EX2">按這裡跳到圖片標籤的 SRC屬性 </A>
按這裡跳到圖片標籤的 SRC屬性
 連結顏色設定
你是否有看過別的網頁連結時的顏色,有不一樣例如黃色,白色等,現在就告訴你, 有關連結顏色的屬性,這個屬性是加在BODY標籤中下這個指令,而且對那一頁所有的連結都會產生做用的 依我所知好像沒法對單一連結下不同的顏色
LINK還未連結過的文字顏色
VLINK己經參觀或連結過的文字顏色
ALINK滑鼠指標按可連結文字上的文字顏色
而要設定顏色和之前所說的顏色設定方式都一樣
<BODY LINK=#FF0000 VLIKN=#FFFF00 ALINK=#FFFFFF>
當然可以只使用三個之中的一個或兩個,不必全用,若沒使用,則會以瀏覽器中預設值為準了
 去除文字連結底線
有沒有看到本教學文件每頁最下面的連結都沒出現底線,要怎麼做才會如些,用法很簡單只要將 STYLE="text-decoration: none"加入即可,要加在那看範例就知到了
<A HREF="image/ex71.gif" >按這裡會看到可愛的小綿羊哦</A>
按這裡會看到可愛的小綿羊哦
 
<A HREF="image/ex71.gif" STYLE="text-decoration: none" >按這裡會看到可愛的小綿羊哦</A>
按這裡會看到可愛的小綿羊哦

這個使連結底線去除,好像不是HTML語法而是CSS的指令,不過因為不會很難,所以把它加進來告訴大家了

 TARGET屬性
你有沒有發現當你按下連結後,連結的東西會在你原本那個視窗秀出來,而每次都還要用回上一頁來回到原本那一頁 現在你只要用TARGET即可,開啟一個新視窗來顥示 ( 這是是TARGET中的一小部份,其最大功用在框架標籤部份會說明的 )
<A HREF="image/ex71.gif" TARGET="_NEW">按這裡會看到可愛的小綿羊哦而且是新開一個視窗哦</A>
按這裡會看到可愛的小綿羊哦而且是新開一個視窗哦

TARGET屬性的值不只NEW一個而以,而其它部份在框架會說明到的

本章範例
<HTML>
<HEAD>
<TITLE>連結標籤教學 </TITLE>
</HEAD>
<BODY LINK=#FF0000 VLIKN=#FFFF00 ALINK=#FFFFFF>
<A HREF="../index.htm">按這裡會回到教學文件首頁</A> <P>

<A HREF="ftp://ftp.ht.net.tw">按這裡會到仲琦的FTP站</A> <P>

<A HREF="http://members.xoom.com.tw/larry629/teach/TEACH.zip">按這裡下載本教學文件</A> <P>

<A HREF="../image/ex71.gif" STYLE="text-decoration: none" >按這裡會看到可愛的小綿羊哦</A> <P>

</BODY>
</HTML>

範例效果

作者:  醒吾技術學院  國貿系  陳義元  E-mail
完成日期:1999年2月24日

[ 上一頁 | 回主頁 | 下一頁 ]