How to make a relative path. Description of paths: absolute, relative, UNC and URL

When developing a website, you often have to specify paths to files, links to documents, and pages.
In books on computer technologies You can often find the terms absolute and relative paths to files used. Often the author does not explain what a particular path means. The reader is consequently confused when the author subsequently talks about using absolute and/or relative paths.
Let's say you have a website and you need to create a hyperlink (link) to one of the pages of the site. Here you need to choose which path type to use: relative or absolute.

It is very important to understand where which path is needed and how best to use it. An absolute path can only be specified in one way. But relative, unlike absolute, has several uses.
Read more about how and where it is used absolute and relative path to files, I will try to tell you today.

Since I devote most of my time to web technologies, I will give examples related to website creation.

Absolute path

When the link is complete File URL or pages, that's it absolute path. In this case, the protocol used must be present in the address. For example, http://www.site is the absolute path to a specific website. IN in this case absolute path to home page my blog. Where the protocol is http, A www.site domain(name).

If you specify a link to a directory, for example http://yourdomain.ua/web/ then it will be loaded (displayed) index file. This rule applies mainly to static sites. Because when using a programming language, you can create internal routing. Index file is usually a file named index.php, index.html, index.phtml, index.shtml. In order to use a different index file, you need to create a file named .htaccess in the desired directory, and write some directive in it. Modifying and creating the .htaccess file, as well as routing using a programming language, is beyond the scope of this article.

