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> 以列表的方式呈現,如下



任點一個連結,我們就連到 W3C 的網頁文章哩!



中英文術語對照
絕對路徑absolute path
相對路徑relative path
瀏覽器broswer
協定protocol
屬性attribute


您可以繼續參考



相關目錄
HTML 4.01 快速導覽 - 目錄
HTML, CSS 教材
首頁


參考資料

沒有留言: