Most web sites include links in their content. In fact, linking may be one of the biggest reasons to create a web site! Links let you easily tie together and reach information. An "internal" link is one that links to another page inside your own site. These links are what make navigating your web pages possible.
So far we've used the anchor <a> link to access a bookmark on the same page using an href attribute like "#top". But what if you want to send readers to a completely different page on your web site? This is where internal links come in handy. The href attribute should contain a path to your target page on your web server or file system.
In order to link to another page on your web site, you need to know two things: the target page path and filename. Remember that each page on your web site is a file such as "index.html", and all of your files live somewhere in your root directory or some sub-folder underneath that root.
Relative Paths
A "relative" path is one that starts from your current location and leads to a target location. This is similar to how a GPS would give you turn-by-turn navigation directions to take your car to some destination. Your href attribute can contain a relative path to the page you want to target with an <a> hyperlink.
If both the original file and the target file are in the same directory, then the relative path is very simple - it's just the name of the target page itself, without any other path information.
Please <a href="mypage.html">follow me</a>! <!-- relative path to a file in the same directory --> Relative paths are a bit more complex if your source and target web page files are in different sub-directories. Let's think about a tree branch that has a bunch of smaller branches and leaves on it. Each branch (given a number in this image) is like a sub-folder and each leaf can be a file. The home page, "index.html", is located in the root folder, labeled (1) to the right. The root folder is as far left as you can go in your web site directory structure.
Now, imagine that we have a caterpillar named Clyde that likes to move from leaf to leaf, because Clyde is always hungry! Clyde needs to find a branch with a leaf on it (or, in website terms, find a folder with a file in it). Since Clyde doesn't see very well, we need to give him careful directions from his current location to find other leaves.
Clyde is currently munching on a leaf while sitting on branch (2). The first leaf you want to direct him to is called "Yummy". Because the "Yummy" leaf is on the (2) branch, your directions to the leaf can simply be "Yummy" without telling him to move to any other branch.
Next let's direct Clyde to the "Tasty" leaf. He needs to go down branch (3) and branch (4) to reach that leaf, so we'll write the directions as "3/4/Tasty". This means to follow branch (3) and branch (4) from the current location to reach the "Tasty" leaf. If we wanted to reach the "Juicy" leaf instead we would give directions as "5/Juicy" because Clyde needs to follow the (5) branch from the current location.
What if we wanted to direct Clyde to the "Spicy" leaf on the lower branch? From our current location at branch (2) we actually need to go "up" toward the root directory. You can use the special symbol "../" to send Clyde back up one branch level from his current location. So the path "../6/8/Spicy" would move Clyde up from (2) to (1), and then from that location down branches (6) and (8) to reach "Spicy". With a bit of practice you can reach any location in your tree from any other starting point.
How would you reach "Yummy" from branch (10)? We need to go up one branch to (6), up another branch to (1), and down branch (2), so our path is written as "../../2/Yummy". Remember, any time you want to go up, use "../" to mean "go up one branch".
To reach "Savory" from branch (8), we simply need to go up one branch and then down into (7), so our path is "../7/Savory". To reach "Yummy" from branch (5), we only need to go up one branch, so Clyde would follow the path "../Yummy". Now let's take a look at your computer files. Computers are a lot like Clyde – they need to be told where to go to find certain files. To the left you can see our tree branches and leaves laid out as a set of folders and files on a typical computer. In order to move from one folder to another, we use the same sort of path we gave to our caterpillar.
To reach "Yummy" from directory (6), for example, we would use "../2/Yummy.html". That moves us up one directory from (6) to the root, then down into the (2) directory to find the "Yummy.html" file. In your HTML code, paths are written in href attributes exactly as we have demonstrated. So, you could construct an internal link from a HTML file in the (6) directory to "Yummy.html" using href = "../2/Yummy.html".
Visit the <a href="../2/Yummy.html">Yummy page</a>!
If all of your HTML files are in the same folder, then you can simply use the filename without any extra path information.
Go <a href="index.html">Home</a>!
Absolute Paths
Linking to files on a large web site with many different folders can get very confusing. What if you wanted to link to the "Spicy.html" from other files, each of which is located in a different folder? You could construct different relative paths from each folder, but that could be hard to do.
Instead, you can build a path directly from the root by starting with a single forward slash (/) without the dots. This is not a relative path built from your current location, but instead is an absolute path that always works based on the root directory, no matter where you started.
Visit the <a href="/6/8/Spicy.html">Spicy</a> page.
The absolute path to "Spicy.html" from the root is "/6/8/Spicy.html". This would work no matter where you started! Unfortunately, this is not very helpful when working just with local files on your file system, as we are in this course. The browser will treat your top C: directory or Home directory as the root and not the folder we have identified as the root like "MyProjects/Raptors".
Real web servers, however, have a good understanding of your root directory. Your HTML pages on a web server can use the single forward slash to start at the root directory and work your way down from there.
1.What is an "internal" link? What is the difference between an "internal" link and a bookmark on the same web page?
2.What two things do you need in order to link to another page on your web site?
3.What is a relative path?
4.Demonstrate several relative paths using information contained within the lesson, or other paths that your students will use in the class.
5.What is an absolute path?
6.What does a single forward slash at the beginning of your path indicate to the web server?
7.When would you use a relative path vs an absolute path? When would you use an absolute path vs a relative path?
1. An "internal" link is a link that leads to another page within the same website. The difference between an "internal" link and a bookmark on the same webpage is that an internal link can take the user to a completely different webpage within the same website, while a bookmark on the same webpage refers to a specific location within the same webpage.
2. In order to link to another page on your website, you need to know the target page's path (the location of the page within the website's file structure) and filename.
3. A relative path is a path that starts from the current location and leads to a target location. It is a path relative to the current file's location within the website's file structure.
4. Examples of relative paths:
- If the target page is in the same directory as the current file:
<a href="target.html">Link to Target Page</a>
- If the target page is in a sub-directory within the same directory as the current file:
<a href="subdirectory/target.html">Link to Target Page</a>
- If the target page is in a parent directory (up one level) from the current file:
<a href="../target.html">Link to Target Page</a>
5. An absolute path is a path that starts from the root directory and specifies the complete file path to a target location. It does not rely on the current file's location within the file structure.
6. A single forward slash at the beginning of the path indicates to the web server that the path should start from the root directory of the website.
7. Relative paths are typically used when linking to pages within the same website, as they can adjust dynamically based on the current file's location. Absolute paths are used when linking to specific pages regardless of the current file's location, or when linking to pages on a different website. The choice between relative paths and absolute paths depends on the specific requirements and context of the links being created.
Relative paths are typically used when linking to pages within the same website, as they can adjust dynamically based on the current file's location. Absolute paths are used when linking to specific pages regardless of the current file's location, or when linking to pages on a different website. The choice between relative paths and absolute paths depends on the specific requirements and context of the links being created.
Rephrase this sentence into kindergardener
Relative paths are like giving directions to a friend who is nearby, while absolute paths are like giving directions to a friend who is far away. You use relative paths when you want to lead someone to another page on your website, and you use absolute paths when you want to lead someone to a specific page no matter where they are. It all depends on how close or far away the page you want to show is!
1. An "internal" link is a hyperlink that connects to another page within the same website. It allows users to navigate between different pages on the website. The difference between an "internal" link and a bookmark on the same web page is that a bookmark is a link that takes the user to a specific section within the same page, while an internal link takes the user to another page within the same website.
2. In order to link to another page on your website, you need to know two things: the target page's path and filename. The path is the location of the target page within your website's directory structure, and the filename is the name of the target page file.
3. A relative path is a path that starts from the current location and leads to a target location. It is based on the current location of the file or page that contains the link. Relative paths are used to link to pages that are in the same directory or in a sub-directory of the current location.
4. Example of relative paths:
- If the target page is in the same directory: `<a href="mypage.html">Link to My Page</a>`
- If the target page is in a sub-directory: `<a href="subdirectory/mypage.html">Link to My Page</a>`
- If the target page is in a parent directory: `<a href="../mypage.html">Link to My Page</a>`
- If the target page is in a sibling directory: `<a href="../siblingdirectory/mypage.html">Link to My Page</a>`
5. An absolute path is a path that starts from the root directory of the website and leads to a target location. It specifies the complete path to the target page, starting from the root directory, regardless of the current location of the file or page that contains the link.
6. A single forward slash (/) at the beginning of a path indicates to the web server that the path is an absolute path and should start from the root directory of the website.
7. Relative paths are used when linking to pages within the same website or directory structure. They are more flexible and portable, as they are not dependent on the website's root directory. Absolute paths, on the other hand, are used when linking to pages on a large website with many different folders. They provide a direct path starting from the root directory and are not affected by the current location of the file or page. The choice between relative and absolute paths depends on the specific requirements and structure of the website.
1. An "internal" link is a link that connects to another page within the same website. The difference between an "internal" link and a bookmark on the same web page is that an internal link allows users to navigate to a different page within the website, while a bookmark is used to quickly jump to a specific section within the same page.
2. In order to link to another page on your website, you need to know two things: the target page's path and filename. The path is the location of the target page within the directory structure of your website, and the filename is the name of the target page file.
3. A relative path is a path that starts from your current location and leads to a target location. It is based on the relationship between the source file and the target file, without specifying the entire file path from the root directory.
4. Here are some examples of relative paths:
- If both the source file and the target file are in the same directory:
<a href="targetpage.html">Link to Target Page</a>
- If the target file is in a sub-directory of the source file:
<a href="subdirectory/targetpage.html">Link to Target Page</a>
- If the target file is in a parent directory of the source file:
<a href="../targetpage.html">Link to Target Page</a>
5. An absolute path is a path that starts from the root directory and specifies the complete file path to the target location. It does not depend on the current location of the source file.
6. A single forward slash at the beginning of a path indicates to the web server that the path should start from the root directory of the website. It allows you to specify an absolute path that works consistently regardless of the current location.
7. You would use a relative path when linking to a page within the same website and when you know the relationship between the source and target files. Relative paths are shorter and easier to maintain. You would use an absolute path when linking to a page on a different website or when you want to ensure a consistent link regardless of the source file's location. Absolute paths can be more complex and harder to manage, especially if the website structure changes.