curriculum/challenges/english/blocks/lecture-working-with-links/671682dd88e461a8e2620f38.md
A path is a string that specifies the location of a file or directory in a file system. In web development, paths let developers link to resources like images, stylesheets, scripts, and other web pages. There are absolute and relative paths - both are essential when specifying file locations within a file system. Let's look at the two so you can decide which one of them to use and when.
An absolute path is a complete link to a resource. It starts from the root directory, includes every other directory, and finally the filename and extension. The "root directory" refers to the top-level directory or folder in a hierarchy.
If you are linking to a resource on your local machine, use an absolute path, which includes the full directory location of the file. Here's how to link to the about.html file with an absolute path:
<p>
Read more on the
<a
href="/Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/about.html"
>About Page</a
>
</p>
It looks like this because we are starting from the root and going into a folder called Users, then into a folder called user, then into a folder called Desktop, then into a folder called fCC, then into a folder called script-code, then into a folder called absolute-vs-relative-paths, then into a folder called pages to finally get the about.html file.
An absolute URL is a complete address used to access a resource. It includes the protocol - which could be http, https, and file and the domain name if the resource is on the web. Here's an example of an absolute URL that links to the freeCodeCamp logo:
<a href="https://design-style-guide.freecodecamp.org/img/fcc_secondary_small.svg">
View fCC Logo
</a>
In this example, the protocol is https, the domain name is design-style-guide.freecodecamp.org, and the filename is fcc_secondary_small.svg.
Here's what the absolute URL looks like in the browser address bar:
file:///Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/about.html
The URL includes the protocol, file://. It also includes the path, which looks like this: /Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/, and represents the series of folders that lead to the file. And finally, it also includes the about.html, which is the filename and the extension.
An absolute path shows the full location of a file within a file system and is commonly used for resources on a local machine. An absolute URL includes access information - such as the protocol and, for web resources, the domain name - which tells the browser how and where to retrieve the resource.
Now, let's look at the relative path. A relative path specifies the location of a file relative to the directory of the current file. It does not include the protocol or the domain name, making it shorter and more flexible for internal links within the same website. Here's an example of linking to the about.html page from the contact.html page, both of which are in the same folder:
<p>
Read more on the
<a href="about.html">About Page</a>
</p>
So imagine you are on the contact.html page, and because the about.html page is in the same place, you simply get the filename. This is an example of using a relative file path.
So, which should you use and when: an absolute path, an absolute URL, or a relative path? Here are the rules you should follow:
Use absolute paths when you want to reference a resource from a fixed location, such as from the root of your site or a known directory on your local machine.
Use absolute URL when linking to a resource hosted on an external website.
Use relative paths when linking to resources within the same website.
Use relative paths if you want to keep your code cleaner and easier to maintain during development.
Use relative paths during local testing to ensure links work without an internet connection.
What are the two types of paths?
Resolute and absolute paths.
One type starts from the root and the other depends on the current location.
Absolute and ultimate paths.
One type starts from the root and the other depends on the current location.
Relative and unique paths.
One type starts from the root and the other depends on the current location.
Absolute and relative paths.
4
How do you link to a resource available only on the internet?
Absolute URL.
Absolute path.
Think about the path that has to have an http or https protocol.
Relative path.
Think about the path that has to have an http or https protocol.
Both relative and absolute paths.
Think about the path that has to have an http or https protocol.
1
Which protocol is used for an absolute URL on a local machine?
http://
Think about the protocol for accessing local files.
https://
Think about the protocol for accessing local files.
file://
localhost
Think about the protocol for accessing local files.
3