第四單元：連結網頁

新手上路      序   曲      旗   標      控制文字變化      連結網頁      圖   像      圖像變化      結   業

製作連結

歡迎來到第四天的課程，第四單元只介紹一個主題：如何製作連結。現在你應該很熟悉 HTML 的文法了，你應該猜到連結也是用旗標來控制，那我們就來看看如何設定連結至其它網頁。

以連結至 安琪拉的小天地 為例：

<A HREF="http://www.geocities.com/anchichow">安琪拉的小天地</A>

解析：
　

• A 的意義為 Anchor，中文翻譯為"定錨"。
• HREF 的意義為 Hypertext REFerence，中文翻譯為 "超文字" 的 "參考"。記得第三單元提到的屬性控制嗎？HREF 也是一個屬性控制，它宣告定錨旗標的連結屬性。
• http://www.geocities.com/anchichow 是一個完整的網際網路(WWW)地址。它接在等號後面、兩個引號中間，意即它在此作為連結屬性的控制碼。
• 安琪拉的小天地 是真正出現在網頁上的文字。
• /A 是回復旗標，千萬別漏掉了。

我們現在來看看前述範例出現在網頁上的效果：

安琪拉的小天地

先不要按下連結，將你的滑鼠遊標移至連結文字(安琪拉的小天地)的位置，再檢視你的瀏覽視窗底部，它會出現 "捷徑 - anchichow 於 www.geocities.com" 或類似字樣。這個底部區域是供瀏覽程式向你報告它目前的工作或進度之用，通常出現的是 "完成(Document Done)"。

OK！現在你可以按下連結，記得要回來繼續我們的課程，不要太著迷於安琪拉的食譜哦！

連結電子郵箱(E-Mail)的地址

製作電子郵箱的連結和製作一般連結無甚不同，它也使用定錨旗標 <A>。請看下例：

<A HREF="mailto:[email protected]">寄E-Mail給艾爾弗烈德</A>

解析：
　

• mailto: 宣告此連結屬性為電子郵件。
• [email protected] 為艾爾弗烈德的電子郵箱地址。
• 寄E-Mail給艾爾弗烈德 是真正出現在網頁上的文字。

我們現在來看看前述範例出現在網頁上的效果：

寄E-Mail給艾爾弗烈德

同樣地，先不要按下連結，將你的滑鼠遊標移至連結文字(寄E-Mail給艾爾弗烈德)的位置，再檢視你的瀏覽視窗底部，它會出現 "傳送郵件到 [email protected]" 或類似字樣。

OK！現在你可以按下連結，寫封電子郵件給艾爾弗烈德了。