Microsoft Expression Web - 超連結

本章將學習如何在您的網站中使用超連結。使網路如此廣泛的原因之一是網頁能夠連結到其他網頁。超連結或連結幾乎存在於所有網頁中。

超連結還允許使用者單擊並跳轉到不同的頁面、頁面內的某個位置、圖片或網際網路上的其他位置。以下是超連結的一些重要功能：

Expression Web 的超連結工具和選項使處理超連結變得非常容易。
Expression Web 的超連結檢視和報告也使查詢和修復損壞和不正確的連結變得非常容易。
超連結可以是一個詞、一組詞或一個影像，單擊後將帶您到一個新文件或當前文件中的某個位置。

錨點標籤

在 HTML 中，<a> 標籤（稱為錨點標籤）用於建立指向另一個文件的連結。錨點可以指向另一個 html 頁面、影像、文字文件或 pdf 檔案等。以下是錨點<a> 標籤的基本程式碼。

<a href = "url">Text to be displayed as link<a>

在<a> 標籤中，“href” 屬性用於指定指向文件的連結，錨點標籤的開始和結束之間的文字將顯示為超連結。
當您將游標移動到網頁中的連結上時，箭頭將變成一個小手。
URL 是一個地址，它指定協議、Web 伺服器和檔案路徑。
URL 有兩種型別：絕對 URL 和相對 URL。絕對 URL 包含完整地址，而相對 URL 缺少一個或多個地址部分。但是，Web 瀏覽器會從包含 URL 的頁面獲取缺少的資訊。

示例

讓我們來看一個簡單的示例，其中我們將使用絕對和相對 URL。

步驟 1 - 首先，開啟index.html 頁面，並在主要內容部分新增以下幾行。

<div id = "main-content">  
   <p> Absolute URL Example: </p> 
   <p>  Google </p> 
   <p>  Youtube </p> 
   <p> Relative URL Example: </p> 
   <p>  Home Page 2 </p>  
</div>

以下是index.html 頁面的完整實現。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <style type = "text/css"> 
         #left-nav ul li a:hover { 
            color: #000000; background-color: #116611; 
         } 
      
         #left-nav ul li a:hover { 
            color: #000000; background-color: #66FF99; 
         } 
      </style> 
      <link href = "sample.css" rel = "stylesheet" type = "text/css" /> 
   </head> 
   <body> 
      <div id = "container"> 
         <div id = "header"> </div> 
         <div id = "top-nav"> 
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li> 
               <li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li> 
               <li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li> 
               <li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li> 
            </ul> 
         </div> 
   
         <div id = "left-nav"> 
            <p>Site Navigation</p>  
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li> 
               <li><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></li> 
               <li><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></li> 
               <li><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></li> 
            </ul> 
         </div> 
  
         <div id = "main-content">  
            <p> Absolute URL Example: </p> 
            <p>  Google </p> 
            <p>  Youtube </p> 
            <p> Relative URL Example: </p> 
            <p>  Home Page 2 </p> 
         </div> 
         <div id = "footer"> </div> 
      </div> 
   </body> 
</html>

步驟 2 - 讓我們儲存網頁，您將在主要內容部分看到文字。