Understanding File Paths6:03 with Guil Hernandez
To display an image or link to another page in your site, you need to understand where the file "live" 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.
[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 two 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/2017/article.html. 4:56 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 up