Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this lesson, we're going to talk about relative URLs and these are URLs that don't have all of the different parts and are just relative to the current location of the file that has the link in it. In other words, you have a link like this, which does says here.html. The browser will assume that file exists in the same location as this page here does. And so this page exists on the web at this location. And so we'll just take this last part of it, including the host name and the path all the way up to the file name and I'll just assume that all that part is the same and the only thing that changes is the file name there.
So, let's take a look at this page in browser and you'll see this is loaded up on my website at pw.org and at that path and this is hyperlinks.html. And this link here is the link we're looking at it and it just has this here.html in the link and so when I hover my mouse over the link, you'll see the title bar at the bottom, shows the location of the page that it's going to call up when I click on it and you'll see that location is the same as the location in the title bar, with the exception, then instead of hyperlinks.html, it's got here.html.
So, if I click on that, you'll see that the only part that will change is this last part there. So, I'll go ahead and I'll click on the link and sure enough all the change was that and you've got here.html, instead of hyperlinks.html. So, I'll go ahead and go back to the previous page and you'll see that the visited link color has changed. Likewise, with Over there, this is another link and it has a subdirectory before there part but since there is no slash at the beginning of subdirectory, it's going to go ahead and just use this part here again and it will replace that with the subdirectory/there.html.
So to be in another directory, but it will not replace all of this all the way back to the beginning, because I didn't begin with those slash. If I begin with the slash there, it would replace all of this. But in this case, it's just going to replace that last part, with subdirectory, and there.html. So, I'll go ahead, I'll click on it and you'll see that now we're a directory deeper, and we've there.html and it did exactly what we expected it to do. And this one here has a special notation with these two dots. That means go up a directory.
So in this case, instead of just replacing this part here, it will go up a directory and replace all of this. So, we'll get this, else.html. And actually the link has a dash X at the end of it, so it will be else-x.html and it will start at that directory up one level. So, there we go, else-x. html and it's up a directory. So, I'll go back and now we are in our xhtml links directory again. And finally, this one, this is a link to an image and it will just display the image and likewise it will add this directory after the xhtml links directory here and show that image.
And that image is the parts of the URL, from our last lesson. So, that's how relative links work. Relative links work relative to the current location, the location of the file that has the links in them and they are pretty simple once you understand them.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 92778 Viewers
82 Video lessons · 104214 Viewers
71 Video lessons · 75874 Viewers
56 Video lessons · 107245 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.