Basically, the absolute path is used when you need to link to another site. In other words, if you want to send a visitor to another site, you need to use an absolute path. Although, this path can be used on your own website. But many people believe that links within a site should be relative.
Using an absolute path can cause some problems. For example, when transferring a site from a local machine to a server (this is if you used local machine addresses in the form http://localhost/sitename.ua/...). Difficulties may arise when there is a need to change the domain (site name). Although all these difficulties can be solved, you will have to spend some time on them.
When there are minuses, there must be pluses. Let's take for example a situation like content being stolen from your website. In practice, I have been convinced more than once that the entire text is stolen, without leaving a back link to the original. So, when using absolute paths, you can get backlinks from the site where the stolen content is located. But this is only if you have internal linking was done using absolute paths. Although this doesn’t always work, I have noticed more than once the appearance of links from other people’s sites on which my content was located.

Digging a little from the topic, I want to briefly talk about it what is URL.

Each web page or document on the Internet has its own unique address, which is called URL.
URL— a uniform locator (location identifier) ​​of a resource. URL stands for Uniform Resource Locator. You can also come across such a decoding as Universal Resource Locator (universal resource locator). This method of writing an address is standardized on the Internet. More general and wide system URI resource identification is gradually replacing the term URL.
URI- This character string, which identifies a resource: document, file, etc. Of course, this refers to Internet resources.

Relative path

Often relative paths are used much more often than absolute paths. Basically, a relative path is specified when you need to send a visitor to another page on your site, or insert an object (for example, an image) on one of the pages. In this case, using relative to the path is quite justified. Depending on the structure of the site, it depends on what form of relative path you need to use. There are two types of relative path: a path relative to the document, a path relative to the site root.

Path relative to document

Exactly path relative to document is used most often. Such links are also called local links. Basically, this path is used when the current and related document (page) are in the same directory. If you move a document to another directory, the path (link) will have to be changed. Although you can also link to documents (pages) from other directories. To do this, the path is written from the current document to the target document (page). In this case, the path relative to the document must be set depending on the directory structure.
Let's take for example simplest structure static site.

Let's assume that every image in the directory images need to be inserted into the appropriate pages home.html, products.html, contact.htm l. In order to insert an image, for example, onto the “home.html” page, you need to specify the path where the image is located. If you use a path relative to the document, you will need to write the following in the page code:

This code for inserting an image on the page is incomplete. Since it does not contain several important attributes, such as width, height, etc. Attribute src, here serves to indicate the path to the file. All other attributes are omitted here, since they are not so important now. The main thing now is that you have an idea of ​​what the path looks like relative to the document.
When using document-relative paths, the absolute path portion is missing. Part of the absolute path is truncated here, both for the current document (page) and for the linked one. Here only the part of the path that is always changing is used.
Let me remind you once again that when using a path relative to a document, you need to take into account the original location of the files.

Let's imagine a situation where the page products.html, will not be located in the root directory of the site (as was the case in the previous example), but in a subdirectory. Now you need to insert the image into the file products.html, which is located deeper than the root directory of the site.

To insert an image into a file products.html you need to return to the root directory. After which, you can use the already known path, which was mentioned just above.

As you can see from the code above, the following has now been added to the path: ../ . Just this sequence of characters ../ and serves to move one directory (level) higher in the directory hierarchy. The path in the above code can be read like this: “Go one directory higher (back), go to the directory images and take the file from there products.png«.
If ../ means moving one directory (level) higher in the directory hierarchy, then the symbol / indicates moving one level down.
Character sequence ../ can be used repeatedly on the go. For example, if the file products.html move into three nested directories, you will need to use the following code:

As can be seen from the previous examples, using paths relative to the document in many cases justified. This type of path is often used in practice, and it can be applied to almost any situation. As I said above, there is also a path relative to the root of the site, which will actually be discussed below.

Path relative to the site root

You probably already realized that paths relative to a document are used very often. But there is one problem when using them. Which is that when the directory structure changes, the paths will have to be changed.
But this problem can be solved by using paths relative to the site root. Where the path is specified from the root directory to the document.
All paths relative to the site root begin with the sign / . Only here, unlike paths relative to a document, this sign is used to indicate the root directory. Because it is used at the beginning of the journey.
The path relative to the site root allows you to move some files without damaging the links. You can only use this type of path on a web server on the Internet, or on a web server located on the local machine.

The web server on the local machine can be . Which will allow you to create an environment on your computer for creating websites and pre-testing them.

The root relative path contains neither http protocol, no domain name. And as I already said, it starts with indicating the symbol / , which points to the root directory. The main page index file is usually located in this directory.

For example, /images/products.png indicates that the file products.png is in the folder images, which is located in the root directory.

The easiest way to determine the root relative path is to take the absolute path and discard the http:// and hostname.

Example
Sometimes it is necessary for information on one page to be used by other pages on the site. This is often done to reduce the amount of repeated code on each page. Let's say there is a file _contact.html, which contains information about telephone numbers, email and contains an image contact.png. (Let it be a small table that will be located on each page of the site.)

The following code is for inserting the "contact.png" image.

The code required to insert one file into another is beyond the scope of this article. It all depends on the programming language used.

I hope you already know what type of path was used in the above code. If not, then look at the document-relative path definition above.
Now, when a visitor visits site pages such as home.html, contact.ntml, he will see a perfectly rendered page. In each of which a file is inserted _contact.html, into which, in turn, an image is inserted contact.png.
In other words, by going, for example, to the page home.html, the following happens: “The main page code is running home.html. Then the page code is inserted and executed _contact.html. Page code _contact.html, says that you need to go to the directory images and take the image from there contact.png«.
If you omit the embed code itself, everything works fine. But if you run the page products.html, then an error will occur. Since the code will try to find the directory images and file contact.png in the directory products. But such a directory does not exist there, which is where the problem actually arises.
It becomes clear that you cannot use a document-relative path here.
Of course, you can use an absolute path here. About the pros and cons this approach I said above.
Generally speaking, this is one of the situations where you should use a path relative to the site root. When using a path relative to the site root, the link will always start with root directory(site root). This type of path will allow you to use code to insert, for example an image, regardless of the site hierarchy and its directories.
Using a path relative to the site root in the example above will avoid problems with inserting an image. Because no matter where this type of path is used, it will always find the file specified in it.
The path relative to the site root is very similar to the path relative to the document. In order to create a path relative to the site root, you need to add the symbol / to the beginning of the journey.

Now the image will be correctly inserted on any page of the site.

I hope I helped you a little to understand what paths exist, and when and where they are used. Now you can use all path types for their intended purpose.

The link address can be either absolute or relative. Absolute addresses must begin with the protocol (usually http://) and contain the name of the site. Relative links are based on the root of the site or current document.

Example 8.2 shows how to create an absolute link to another site.

Example 8.2. Using absolute references

Learning HTML

When you specify a site directory as a link (for example, http://site/css/), the index file is displayed. This is the file that is loaded by default when accessing a directory without explicitly specifying the file name. Typically the index file is a document named index.html.

Absolute links are usually used to point to a document on another network resource, however, it is also possible to make absolute links within the current site. However, this is not often practiced, since such links are quite long and cumbersome. Therefore, relative links are predominantly used within the site.

Links relative to the current document

When creating relative links, you need to understand what value you should specify for the href attribute, since it depends on the original location of the files. Let's look at a few typical options.

1. The files are located in one folder (Fig. 8.4).

This file name is taken only as a sample; on the site, Russian characters with spaces should not be used in file names, and even in different cases.

2. Files are located in different folders(Fig. 8.5).

When the source document is stored in one folder, and the linked one is in the root of the site, then two dots and a slash (/) should be placed in front of the file name in the link address, as shown below.

Two dots in this case mean exit current folder one level higher.

3. The files are placed in different folders (Fig. 8.6).

Now original file is located in two subfolders, and in order to link to the document in the root of the site, you need to repeat the previous example twice.

Link

The situation is similar with any number of subfolders.

4. The files are placed in different folders (Fig. 8.7).

Now the situation is changing, the source file is located in the root of the site, and the file to which you need to link is in the folder. In this case, the path to the file will be as follows.

Link

Note that there are no additional periods or slashes before the folder name. If the file is located inside not one, but two folders, then the path to it is written like this.

Link

Links relative to the site root

Sometimes you can find the path to the file relative to the root of the site, it looks like "/Folder/File name" with a slash at the beginning. Yes, record Courses means that the link leads to a folder named course, which is located at the root of the site, and in it you need to download the index file.

Please note that this form of entry does not work on local computer, but only under the control of a web server.

Absolute paths

In this case, everything is very simple, we indicate the direct path to a file located on another domain. It is possible to specify a shortened path by using two slashes at the beginning without explicitly specifying http or https, and the server itself will substitute the required protocol (extension) according to the server settings. It is important to note that this type is necessary to navigate between sites:
http://google.com

Relative to the site root

In this case, the browser takes the site domain and substitutes the specified link to it. In this case it will work http://site/css/style.css. In the case of http, there is no need to worry about https, since it will be taken in the form in which the page is currently open, that is, with http it will be http. It is also very convenient for transferring certain functionality between different sites or transferring a site from one domain to another without touching the code. A priority way to specify paths to pages and files.

Regarding this page

A less popular method, since it takes the current page and adds a new address to its path ..com/trick/css/style.css . Almost impossible to use in cases where we use CNC.

Using the base tag

In this case, instead of the standard domain substitution, the path from base will be substituted for the relative path. That is, we will receive a file located:
http://site/tricks/css/style.css

Relative and absolute paths in PHP

Everything is very simple, working in file system We will stick to the rules for working with paths in PHP. If we pass the command to the client browser, then HTML paths are used. That is, in the following example, we pass from PHP the path to the browser with the page to which it needs to go. The fact that the browser performed the transition between pages can be seen in address bar:
header("Location: /page2.php");
So, we open page page1.php, and page2.php is written in the address bar, and the whole point is that the browser FIRST loaded page page1.php, and then received information with redirection and LOADED the second page page2.php. In this case, the redirection was on the client (browser) side, which means we use the rules related to HTML (web address).

Absolute path in PHP

An absolute path in PHP is treated as an absolute path from the directory in which the web server is installed. This path can be obtained from:
$_SERVER["DOCUMENT_ROOT"]
If we take this server as an example, its path is: /home/school/public_html/schoolphp, which means that in order to specify the full path to the photo “/photo/img1.jpg”, you need to specify the following path:
getimagesize("/home/school/public_html/schoolphp/photo/img1.jpg"); getimagesize($_SERVER["DOCUMENT_ROOT"]."/photo/img1.jpg");
I would like to note that the site can be located in a subdirectory, that is, for:
http://site/forum/
it can be extremely difficult to use DOCUMENT_ROOT, because the forum (like external script) does not yet know where it will be posted on the site. There are several ways to deal with this problem, let’s list a couple:

1) Create a page as a subdomain.

2) Write the absolute path in the config in config.php, that is:
Core::$ROOT = $_SERVER["DOCUMENT_ROOT"]; getimagesize(Core::$ROOT."/photo/img1.jpg"); // use an absolute path that can be modified
Now you can link your entire site to Core::$ROOT without guilt, and if randomly If you need to change the path to the included file, you can override the value of Core::$ROOT;

Relative to the start file (base)

In many index.php systems there is a single entry point, that is, index.php opens, and other files are connected from it.
include "./modules/allpages.php";
In this case, allpages.php will be connected along the path: /home/school/public_html/schoolphp/modules/allpages.php. This method it is convenient because if you write include in the allpages.php file: include "./modules/module/page.php";, then it will still be searched relative to the entry point, namely index.php:
/home/school/public_html/schoolphp/modules/module/page.php
This is a fairly convenient implementation considering that we clearly know the structure of our application relative to the root index.php. Even if we call any other file and not index.php, the paths will work exactly the same. We called dir.php , which means that the paths will be taken relative to the dir.php file!

What else do you need to know?

I couldn’t help but remind those who forgot or suggest to those who don’t know that you can go back not only deep into directories, but also up (folders back), and their syntax is quite simple:
include "../file.php";
In this case, the directory of this file or the root index.php will be taken and returned 1 folder back, where the file “file.php” will be searched.

DOCUMENT_ROOT is not the only option to get the root path of the site. Let's take a look at the manual: "The document root directory in which the current script is executed is exactly the one specified in configuration file server." This means that if the path is written incorrectly in the configuration file, the entire site will not work. What to do? You can write to the admins and owners of the hosting that hosts the server with the hope that they will correct their shortcomings. Or look for a stable alternative, which is __DIR__ , which is the absolute path to this file, where the file code is running. Let’s say we have a configuration file in the config folder, and so that using __DIR__ we don’t have to go back one folder to the top every time by writing __DIR__"/../" we can safely write __DIR__ into our variable, in the example below I wrote it in a class property (lesson No. 24 , who didn’t get it, use a regular variable):
Core::$ROOT = __DIR__; // Or for old PHP - dirname(__FILE__);
I also wanted to remind you of something interesting and important. According to security, the web server prohibits moving through directories above the site root. That is, the site is located at the following path: /home/school/public_html/schoolphp, but the contents of the /home or /home/school folders will not be available to read.

Can PHP use HTML paths? Yes, in special functions, for example:
file_get_contets("http://site");

Practice

In my old projects I used DOCUMENT_ROOT, now I switched to relative index.php paths "./folder/file".

Zend2, a product from PHP developers, is one of the most complex FrameWorks on this moment It also uses relative paths with a different syntax from mine, that is, “folder/file”.

The IPB.3 forum uses dirname(__FILE__).

Conclusions:

1) In HTML we use paths relative to the site root, namely “/file.php” (The line starts with slash).
2) in PHP we use relatively root file"./file.php" (Line starts with dot and slash), an alternative would be to use a property initialized at the root: __DIR__;
3) Header redirect uses paths from HTML. PHP working with the file system (connecting files, saving and editing images) - with PHP paths.

