Root-relative Paths

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