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
Root-relative paths are commonly used when building and testing sites directly on the web or on a local web server.
Start a Simple Web Server from Any Directory on Your Computer
Open your Terminal (or console), navigate to the directory you want to use and enter the following command:
python -m SimpleHTTPServer 8000
You can view your site at this address: localhost:8000.
Reference: How to use SimpleHTTPServer
If you're building a website
directly on your computer,
0:00
with the web files stored on your hard
drive, the document relative path we've
0:03
been using are the best because you
can open a webpage in the browser for
0:07
example directly off your desktop,
or home directory.
0:11
And all of the images and
links appear and work fine.
0:14
However, there's another type of
path called a root relative path,
0:18
that's commonly used by developers who are
testing their sites directly on the web.
0:22
Workspaces actually creates a simple web
server each time you preview a page.
0:26
So you can use root relative paths
in the pages we're building here.
0:32
Root relative paths begin
with a forward slash,
0:36
followed by a file or directory name.
0:39
And the forward slash indicates
the root of the project.
0:41
So for example, if I change the home link
in articles.html from ../../index to
0:44
just a /,
0:52
the link navigates to the root of the site
which loads index.html by default.
0:57
So now let's go back and change
the other URLs in the NAV from document
1:03
relative to root relative paths by
replacing the ../'s with just the /.
1:08
And even though the article.html
file is nested two folders deep,
1:20
the root relevant links like About,
Articles and Contact,
1:25
navigate back to index.html, and
the specified sections of the page.
1:29
So this is the best part about
using root relative paths.
1:38
Since the forward slash always refers
to the root folder of the site,
1:42
the URLs can remain the same for
every web page.
1:46
They will work even when pages are located
in folders and sub folders like this.
1:49
So for example we can change the path
of our image to a root relative path.
1:54
And the image still appears on the page.
2:03
Keep in mind that root relative links
work only when a website is uploaded
2:06
to a web server or when you have a local
web server running on your computer.
2:10
Now a local server is a simple web
server that runs on your computer.
2:14
And to access the site you're building,
2:18
you don't open the file using
the File > Open menu in the browser.
2:20
Instead, you type in a URL,
usually using an IP address,
2:24
which then points to
a folder on your computer.
2:27
I've added a link to a really simple
server you can use with Chrome,
2:30
if you wanna use root-relative
links when building and
2:33
saving pages directly on your computer.
2:35
Just keep in mind, if you're working with
files that are on your local computer and
2:38
don't have a local web server running,
2:42
root relative links like
this will not work.
2:45
So coming up in the next video,
2:48
you'll learn useful features a elements
provide for composing emails.
2:49
You need to sign up for Treehouse in order to download course files.
Sign up