Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
To display an image or link to another page on your site, you need to understand where the file "lives" within the folder structure of the site. In this video, we'll look at examples of how to adjust your file paths based on the directory a file is in.
Resources
Related Videos
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hey there.
0:04
Adding images and
links is a big part of building websites.
0:05
To add an image to a page, or
link to another page in your site,
0:09
you need to understand where that image or
page lives.
0:12
In other words, where is the image or page
within the folder structure of the site?
0:16
For example, you might want to add a photo
that's inside a folder named images or
0:20
link to a page that's inside
a folder named books,
0:26
which is inside another
folder named products.
0:29
So to link to other pages, and reference
resources of your site like images,
0:32
you provide a file path, that instructs
one file where another file is.
0:36
The file path is what describes
the location of a file
0:41
in a website's folder structure.
0:45
So you've learned that when linking
to files within the same site,
0:47
you do not need to specify the full URL,
including the https:// or
0:51
the domain name in the file path
like we do with absolute URLs.
0:57
So for example,
to link to the article page,
1:01
we simply include the path to the filename
article.html and the links href value.
1:04
These types of URLs are called relative
URLs because the file path you
1:10
specify depends on or is relative
to where your HTML document lives.
1:15
Relative URLs provide a shorthand way
of letting the browser know where to
1:21
find your file.
1:25
The top level folder in a site,
or the folder
1:26
that holds all the files in other folders,
is called the root directory.
1:29
So currently all of our files are in just
one directory, the root of the site.
1:34
So we can link to any file, by including
just the file name, article.html for
1:39
example, however, websites are usually
organized by placing resources and
1:44
files for different section of
the site into separate folders.
1:49
For example, the articles in one
folder and images in another folder.
1:53
So now let's look at a few examples
of how to adjust your file paths
1:57
based on the directory a file's in.
2:01
First, lets add a new folder for articles.
2:03
So in our workspaces menu, we'll select
File > New Folder, and name it articles.
2:06
Then select and
drag article.html into the new folder.
2:14
So the article's folder
is a child directory, or
2:20
subdirectory, of the root folder.
2:23
Over in the browser,
2:26
clicking one of the Read more links in
index.html returns a Not Found page.
2:28
So now we'll need to adjust
the link's path to indicate where
2:34
article.html is in relation to index.html.
2:39
So to reference or link to a file that's
inside a sub folder like articles, you
2:43
include the name of the folder, followed
by a forward slash and the file name.
2:48
So in our Read more link's href
value we'll type the name of
2:54
the folder which is articles/article.html.
2:58
Now let's do the same for the next link.
3:02
Folder name forward slash
followed by the file name.
3:05
Save our file, we'll refresh the page.
3:10
You'll see that the Read more links
now take you back to the article.
3:14
Now to link to a file that's
inside a parent or root folder,
3:21
from within a sub folder like articles,
you'll need to instruct the browser
3:25
to go up one level, out of the current
folder, and up to its parent folders.
3:31
For example, in article.html to
set the Home link in the nav,
3:36
to navigate to index.html,
from inside this sub folder
3:42
you will need to include
../ in the href value.
3:47
Then, after the forward slash,
include the file name to link to,
3:51
in this case index.html.
3:55
So each ../ instructs
the browser to go up one level
3:57
out of the current folder and
up to its container folder.
4:02
So over in the browser, let's click
Read more to bring up the article page.
4:06
And clicking the Home link
takes us back to index.html,
4:10
because the value tells the browser
to go back to the root folder and
4:15
display index.html.
4:21
So now let's create
a subfolder of articles and
4:23
we'll name this folder 2017, and
place article.html inside it.
4:27
If we go back to the browser,
refresh, and click Read More,
4:38
we once again get the Not Found page.
4:41
So now,
to link to a file inside this subfolder,
4:43
that's two levels deep from the root
of the project, you include
4:48
articles, then a forward slash, followed
by the name of the subfolder, 2017,
4:56
followed by another forward slash,
then the file name.
5:01
So now, can you figure out how to link
back to index.html from this subfolder?
5:18
Feel free to pause the video and try it.
5:25
Since each ../ instructs the browser to go
up one level out of the current folder,
5:33
we'll need to include two to
move up two directories or
5:39
back up to the root directory
where index.html is located.
5:43
Give that a save.
5:48
Let's refresh the article page, and
5:50
clicking Home takes us back
to our home page, perfect.
5:52
So in the next video, you'll get more
practice writing relative file paths,
5:56
by adding images to the page.
6:00
See you then.
6:02
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up