The article contains pieces of code. Full version you can get it here - https://bitbucket.org/okiseleva/html-and-css-learn/src. Folders - “absolute_path_lvl_1” and all subfolders.

The path can be absolute or relative.

Absolute path

An absolute path is the path from the root folder to the file.

The path consists of all the folders that we need to look at, separated by a slash. Let's look at an example:

/absolute_path_lvl_1/level_2.1/level_3.1/Kevin.png

Absolute path to the file

Relative path

A relative path is a link that points to other pages on your site relative to the web page on which the link already exists.

If we move down the folders, we also separate them using “/”. If you need to go up a level, write “..”

1. The simplest example of a relative path is just a file name. if the file is nearby, simply indicate its name

Hello.png

Relative path, file nearby

2. Go up one folder

../Kevin_lvl_2.png

Relative path 2

3. A more complicated example, from Diff_paths.html to the picture with Kevin

../level_2.1/level_3.1/Kevin.png

Relative path 3

What is the difference between absolute and relative paths?

It's very simple. If the path is specified from the system root, then this is an absolute path. How is that mailing address V real life- no matter where you go, you will always find the right place at the exact address.

If the root is not specified at the beginning of the path, then this path will be relative, and it will be built from the current position. In real life, it's like the road to the liquor store - "two blocks to the left and straight all the way." This path can only be reached from a specific point. From the other you will end up in a completely different place.

