HTML beginners often encounter such a problem, how to correctly reference a file. For example, how to quote another HTML page as a hyperlink in one HTML page? How to insert an image into a web page
If you use the wrong file path when referring to a file (such as adding a hyperlink, or inserting an image, etc.), the reference will be invalid (cannot browse the linked file, or cannot display the inserted image, etc.).
To avoid these errors and correctly referencing files, we need to learn about HTML paths.
There are two ways to write HTML: relative paths and absolute paths.
HTML Relative Path
File references to the same directory
If the source file and the reference file are in the same directory, just write the reference file name directly.
We now create a source file info.html, and info.html you need to refer to the index.html file as a hyperlink.
Assume that the info.html path is: c:/Inetpub/wwwroot/sites/blabla/info.html
Assume that the index.html path is: c:/Inetpub/wwwroot/sites/blabla/index.html
The code to add index.html hyperlink to info.html should be written like this:
<a href = index.html>index.html</a>
How to represent the previous directory
../ represents the previous directory of the directory where the source file is located, ../../ represents the previous directory where the source file is located, and so on.
Assume that the info.html path is: c:/Inetpub/wwwroot/sites/blabla/info.html
Assume that the index.html path is: c:/Inetpub/wwwroot/sites/index.html
The code to add index.html hyperlink to info.html should be written like this:
<a href = ../index.html>index.html</a>
Assume that the info.html path is: c:/Inetpub/wwwroot/sites/blabla/info.html
Assume that the index.html path is: c:/Inetpub/wwwroot/index.html
The code to add index.html hyperlink to info.html should be written like this:
<a href = ../../index.html>index.html</a>
Assume that the info.html path is: c:/Inetpub/wwwroot/sites/blabla/info.html
Assume that the index.html path is: c:/Inetpub/wwwroot/sites/wowstory/index.html
The code to add index.html hyperlink to info.html should be written like this:
<a href = ../wowstory/index.html>index.html</a>
How to represent the following directory
Refer to the files in the lower directory and write the path to the files in the lower directory directly.
Assume that the info.html path is: c:/Inetpub/wwwroot/sites/blabla/info.html
Assume that the index.html path is: c:/Inetpub/wwwroot/sites/blabla/html/index.html
The code to add index.html hyperlink to info.html should be written like this:
<a href = html/index.html>index.html</a>
Assume that the info.html path is: c:/Inetpub/wwwroot/sites/blabla/info.html
Assume that the index.html path is: c:/Inetpub/wwwroot/sites/blabla/html/tutorials/index.html
The code to add index.html hyperlink to info.html should be written like this:
<a href = html/tutorials/index.html>index.html</a>
HTML Absolute Path
The HTML absolute path refers to the complete path of a file with a domain name.
Suppose you register the domain name www.VeVb.com and apply for a virtual host, your virtual host provider will give you a directory, such as www, which is the root directory of your website.
Suppose you put a file index.html in the root directory of www, the absolute path to this file is: https://www.VeVb.com/index.html.
Suppose you create a directory called html_tutorials in the root directory of www, and then place a file index.html in that directory, and the absolute path to this file is https://www.VeVb.com/html_tutorials/index.html.