HTML 4.01 快速導覽 - 絕對路徑與相對路徑

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



相對路徑的話，例如相同目錄底下的檔案可以直接寫檔名，若是在另一個資料夾，也就是另一個目錄內，就得加上資料夾名稱，然後斜線加檔名，例如
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<title>網頁標題</title>
</head>
<body>
使用相同目錄底下的另一個目錄 _image
<img src="_image/example.jpg" />
</body>
</html>
 
<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：example12.html
     功能：示範 HTML 標記語言的使用
     作者：張凱慶
     時間：西元 2010 年 11 月 -->


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



如果檔案在上一層目錄，需要加入 .. ，例如
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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 文件
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<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 教材
首頁


參考資料

標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)