Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

HTML Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Root-relative Paths

2:54 with Guil Hernandez

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

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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 you 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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up