In the introductory lecture I showed a couple of elements that require the use of URLs in one of their attributes. The img element has a src attribute that points to the image file we want to display. The a element has an href attribute the specifies the page the link should go to.
In both cases you can use a full URL.
In many projects you will be setting up internal links that point to files that are in the same folder as the current page. In those cases you can get away with shorter, simpler URLs, called relative URLs.
Click the button at the top of this page to download an archive that contains a simple example project. In the archive is a folder containing several files and subfolders that together make up a simple multi-file example project.
Here is how the files and subfolders in that project are organized:
more there is a third html file, three.html.images contains an image file, one_way.png.If you look at the source code for each of the html files you will see that I have set up a system of links that allow you to navigate from one.html to the other two html files. Also, each of the three html files contains an img element that will load the image file from the images folder.
All of the links in this set of example files are internal links that point to other files in the same project directory. In HTML these kinds of links are quite common, and HTML makes it easy to use these kinds of links in a project. Below you will see several examples of these relative links and how I set them up.
The first file, one.html, contains a link to the second file, two.html. Since both of these files are in the same directory, linking from one file to the other simply requires us to use the name of the file we want to link to:
<a href="two.html">page two</a>
File two contains a link to file three. Since file three is located in a subfolder, we have to provide the name of the subfolder followed by the name of the file in the subfolder:
<a href="more/three.html">page three</a>
Finally, file three links back to file one. Since file one is in the directory above the directory where file three is located, to navigate to one from three we have to go up a level. To do that we use the .. command:
<a href="../one.html">page one</a>
Each of the three files also contains an img element that will load the picture stored in the images folder. Here is how those three img elements are set up.
From files one and two we do this:
<img src="images/one_way.png" alt="One way sign">
From file three we do this:
<img src="../images/one_way.png" alt="One way sign">
In this last example we have to first use .. to move up one level from the more folder, then we can go into the images folder to get the image file we want.