In file absolute_path_lvl_1/level_2.2/Diff_paths.html you can see HTML example pages with different file paths.

Here is an example of absolute and relative path for the same file with Kevin.

D:/hgprojects → I downloaded the “html-and-css-learn” project here. You may have another way

PS - more details in the book "

IN this lesson We will explain to beginners what an absolute and relative file path is, and also in which case which one is better to use. If you are already familiar with this topic, you can move on to the next lesson.

So, let's start with the definition of the term “path” itself:

Path (eng. path) - a set of characters showing the location of the file in the file system, the address of the directory.

Wikipedia

If we talk about sites, then the path is the same as the link. Links can be absolute or relative. Let's look at both options in more detail.

What is an absolute file path

https://www.google.com/images/branding/googlelogo.png

Absolute path can be used in CSS. For example, to set an image as the background, you can take the absolute URL to the image file AND specify it in the style sheet:

Background-image: url(http://www.example.com/img/bg.png);

What is a relative file path

With a relative address, everything is much more interesting - it can be counted both from the root of the site and from the current document. Root relative path- this is a path that indicates the location of the file relative to the root directory of the site. In this case, the address contains neither a protocol nor a domain name, and begins with a slash /, which indicates root folder. This address looks like this:

Background-image: url(/img/bg.png);

How to easily determine the root relative address? Just take an absolute link and remove the protocol and domain name from it, leaving the slash and all the characters that come after it.

Relative file path from document is the path to the file relative to the current document. This address depends on the location of the file in which it is written. So, when a relative link is specified in a stylesheet, it calculates the path to the file based on the stylesheet, not on current web page or the root folder. Let's give a few examples.

Example I

If our stylesheet is style.css and the file with background image bg.png are in the same folder (not necessarily the root), then the relative path from the table to the picture will look like this:

Background-image: url(bg.png); /* you just write the file name */

Example II

If the stylesheet is in the root and the image is in the img folder, the relative link will be like this:

Background-image: url(img/bg.png); /* no need for leading slash */

Example III

If the style sheet is in a folder, and the image is adjacent to this folder, then the relative path will be like this:

Background-image: url(../bg.png); /* two dots - go up one level */

Example IV

If the style sheet is in two folders, and the image is adjacent to the first folder, then the relative path will be as follows:

Background-image: url(../../bg.png); /* go up two levels */

Two dots and a slash at the beginning of the relative path mean going up one level. Depending on the number of levels (directories) to which you need to climb, you need to register required quantity dots with slash. For example, if the style sheet is located not in two, but in four folders, the entry, accordingly, will be as follows:

Background-image: url(../../../../bg.png);

In the case where the image is hidden in the img folder, and the style sheet is hidden in the css folder, you will need to exit the css folder and go into the img folder. Like this:

Background-image: url(../img/bg.png);

If there are several folders, you must also register them. Let's change the previous example: imagine that in the img folder there is another backgrounds folder, which contains our drawing. The relative path would be like this:

Background-image: url(../img/backgrounds/bg.png);

Which way is better to use

Absolute link address You will need to use it if the file you are linking to is on another site. Within one site, the absolute path is practically not used (although it will work). This is due to several points: firstly, such links can be very cumbersome, and secondly, if the domain name changes, a problem will arise - all links will lead to the old domain, which can lead to many errors and broken links.

Root relative path will work on a web server, but it is useless when developing on a local computer. But the advantage of this type of links is that you can move your style sheet to any folder on the site and not be afraid that the addresses background images will become unemployed.

Relative path from document - best option when developing web on a local machine without using a server. In the browser, you will be able to view web pages stored on your computer normally, and the file addresses will work. They will work on a live site, but with one condition - if you do not move the style sheet to another place (otherwise you will have to adjust the paths).

Try practicing using relative paths both on your local computer and on your web server. Understanding how this works will certainly be useful to you in any project.

Further in the tutorial: background-repeat property - controls the repetition of the background image.