程式語言教學誌 FB, YouTube: PYDOING: HTML 4.01 快速導覽

HTML 文件對外的連結，包括腳本程式、樣式表、圖像或多媒體檔案、其他網頁等等，連結採用的路徑有兩種，分別是絕對路徑 (absolute path) 與相對路徑 (relative path) 。

相對路徑的話，例如相同目錄底下的檔案可以直接寫檔名，若是在另一個資料夾，也就是另一個目錄內，就得加上資料夾名稱，然後斜線加檔名，例如

<html>
<head>
<title>網頁標題</title>
</head>
<body>
使用相同目錄底下的另一個目錄 _image
<img src="_image/example.jpg" />
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：example12.html
     功能：示範 HTML 標記語言的使用 
     作者：張凱慶
     時間：西元 2010 年 11 月 -->

利用瀏覽器 (broswer) 開啟，如下

如果檔案在上一層目錄，需要加入 .. ，例如

<html>
<head>
<title>網頁標題</title>
</head>
<body>
使用上一層目錄
<img src="../example.jpg" />
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：example13.html
     功能：示範 HTML 標記語言的使用 
     作者：張凱慶
     時間：西元 2010 年 11 月 -->

瀏覽器開啟，如下

因此，相對路徑的用法就是 / 、 .. 與檔名，依檔案所在位置三者混合使用。

絕對路徑就是完整的網址，最常用的協定 (protocol) 就是 HTTP 囉！例如，我們將 W3C 的 HTML 4.01 文件製作一份超連結的 HTML 文件

<html>
<head>
<title>HTML 4.01 參考文件</title>
</head>
<body>
<a href="http://www.w3.org/TR/html401/">HTML 4.01 Specification</a>
<ul>
 <li>
  <a href="http://www.w3.org/TR/html401/about.html">
  1. About the HTML 4 Specification</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/intro/intro.html">
  2. Introduction to HTML 4</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/intro/sgmltut.html">
  3. On SGML and HTML</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/conform.html">
  4. Conformance: requirements and recommendations</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/charset.html">
  5. HTML Document Representation</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/types.html">
  6. Basic HTML data types</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/struct/global.html">
  7. The global structure of an HTML document</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/struct/dirlang.html">
  8. Language information and text direction</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/struct/text.html">
  9. Text</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/struct/lists.html">
  10. Lists</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/struct/tables.html">
  11. Tables</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/struct/links.html">
  12. Links</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/struct/objects.html">
  13. Objects, Images, and Applets</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/present/styles.html">
  14. Style Sheets</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/present/graphics.html">
  15. Alignment, font styles, and horizontal rules</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/present/frames.html">
  16. Frames</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/interact/forms.html">
  17. Forms</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/interact/scripts.html">
  18. Scripts</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/sgml/intro.html">
  19. SGML reference information for HTML</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/sgml/sgmldecl.html">
  20. SGML Declaration of HTML 4</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/sgml/dtd.html">
  21. Document Type Definition</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/sgml/loosedtd.html">
  22. Transitional Document Type Definition</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/sgml/framesetdtd.html">
  23. Frameset Document Type Definition</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/sgml/entities.html">
  24. Character entity references in HTML 4</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/appendix/changes.html">
  Appendix A: Changes</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/appendix/notes.html">
  Appendix B: Performance, Implementation, and Design Notes</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/references.html">
  References</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/index/elements.html">
  Index of Elements</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/index/attributes.html">
  Index of Attributes</a>
 </li>
 <li>
  <a href="http://www.w3.org/TR/html401/index/list.html">
  Index</a>
 </li>
</ul>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：example14.html
     功能：示範 HTML 標記語言的使用 
     作者：張凱慶
     時間：西元 2010 年 11 月 -->

<a> 為超連結的元素， href 屬性 (attribute) 所設定的就是連結網址，這些連結網址也都是絕對路徑。 <ul> 會使 <li> 以列表的方式呈現，如下