1 00:00:00,610 --> 00:00:03,270 If you're building a website directly on your computer, 2 00:00:03,270 --> 00:00:07,090 with the web files stored on your hard drive, the document relative path we've 3 00:00:07,090 --> 00:00:11,610 been using are the best because you can open a webpage in the browser for 4 00:00:11,610 --> 00:00:14,590 example directly off your desktop, or home directory, 5 00:00:14,590 --> 00:00:18,220 and all of the images and links appear and work fine. 6 00:00:18,220 --> 00:00:22,190 However, there's another type of path called a root relative path, 7 00:00:22,190 --> 00:00:26,860 that's commonly used by developers who are testing their sites directly on the web. 8 00:00:26,860 --> 00:00:32,210 Workspaces actually creates a simple web server each time you preview a page. 9 00:00:32,210 --> 00:00:36,035 So you can use root relative paths in the pages we're building here. 10 00:00:36,035 --> 00:00:39,183 Root relative paths begin with a forward slash, 11 00:00:39,183 --> 00:00:41,653 followed by a file or directory name. 12 00:00:41,653 --> 00:00:44,720 And the forward slash indicates the root of the project. 13 00:00:44,720 --> 00:00:52,520 So for example, if I change the home link in articles.html from ../../index to 14 00:00:52,520 --> 00:00:57,660 just a /, 15 00:00:57,660 --> 00:01:03,400 the link navigates to the root of the site which loads index.html by default. 16 00:01:03,400 --> 00:01:08,199 So now let's go back and change the other URLs in the nav from document 17 00:01:08,199 --> 00:01:13,607 relative to root relative paths by replacing the ../'s with just the /. 18 00:01:20,630 --> 00:01:25,323 And even though the article.html file is nested two folders deep, 19 00:01:25,323 --> 00:01:29,522 the root relevant links like About, Articles and Contact, 20 00:01:29,522 --> 00:01:34,568 navigate you back to index.html, and the specified sections of the page. 21 00:01:38,950 --> 00:01:42,460 So this is the best part about using root relative paths. 22 00:01:42,460 --> 00:01:46,770 Since the forward slash always refers to the root folder of the site, 23 00:01:46,770 --> 00:01:49,640 the URLs can remain the same for every web page. 24 00:01:49,640 --> 00:01:54,540 They will work even when pages are located in folders and sub folders like this. 25 00:01:54,540 --> 00:02:00,048 So for example we can change the path of our image to a root relative path. 26 00:02:03,719 --> 00:02:06,170 And the image still appears on the page. 27 00:02:06,170 --> 00:02:10,670 Keep in mind that root relative links work only when a website is uploaded 28 00:02:10,670 --> 00:02:14,480 to a web server or when you have a local web server running on your computer. 29 00:02:14,480 --> 00:02:18,990 Now a local server is a simple web server that runs on your computer. 30 00:02:18,990 --> 00:02:20,620 And to access the site you're building, 31 00:02:20,620 --> 00:02:24,220 you don't open the file using the File > Open menu in the browser. 32 00:02:24,220 --> 00:02:27,840 Instead, you type in a URL, usually using an IP address, 33 00:02:27,840 --> 00:02:30,290 which then points to a folder on your computer. 34 00:02:30,290 --> 00:02:33,430 I've added a link to a really simple server you can use with Chrome, 35 00:02:33,430 --> 00:02:35,810 if you wanna use root-relative links when building and 36 00:02:35,810 --> 00:02:38,160 saving pages directly on your computer. 37 00:02:38,160 --> 00:02:42,920 Just keep in mind, if you're working with files that are on your local computer and 38 00:02:42,920 --> 00:02:45,000 don't have a local web server running, 39 00:02:45,000 --> 00:02:48,300 root relative links like this will not work. 40 00:02:48,300 --> 00:02:49,680 So coming up in the next video, 41 00:02:49,680 --> 00:02:53,580 you'll learn useful features a elements provide for composing emails.