URL

超連結

<aside> 💡

HTML 超連結可以參考廖建翔老師的書 (第四章)。

</aside>

在HTML裡的核心就是Hypertext,Hypertext就是附有Hyperlink(超連結)的文字,Hypertext的概念讓網頁與網頁之間的關連變得非常的彈性。連結是以Anchor <a></a>為標籤,在Start Tag中以href (Hyperlink reference)來標示連結,在<a></a>中則是Hypertext的內容。

超連結有兩種,一種是絕對(外部)連結。

<a href="[<http://www.im.fju.edu.tw>](<http://www.im.fju.edu.tw/>)">輔仁大學資訊管理學系</a>

另一種是相對(內部)連結,也就是連到同一個網站的另一個html檔案。

<a href="computer.html">計算機概論</a>

接下來,在VS Code裡,可利用點選「New File」產生另一個html檔案

image.png

可以新增想要的內容 (computer.html),記得檔案名稱要加上「.html」,例如:「computer.html」

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Computer</title>
  </head>
  <body>
    <h1>課程內容</h1>
    <ul>
      <li>Excel</li>
      <li>HTML CSS</li>
      <li>Python</li>
      <li>科技發展簡介</li>
    </ul>
  </body>
</html>

在index.html中加入連結。index.html的完整內容:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Resume</title>
  </head>
  <body>
    <h1>吳濟聰</h1>
    <ol>
      <li>經歷</li>
      <ul>
        <li>
          **<a href="<http://www.im.fju.edu.tw>">**輔仁大學資訊管理學系**</a>**助理教授
        </li>
        <li>輔仁大學學務處學生學習中心主任</li>
        <li>輔仁大學資訊中心校務資訊一組組長</li>
      </ul>
      <li>學歷</li>
      <ul>
        <li>輔仁大學資訊管理學系學士</li>
        <li>Master of Science, University of Maryland</li>
        <li>Doctor of Business Administration, Indiana University</li>
      </ul>
      <li>課程</li>
      <ul>
        <li>**<a href="computer.html">**計算機概論**</a>**</li>
      </ul>
    </ol>
  </body>
</html>

Untitled

點擊「計算機概論」,可以看到: